FAA Pattern Library - Network

Vibration Lines 

<div class="vibration-lines" data-vibration-lines data-vibration-lines-count="">
    <div class="
            vibration-line
            vibration-line--white
        " data-vibration-line>
    </div>
</div>
 
{% if is_wordpress %}
    {{ enqueue_script('vibration-lines') }}
{%  endif  %}

<div
    class="vibration-lines"
    data-vibration-lines
    data-vibration-lines-count="{{ count }}"
>
    <div
        class="
            vibration-line
            vibration-line--{{ color | default('white')  }}
        "
        data-vibration-line
    >
    </div>
</div>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light"
}
  • Content: 
    .vibration-lines
    display flex
    flex-wrap wrap
    height 100%
    margin-right -4px
    overflow hidden
.vibration-line
    background-color white
    display inline-block
    height 100%
    margin-right 4px
    opacity 0
    width 2px
    &--heritage-orange
        background-color heritageOrange
    &--white
        background-color white
    &--arches-blue
        background-color archesBlue
    &.animate
        opacity 1
  • URL: /components/raw/vibration-lines/vibration-lines.styl
  • Filesystem Path: components/bits/vibration-lines/vibration-lines.styl
  • Size: 439 Bytes

There are no notes for this item.