Detail
A list-item row with a leading prefix marker over nested `<p>`s — the first is the primary line, any later `<p>` is the tertiary subtext. Roman/number/letter markers auto-increment via CSS counters — wrap the loop in `.detail-list`.
| Prop | Type | Default | Notes |
|---|---|---|---|
prefix |
String/Symbol | required |
One of PREFIXES. |
**html_options |
Hash | — | Any extra HTML attributes (id, class, data-*, …). Content is nested `<p>`s — the first is the primary line; any later `<p>` reads as the smaller tertiary subtext. |
Arrow
Software design & engineering at Bureau.
Available for full time / contract roles.
1 | <%= render DetailComponent.new(prefix: :arrow) do %> |
2 | <p>Software design & engineering at Bureau.</p> |
3 | <p>Available for full time / contract roles.</p> |
4 | <% end %> |
Letters
Software design & engineering at Bureau.
Available for full time / contract roles.
1 | <%= render DetailComponent.new(prefix: :letter) do %> |
2 | <p>Software design & engineering at Bureau.</p> |
3 | <p>Available for full time / contract roles.</p> |
4 | <% end %> |
Numbers
Software design & engineering at Bureau.
Available for full time / contract roles.
1 | <%= render DetailComponent.new(prefix: :number) do %> |
2 | <p>Software design & engineering at Bureau.</p> |
3 | <p>Available for full time / contract roles.</p> |
4 | <% end %> |
Numerals
Software design & engineering at Bureau.
Available for full time / contract roles.
1 | <div class="stack col gap-12 detail-list"> |
2 | <% items.each do |item| %> |
3 | <%= render DetailComponent.new(prefix: :roman) do %> |
4 | <p><%= item.title %></p> |
5 | <p><%= item.note %></p> |
6 | <% end %> |
7 | <% end %> |
8 | </div>
|
Pipe
Software design & engineering at Bureau.
Available for full time / contract roles.
1 | <%= render DetailComponent.new(prefix: :pipe) do %> |
2 | <p>Software design & engineering at Bureau.</p> |
3 | <p>Available for full time / contract roles.</p> |
4 | <% end %> |