Correct and idiomatic ways to use the <mds-separator> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Dividing Items in a List or Card

The most common use: place <mds-separator> between stacked rows or sections to create a thin visual boundary without adding semantic structure. The component is inert and carries no ARIA role, so it works as pure chrome.

<div class="grid rounded-(--magma-radius-xl) bg-surface-raised overflow-hidden">
  <mds-entity icon="mi/baseline/person">
    <mds-text typography="h6">Mario Rossi</mds-text>
  </mds-entity>
  <mds-separator></mds-separator>
  <mds-entity icon="mi/baseline/person">
    <mds-text typography="h6">Luigi Verdi</mds-text>
  </mds-entity>
  <mds-separator></mds-separator>
  <mds-entity icon="mi/baseline/person">
    <mds-text typography="h6">Wario</mds-text>
  </mds-entity>
</div>

Dividing Sections Inside a Card

Use <mds-separator> to separate groups of content inside a card region. <mds-card> renders only its four named slots, so a separator placed directly in the card, between the regions, is not rendered: put it inside the region, as a direct sibling of the rows it divides - do not wrap it.

<mds-card>
  <mds-card-header slot="header">
    <mds-text typography="h6">Riepilogo ordine</mds-text>
  </mds-card-header>
  <mds-card-content slot="content">
    <mds-text typography="paragraph">Subtotale: 104,92 EUR</mds-text>
    <mds-separator></mds-separator>
    <mds-text typography="paragraph">Totale: 128,00 EUR</mds-text>
  </mds-card-content>
  <mds-card-footer slot="footer">
    <mds-button label="Conferma" variant="primary" tone="strong"></mds-button>
  </mds-card-footer>
</mds-card>

Dividing Items Inside a Price-Table List

<mds-separator> is the internal divider used by mds-price-table-list, between its header and its items. When building a custom feature list, place one separator between consecutive rows, never one before the first or after the last.

<div class="grid">
  <mds-text typography="caption">Archiviazione inclusa</mds-text>
  <mds-separator></mds-separator>
  <mds-text typography="caption">Utenti illimitati</mds-text>
  <mds-separator></mds-separator>
  <mds-text typography="caption">Supporto dedicato</mds-text>
</div>

Custom Separator Color

Override the divider color through the single documented CSS custom property --mds-separator-background. Use a semantic color role wrapped in rgb(var(--magma-<role>)) so dark-mode and high-contrast variants keep working.

.sezione-speciale mds-separator {
  --mds-separator-background: rgb(var(--magma-accent-border));
}

<div class="sezione-speciale">
  <mds-text typography="h6">Piano Pro</mds-text>
  <mds-separator></mds-separator>
  <mds-text typography="paragraph">Accesso a tutte le funzionalita</mds-text>
</div>