Design System — By Robots
x
1
2
3
4
5
6
7
8
<section class="c-two-column-layout">
  <div class="c-two-column-layout--column c-two-column-layout-column--tertiary">
    <p>Hello World!</p>
  </div>
  <div class="c-two-column-layout--column c-two-column-layout-column--tertiary">
    <p>How are you?</p>
  </div>
</section>
1
2
3
4
5
6
7
8
9
render(TwoColumnLayout::Component.new(first_surface:, second_surface:)) do |layout|
  layout.with_first_body do
    content_tag(:p, 'Hello World!')
  end
  layout.with_second_body do
    content_tag(:p, 'How are you?')
  end
end

Two Column Layout

For rendering content in a single column.

Param Description Input

The surface of the left column.

The surface of the right column.