Concorde UI component — Divider. Default Align Size Custom Lorem ipsum dolor sit amet +25 Doc ID: core/components/ui/divider/divider. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html.

Divider

Default

<sonic-divider></sonic-divider>

Align

<sonic-divider label="Default centered label"></sonic-divider>
  <sonic-divider label="Right" align="right"></sonic-divider>
  <sonic-divider label="Center" align="center"></sonic-divider>
  <sonic-divider label="Left" align="left"></sonic-divider>

Size

<sonic-divider size="xs" label="xs"></sonic-divider>
  <sonic-divider size="sm" label="sm"></sonic-divider>
  <sonic-divider size="md" label="md"></sonic-divider>
  <sonic-divider size="lg" label="lg"></sonic-divider>

Custom

<sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>