1
2
3
4
5
<div class="d-flex border color-border-success-emphasis"> <%= render(Primer::Alpha::StackItem.new(border: true, border_color: :danger_emphasis)) do %> Hello, world! <% end %></div>
<div class="d-flex border color-border-success-emphasis"> <div data-view-component="true" class="StackItem border color-border-danger-emphasis"> Hello, world! </div></div>
<div class="d-flex border color-border-success-emphasis"> <%= render(Primer::Alpha::StackItem.new(border: true, border_color: :danger_emphasis)) do %> Hello, world! <% end %></div>
No notes provided.
No params configured.
.StackItem { flex: 0 1 auto; min-inline-size: 0;}.StackItem[data-grow='true'],.StackItem[data-grow-narrow='true'] { flex-grow: 1; }/* @custom-media --veiwportRange-regular */@media (min-width: 48rem) { .StackItem[data-grow-regular='true'] { flex-grow: 1; } .StackItem[data-grow-regular='false'] { flex-grow: 0; } }/* @custom-media --viewportRange-wide */@media (min-width: 87.5rem) { .StackItem[data-grow-wide='true'] { flex-grow: 1; } .StackItem[data-grow-wide='false'] { flex-grow: 0; } }
<lookbook-embed app="https://primer-lookbook.github.com/view-components/lookbook/" preview="Primer::Alpha::StackItemPreview" scenario="default"></lookbook-embed>