separator¶

The separator macro is used to render a separator of contexts on the page.

Definition¶

{% separator(options) %}

Input parameters¶

options (optional)¶

options represents an object of separator options

Option key	Type	Default	Required	Description
options.horizontal	`string`	""	no	If set to `true` the separator will be horizontal instead of vertical
options.size	`string`	""	no	Size modifier of the separator padding value. Currently supported values for vertical separators are `m` and `l` and for horizontal separators are `s` and `m`.
options.noMargin	`boolean`	false	no	If set to `true`, appropriate styling class will be added to the separator
options.variant	`string`	""	no	If set, a separator will be rendered in a specific variant. Currently supported values are: `secondary`
options.classNames	`string`	""	no	A list of classes that will be added to the separator

Example¶

In the following example we render a basic separator

{% from "@macros/separator.twig" import separator %}

<div>One element</div>
{{ separator() }}
<div>Another element</div>

Example¶

In the following example we render a horizontal separator

{% from "@macros/separator.twig" import separator %}

<span>One piece of text</span>
{{ separator({
    horizontal: true
}) }}
<span>Another piece of text</span>

Example¶

In the following example we render an l size separator of secondary variant with a custom class making it visible on all devices but mobile.

{% from "@macros/separator.twig" import separator %}

<div>One element</div>
{{ separator({
    size: 'l',
    variant: 'secondary',
    classNames: 'hidden-xs-only'
}) }}
<div>Another element</div>

Macro source code¶

{% macro separator(options) %}
    {% set separatorClass = options.horizontal ? 'separator-horizontal' : 'separator' %}
    {% set horizontalSize = options.size and options.horizontal ? "separator-horizontal_#{options.size}" : '' %}
    {% set verticalSize = options.size and not options.horizontal ? "separator_#{options.size}" : '' %}
    {% set noMarginClass = options.noMargin ? 'mb-xs-0 mt-xs-0' : '' %}
    {% set variantClass = options.variant is defined ? "separator_#{options.variant}" : '' %}

    <hr class="{{ separatorClass }} {{ horizontalSize }} {{ verticalSize }} {{ noMarginClass }} {{ variantClass }} {{ options.classNames }}"></hr>
{% endmacro %}