AFW Pattern Lab

Divider: Vertical 

<div class="divider">

    <span class="divider__text">Est Eu</span>

</div>
 
<div class="divider">
    {% if text %}
    <span class="divider__text">{{text|safe}}</span>
    {% endif %}
</div>
 
{
  "text": "Est Eu"
}
  • Content: 
    .divider {
    $this: &;

    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    gap: rem(6px);
    margin-block: rem(16px);

    &:before,
    &:after {
        background: $color-gray;
        border-bottom: rem(1px) solid white;
        border-radius: rem(1px);
        content: '';
        display: block;
        width: 100%;
        height: rem(2px);
    }

    &__text {
        color: $color-gray-dark;
        font-size: rem(12px);
        font-weight: 600;
        text-shadow: 0 rem(2px) 0 white;
        text-transform: uppercase;
        line-height: 0;
        white-space: nowrap;
        position: relative;
        top: rem(-0.5px);
    }
}
  • URL: /components/raw/divider/divider.scss
  • Filesystem Path: source/patterns/atoms/divider/divider.scss
  • Size: 727 Bytes

No notes defined.