Design System — By Robots
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<section class="c-collection-layout">
  <ol class="c-collection-layout__list">
    <li class="c-collection-layout__list-item c-collection-layout__list-item--tertiary">
      <p>Hello World!</p>
    </li>
    <li class="c-collection-layout__list-item c-collection-layout__list-item--tertiary">
      <p>It's me, Ruby.</p>
    </li>
    <li class="c-collection-layout__list-item c-collection-layout__list-item--tertiary">
      <p>And I like blocks.</p>
    </li>
  </ol>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
render(CollectionLayout::Component.new(surface:)) do |layout|
  layout.with_item do
    content_tag(:p, 'Hello World!')
  end
  layout.with_item do
    content_tag(:p, 'It\'s me, Ruby.')
  end
  layout.with_item do
    content_tag(:p, 'And I like blocks.')
  end
end

Collection Layout

For rendering content in a single column.

Param Description Input

The surface of the layout. Content on it will be styled accordingly. Applied to individual items.