Municipio Styleguide

Divider

The Divider component provides a reusable pattern for divider in the interface.

Size

full

sm
<div class="c-divider c-divider--dashed c-divider--sm c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div><br />
md
<div class="c-divider c-divider--dashed c-divider--md c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div><br />
lg
<div class="c-divider c-divider--dashed c-divider--lg c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div><br />
full
<div class="c-divider c-divider--dashed c-divider--full c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div>

</br>

sm

@divider(['size' => 'sm'])
@enddivider

</br>

md

@divider(['size' => 'md'])
@enddivider

</br>

lg

@divider(['size' => 'lg'])
@enddivider

</br>

full

@divider(['size' => 'full'])
@enddivider

Style

dashed

dotted

solid

dashed
<div class="c-divider c-divider--dashed c-divider--md c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div><br />
dotted
<div class="c-divider c-divider--dotted c-divider--md c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div><br />
solid
<div class="c-divider c-divider--solid c-divider--md c-divider--align-center c-divider--has-frame c-divider--without-title" data-component="divider"></div>

</br>

dashed

@divider(['style' => 'dashed'])
@enddivider

</br>

dotted

@divider(['style' => 'dotted'])
@enddivider

</br>

solid

@divider(['style' => 'solid'])
@enddivider

Title

<div class="c-divider c-divider--dashed c-divider--md c-divider--align-center" data-component="divider">
  <!-- typography.blade.php (promoted) (hasSeenH1)  original: h2 -->
  <h1 class="c-typography c-divider__title c-typography__variant--h2" data-component="typography">
    Title
  </h1>
</div>

Title with Frame

Title

<div class="c-divider c-divider--solid c-divider--md c-divider--align-center c-divider--has-frame" data-component="divider">
  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
  <h2 class="c-typography c-divider__title c-typography__variant--h2" data-component="typography">
    Title
  </h2>
</div><br />
<div class="c-divider c-divider--dashed c-divider--md c-divider--align-center c-divider--has-frame" data-component="divider">
  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
  <h2 class="c-typography c-divider__title c-typography__variant--h2" data-component="typography">
    Title
  </h2>
</div><br />
<div class="c-divider c-divider--dotted c-divider--md c-divider--align-center c-divider--has-frame" data-component="divider">
  <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
  <h2 class="c-typography c-divider__title c-typography__variant--h2" data-component="typography">
    Title
  </h2>
</div>

</br>

@divider(['size' => 'md', 'style' => 'solid', 'title' => 'Title', 'frame' => true])@enddivider

</br>

@divider(['size' => 'md', 'style' => 'dashed', 'title' => 'Title', 'frame' => true])@enddivider

</br>

@divider(['size' => 'md', 'style' => 'dotted', 'title' => 'Title', 'frame' => true])@enddivider

API

Parameter	Default	Type	Description
componentElement	div	string	-
style	dashed	string	-
size	md	string	-
title		string	-
titleVariant	h2	string	-
align	center	string	-
frame	true	boolean	-
customFont	false	boolean	-

CSS API

Variable	Default	Type	Values	Description
--c-divider--color--surface	var(--color--surface)	color	-	Surface
--c-divider--border-width	var(--border-width)	range	-	Size
--c-divider--border-radius	var(--border-radius)	range	-	Border Radius
--c-divider--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-divider--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-divider--font-size-300	var(--font-size-300)	range	-	Two steps above base in the type scale. Equivalent to h5.

Similar components

Slider Sidebar Drawer