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

Default Divider

The simplest use - no attributes required. Drop it between content blocks to draw a full-width neutral rule that adapts automatically to light and dark themes.

<section>
  <mds-text typography="h4">Dati personali</mds-text>
  <mds-text typography="paragraph">Nome, cognome e data di nascita.</mds-text>
</section>

<mds-hr></mds-hr>

<section>
  <mds-text typography="h4">Dati di contatto</mds-text>
  <mds-text typography="paragraph">Indirizzo e-mail e numero di telefono.</mds-text>
</section>

Divider Inside a Card

Use <mds-hr> to split regions inside a compound component such as <mds-card>. It stretches to the full width of its parent slot, so no extra sizing is needed.

<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">Articolo 1 - Servizio annuale</mds-text>
    <mds-hr></mds-hr>
    <mds-text typography="paragraph">Articolo 2 - Supporto prioritario</mds-text>
  </mds-card-content>
</mds-card>

Color Tint via Utility Class

<mds-hr> exposes no CSS custom properties. To change the line color, apply a semantic color utility class (bg-<role>) directly on the host element. Use rgb(var(--magma-<role>)) values in CSS only when no matching utility class exists.

<!-- Stronger neutral rule -->
<mds-hr class="bg-border-default"></mds-hr>

<!-- Branded primary tint -->
<mds-hr class="bg-accent-border"></mds-hr>

Divider Inside a Form

Use <mds-hr> to visually group related form fields without adding semantic structure (use <fieldset> for the semantic grouping; <mds-hr> is purely presentational).

<form>
  <mds-input-field label="Nome">
    <mds-input name="nome"></mds-input>
  </mds-input-field>
  <mds-input-field label="Cognome">
    <mds-input name="cognome"></mds-input>
  </mds-input-field>

  <mds-hr></mds-hr>

  <mds-input-field label="E-mail">
    <mds-input name="email" type="email"></mds-input>
  </mds-input-field>
</form>

Width Constraint via Parent Layout

<mds-hr> always fills width: 100% of its container. To produce an inset or centered rule, constrain it through the parent’s padding or a wrapping element - do not apply width inline on the component itself.

<div style="padding-inline: 2rem;">
  <mds-hr></mds-hr>
</div>