Spec Rows lists details as a label on the left and a value on the right. Add a note under any value, a small pill, a link or a highlight. On phones the label can stack above the value so nothing gets squashed.
Ticket details with a highlighted price, a product spec sheet with left-aligned values, and a contact card with a phone link and a pill. Narrow the window to see the labels stack.
The Price row is highlighted and carries a Few left pill. The venue value is a link.
Values sit after a 34% label column, with dashed dividers above, between and below.
No dividers, a tinted container and values in the brand colour. Tap the phone number to call.
No nested columns or text elements to line up by hand.
Drop Spec Rows onto the page and give it an optional heading.
Each row has a label and a value, plus an optional note, pill, link and highlight.
Pick right or left-aligned values, the dividers, the stacking breakpoint and the colours.
Each row is a label and a value, with a few extras when you need them.
Rows are output as a description list (dl, dt and dd), which suits label and value data.
Push values to the right edge, or line them up after a label column of any width.
Choose the breakpoint where each label moves above its value, or never stack.
Add a smaller line under a value for extra detail, such as a booking fee or care tip.
Put a small pill next to a value, like Few left or Free, with its own colours and padding.
Link a value to a page, a phone number or an email address. Link and hover colours are yours to set.
Mark any row to give it a tinted background, rounded corners and its own text colour.
None, between rows, or all including top and bottom. Solid, dashed or dotted, any colour and thickness.
Default colours come from your site's heading, body and brand colours, so it fits in without setup.
Anywhere you would otherwise build a two-column table by hand.
Date, doors, venue, age limit and price in one clear block.
Sizes, materials, weights and warranty on a product page.
Phone, email, address and opening hours with working links.
Bedrooms, floor area, tenure and council tax band.
Show what was booked, when and for how much.
Labels, values, notes, pills and links accept dynamic data from custom fields.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Heading Text | Optional heading shown above the rows. | Ticket details |
| Heading Tag | h2 to h6, p or div. | h3 |
| Rows | Repeater. Each row has Label, Value, Note Under Value, Pill Text, Link On Value and Highlight Row. | 5 sample rows |
| Layout | ||
| Value Alignment | Right, or Left (after label column). | Right |
| Label Column Width | Width of the label column, used as a maximum when values are right-aligned. Responsive. | 40% |
| Label To Value Gap | Space between label and value. Responsive. | 24px |
| Stack Label Above Value At | Breakpoint where the label moves above the value, or never. | Phone portrait |
| Stacked Gap | Space between label and value when stacked. Responsive. | 4px |
| Row Padding (Vertical / Horizontal) | Padding inside each row. Responsive. | 14px / 0px |
| Dividers | ||
| Dividers | None, Between rows, or All (incl. top and bottom). | Between rows |
| Style, Color, Thickness | Solid, dashed or dotted line, its colour and width. | Solid, 1px |
| Text | ||
| Heading | Typography and Space Below. | 12px below |
| Label | Typography. | — |
| Value | Value In Brand Colour toggle, typography, Link Color and Link Hover Color. | Off |
| Note | Typography and Space Above. | 2px above |
| Pill | ||
| Colours | Background, Text Color and Border Color. | Brand tint |
| Shape | Border Width, Radius, Gap From Value, Padding and Typography. | 1px, 999px, 8px |
| Highlighted Rows | ||
| Background, Text Color | Fill and text colour for rows with Highlight Row on. | Brand tint |
| Radius | Corner radius of the highlight. | 6px |
| Horizontal Padding | Side padding of a highlighted row. Responsive. | 12px |
| Container | ||
| Background, Padding, Radius | Style the box around the whole list. | Transparent, 0px |
Yes. Set Link On Value to a tel: or mailto: address. The contact card demo above does this for its phone number and email.
At the breakpoint set in Stack Label Above Value At, each label moves above its value and the value lines up to the left. Set it to never if you want rows to stay side by side.
Yes. The heading, labels, values, notes, pills and link URLs all accept dynamic data.
Yes. Leave Heading Text empty and only the rows are output.
By default the labels use your body text colour, values use your heading colour, and pills and highlights use a tint of your brand colour. You can override each one.
Spec Rows is included with Phox Elements, along with 140+ other premium elements for Breakdance.