Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<!-- Start -->
<div data-view-component="true" class="Layout Layout--flowRow-until-md Layout--sidebarPosition-start Layout--sidebarPosition-flowRow-start">
<div data-view-component="true" class="Layout-sidebar color-bg-accent p-6">Sidebar content</div>
<div data-view-component="true" class="Layout-main color-bg-attention p-6">Main content</div>
</div>
<!-- End -->
<div data-view-component="true" class="Layout Layout--flowRow-until-md Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-start">
<div data-view-component="true" class="Layout-sidebar color-bg-accent p-6">Sidebar content</div>
<div data-view-component="true" class="Layout-main color-bg-attention p-6">Main content</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
# Start
render(Primer::Alpha::Layout.new) do |component|
component.with_main(bg: :attention, p: 6) { "Main content" }
component.with_sidebar(col_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
end
# End
render(Primer::Alpha::Layout.new) do |component|
component.with_main(bg: :attention, p: 6) { "Main content" }
component.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
end