Dividers

Size

</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="673ed1e0395bb">
    </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="673ed1e03960c">
    </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="673ed1e039643">
    </div>

</br>

sm

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

</br>

md

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

</br>

lg

@divider(['size' => 'lg'])
@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="673ed1e039956">
    </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="673ed1e03998a">
    </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="673ed1e0399b8">
    </div>

</br>

dashed

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

</br>

dotted

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

</br>

solid

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

Blade component parameters

Key	Default value	Type	Available values	Description
componentElement	div	string	-	The tag to use for this component.
style	dashed	string	-	Either dashed, solid or dotted.
size	md	string	-	The length of the divider. Either sm, md or lg.
title		string	-	Title to be displayed in the divider.
titleVariant	h2	string	-	-
align	center	string	-	Alignment of text in the divider. left, center or right.
frame	true	boolean	-	If set to true, the title will be wrapped in a frame.
customFont	false	boolean	-	Enable if font color should be customized. Default: false
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Divider/divider.json