Foehn Design System

Separator: 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 %}>
 
{
  "class": "vd-separator vd-separator-gray-bars"
}
  • Content: 
    @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");
}
  • URL: /components/raw/separator/_separator.scss
  • Filesystem Path: src/components/01-atoms/separator/_separator.scss
  • Size: 383 Bytes

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 limit

Use a simple <hr> for a green line, add the class .vd-hr-black to make it black.