Data List
A label + content row. The content block holds any number of components; `span` sets the label width: compact · expanded · equal.
| Prop | Type | Default | Notes |
|---|---|---|---|
label |
String | required |
The left-column label text (`$fg-tertiary`). |
span |
String | "compact" |
One of SPANS: "compact" (100px label) · "expanded" (150px) · "equal" (label & content share width 50/50). |
**html_options |
Hash | — | Extra HTML attributes for the root `<div class="data-list">`. |
Compact
Label
This is some content.
1 | <%= render DataListComponent.new(label: "Label") do %> |
2 | <p>This is some content.</p> |
3 | <% end %> |
Equal
Label
This is some content.
1 | <%= render DataListComponent.new(label: "Label", span: "equal") do %> |
2 | <p>This is some content.</p> |
3 | <% end %> |
Expanded
1 | <%= render DataListComponent.new(label: "Label", span: "expanded") do %> |
2 | <p>This is some content.</p> |
3 | <% end %> |