OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Medium -->
<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">
    <div data-view-component="true" class="Layout-main-centered-md">
      <div data-view-component="true" class="container-md">Main content</div>
    </div>
  </div>
</div>
<!-- Large -->
<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">
    <div data-view-component="true" class="Layout-main-centered-lg">
      <div data-view-component="true" class="container-lg">Main content</div>
    </div>
  </div>
</div>
<!-- Extra large -->
<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">
    <div data-view-component="true" class="Layout-main-centered-xl">
      <div data-view-component="true" class="container-xl">Main content</div>
    </div>
  </div>
</div>
<!-- Full -->
<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>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Medium
render(Primer::Alpha::Layout.new) do |component|
  component.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
  component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
end
# Large
render(Primer::Alpha::Layout.new) do |component|
  component.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
  component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
end
# Extra large
render(Primer::Alpha::Layout.new) do |component|
  component.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
  component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
end
# Full
render(Primer::Alpha::Layout.new) do |component|
  component.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
  component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
end

No params configured.