<!-- Default -->
<hr>
<!-- Green Pattern Wide -->
<hr class="vd-separator vd-separator-green-pattern">
<!-- Gray Bars Wide -->
<hr class="vd-separator vd-separator-gray-bars">
<hr{% if class %} class="{{ class }}{% if styleModifier %} {{ styleModifier }}{% endif %}"{% elif styleModifier %} class="{{ styleModifier }}"{% endif %}>
/* Default: No context defined. */
/* Green Pattern Wide */
{
"class": "vd-separator vd-separator-green-pattern"
}
/* Gray Bars Wide */
{
"class": "vd-separator vd-separator-gray-bars"
}
@charset 'UTF-8';
/**
* Custom style for separators
*/
.vd-separator {
background-repeat: repeat-x;
border: none;
}
.vd-separator-gray-bars {
height: 5px;
background-size: 4px 5px;
background-image: url("../svg/bars_gray.svg");
}
.vd-separator-green-pattern {
height: 4px;
background-size: 162px 4px;
background-image: url("../svg/pattern_squares_green.svg");
}
Use .vd-separator class to set a vd styled separator. Modifiers:
.vd-separator-green-pattern - separator with the green squares pattern.vd-separator-gray-pattern - separator with the gray squares pattern.vd-separator-gray-bars - separator with the gray oblique bars.vd-separator-wide - removes the max-width limitUse a simple <hr> for a green line, add the class .vd-hr-black to make it black.