x
1
2
3
4
5
<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>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>No notes provided.
No params configured.
app/components/primer/alpha/stack_item.css
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
.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; } }