Municipio Styleguide

Divider

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

Size

full

</br>

sm

    <div class="c-divider c-divider--dashed c-divider--sm c-divider--align-center c-divider--has-frame c-divider--without-title" data-uid="69f0d0fb2c203" 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-uid="69f0d0fb2c256" 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-uid="69f0d0fb2c28e" 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-uid="69f0d0fb2c2bf" 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

</br>

dashed

    <div class="c-divider c-divider--dashed c-divider--md c-divider--align-center c-divider--has-frame c-divider--without-title" data-uid="69f0d0fb2c5d7" 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-uid="69f0d0fb2c61c" 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-uid="69f0d0fb2c652" data-component="divider">
    </div>

</br>

dashed

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

</br>

dotted

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

</br>

solid

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

Title

</br>

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

Title with Frame

Title

</br>

    <div class="c-divider c-divider--solid c-divider--md c-divider--align-center c-divider--has-frame" data-uid="69f0d0fb2ce93" data-component="divider">
                <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-divider__title c-typography__variant--h2" data-uid="69f0d0fb2cee4" 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-uid="69f0d0fb2cf26" data-component="divider">
                <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-divider__title c-typography__variant--h2" data-uid="69f0d0fb2cf58" 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-uid="69f0d0fb2cf90" data-component="divider">
                <!-- typography.blade.php  (hasSeenH1)  original: h2 -->
<h2 class="c-typography c-divider__title c-typography__variant--h2" data-uid="69f0d0fb2cfbe" 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	Description
componentElement	div	The tag to use for this component.
style	dashed	Either dashed, solid or dotted.
size	md	The length of the divider. Either sm, md or lg.
title		Title to be displayed in the divider.
titleVariant	h2	-
align	center	Alignment of text in the divider. left, center or right.
frame	true	If set to true, the title will be wrapped in a frame.
customFont	false	Enable if font color should be customized. Default: false

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

Similar components

Slider Sidebar Drawer