FAA Pattern Library - Network

Numbers Component 

<div class="numbers-component numbers-component--network numbers-component--light numbers-component--large">
    <div class="numbers-component__number numbers-component__number--1" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
        <div class="numbers-component__number-line numbers-component__number-line--1" data-numbers-component-line>
        </div>
        <div class="numbers-component__number-value">
            6th
        </div>
        <div class="numbers-component__number-description">
            in the world according to Center for World University Rankings
        </div>
    </div>
    <div class="numbers-component__number numbers-component__number--2" data-sal="slide-up" data-sal-duration="400" data-sal-delay="600" data-sal-easing="ease-out-quint">
        <div class="numbers-component__number-line numbers-component__number-line--2" data-numbers-component-line>
        </div>
        <div class="numbers-component__number-value">
            3
        </div>
        <div class="numbers-component__number-description">
            enrollment options
        </div>
    </div>
    <div class="numbers-component__number numbers-component__number--3" data-sal="slide-up" data-sal-duration="400" data-sal-delay="800" data-sal-easing="ease-out-quint">
        <div class="numbers-component__number-line numbers-component__number-line--3" data-numbers-component-line>
        </div>
        <div class="numbers-component__number-value">
            96%
        </div>
        <div class="numbers-component__number-description">
            job placement rate for graduates
        </div>
    </div>
    <div class="numbers-component__number numbers-component__number--4" data-sal="slide-up" data-sal-duration="400" data-sal-delay="1000" data-sal-easing="ease-out-quint">
        <div class="numbers-component__number-line numbers-component__number-line--4" data-numbers-component-line>
        </div>
        <div class="numbers-component__number-value">
            10:1
        </div>
        <div class="numbers-component__number-description">
            student faculty ratio
        </div>
    </div>
</div>
 
{% if is_wordpress %}
    {{ enqueue_script('numbers') }}
{%  endif  %}

<div class="numbers-component numbers-component--{{ siteUnit }} numbers-component--{{ background }} numbers-component--{{ componentSpacing }}">
    {% for number in component.numbers %}
        {% set delay = 400 + (loop.index0 * 200) %}
        <div class="numbers-component__number numbers-component__number--{{ loop.index }}"
             data-sal="slide-up"
             data-sal-duration="400"
             data-sal-delay="{{ delay }}"
             data-sal-easing="ease-out-quint">
            <div class="numbers-component__number-line numbers-component__number-line--{{ loop.index }}" data-numbers-component-line>
            </div>
            <div class="numbers-component__number-value">
                {{ number.numberValue }}
            </div>
            {% if number.description | default %}
                <div class="numbers-component__number-description">
                    {{ number.description | raw }}
                </div>
            {% endif %}
        </div>
    {% endfor %}
</div>
 
{
  "siteUnit": "network",
  "departmentName": "Network",
  "background": "light",
  "componentSpacing": "large",
  "component": {
    "type": "numbers",
    "numbers": [
      {
        "numberValue": "6th",
        "description": "in the world according to Center for World University Rankings"
      },
      {
        "numberValue": "3",
        "description": "enrollment options"
      },
      {
        "numberValue": "96%",
        "description": "job placement rate for graduates"
      },
      {
        "numberValue": "10:1",
        "description": "student faculty ratio"
      }
    ]
  }
}
  • Content: 
    .numbers-component
    &--large
        @extends $componentWithMargin

    &--medium
        @extends $componentWithMarginMedium

    &--small
        @extends $componentWithMarginSmall

    display grid
    grid-column-gap 16px
    grid-row-gap 48px
    grid-template-columns 1fr
    justify-content center

    --descriptionColor charcoalLight
    --numberBorderColor illiniOrange
    --numberColor illiniOrange

    &--arch
        --descriptionColor charcoalLight
        --numberBorderColor industrialBlue
        --numberColor industrialBlue

    &--art
        --descriptionColor charcoalLight
        --numberBorderColor archesBlue
        --numberColor charcoalLighter

    &--college
        --descriptionColor illiniBlue
        --numberBorderColor illiniOrange
        --numberColor illiniOrange

    &--dance
        --descriptionColor charcoalLight
        --numberBorderColor archesBlue
        --numberColor charcoalLighter

    &--durp&--light
        --descriptionColor charcoalLight
        --numberBorderColor illiniOrange
        --numberColor illiniOrange

    &--durp&--dark
        --descriptionColor white
        --numberBorderColor illiniOrange
        --numberColor white

    &--landarch
        --descriptionColor charcoalDarker
        --numberBorderColor illiniOrange
        --numberColor illiniOrange

    &--theatre
        --descriptionColor charcoalLight
        --numberBorderColor illiniOrange
        --numberColor illiniOrange

    &--music
        --descriptionColor illiniBlue
        --numberBorderColor illiniOrange
        --numberColor altgeld

    +above(numbersBreakpoint)
        grid-template-columns repeat(2, 1fr)

    &__number-line
        background-color var(--numberBorderColor)
        height 2px
        max-width 0
        width 100%

        &--animate
            animation drawNumberLine 1000ms
            animation-fill-mode forwards

        &--1
            animation-delay 500ms

        &--2
            animation-delay 1000ms

        &--3
            animation-delay 1500ms

        &--4
            animation-delay 2000ms

    &__number-value
        @extends $billboardTitle
        color var(--numberColor)

    &__number-description
        @extends $headline3
        color var(--descriptionColor)


@keyframes drawNumberLine
    from
        max-width 0

    to
        max-width 100%
  • URL: /components/raw/numbers-component/numbers-component.styl
  • Filesystem Path: components/components/numbers-component/numbers-component.styl
  • Size: 2.4 KB

There are no notes for this item.