The blocks of a card are separated by the
dividerprop of CdsCard — it draws the same line without adding markup. If the parts of the screen need to be moved onto different surfaces rather than separated, take CdsSurface.
Variations
Appearance
The variant prop sets the style of the line: solid by default, while dashed, dotted and double mark the border as temporary or technical.
Thickness and length
The thickness prop sets the thickness of the line in pixels, length sets its length. Without length the divider takes the whole width of its parent (or its whole height when the divider is vertical).
Color and opacity
The color prop accepts a color alias (green, red, purple) or a design system token, opacity accepts a value from 0 to 1. Color is appropriate when the line carries meaning: the border of an overdue period, a gap in the history of events.
Inset
The inset prop shifts a horizontal divider 72 px from the start of the row — so the line starts under the text rather than under the icon or the avatar. On a vertical divider inset shortens the line from the top and the bottom.
Fading
The gradient prop dissolves the line towards its edges. Such a divider is softer than the regular one and looks good inside dense blocks where a sharp border would read as a frame.
Orientation
The vertical prop turns the divider. A vertical line stretches to the height of its neighbors, so its parent needs a height — usually a display: flex row.
Content
The content of the default slot stands in the break of the line: the divider turns into a caption of the border — "or", a date, the name of a section.
The content-offset prop increases the distance from the content to the line. An array of two values additionally shifts the content itself: downwards on a horizontal divider, to the right on a vertical one.
Guidelines
Scenarios
An alternative way to sign in
A divider with the "or" caption sets two equal paths apart and explains that the second one is not a continuation of the first. content-offset gives the caption some air so it does not blend with the buttons.
Rows of a list
Between the rows of a list a divider replaces the frames: the borders are visible, but the list does not turn into a table. The line goes between the items rather than after each one — the first and the last row do not have it.
Metadata of a record
Vertical dividers break up a row of facts — status, date, author — taking almost no space. A display: flex and a height are enough for the parent row to make the lines stretch along the text.
Sections of a form
A divider with a caption in the slot names a new group of fields. It is calmer than a heading: the rest of the form reads as a continuation rather than as the start of another form.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
color | string | undefined | — | Color of the divider. |
contentOffset | string | number | (string | number)[] | undefined | — | Increases the spacing between the content and the lines. When passed as an array, the second value shifts the slot content down (or right when vertical = true). |
gradient | boolean | undefined | — | Adds a fade-out effect on both ends. |
inset | boolean | undefined | — | Adds an indent to horizontal dividers and reduces the maximum height of vertical ones. |
length | string | number | undefined | — | Length of the divider. Defaults to pixels. |
opacity | string | number | undefined | — | Opacity of the divider. |
theme | string | undefined | — | Component theme |
thickness | string | number | undefined | — | Thickness of the divider. Defaults to pixels. |
variant | "solid" | "dotted" | "dashed" | "double" | undefined | 'solid' | Visual variant of the divider |
vertical | boolean | undefined | — | Renders the divider vertically |
Slots
| Name | Type | Description |
|---|---|---|
default | any | Text or content placed in the gap of the divider |