FAA Pattern Library - Music

Link With Icon 

<div class="link-with-icon link-with-icon--music">
    <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 26 24">
    <path fill="#FFF" fill-rule="nonzero" d="M23 5a1 1 0 0 1-1.993.117L21 5V1a1 1 0 0 1 1.993-.117L23 1v1h3v22H0V2h3V1A1 1 0 0 1 4.993.883L5 1v4a1 1 0 0 1-1.993.117L3 5V4H2v18h22V4h-1v1zM5 19v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3-3v2h-2v-2h2zM5 16v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm-9-3v2H9v-2h2zm-6 0v2H3v-2h2zm3 0v2H6v-2h2zm6 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zM5 10v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm0-3v2h-2V7h2zM11 7v2H9V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm0-5v2H6V2h14z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            See more items
        </span>
    </a>
</div>
 
<div class="link-with-icon link-with-icon--{{ siteUnit }}">
    <a class="link-with-icon__link" href="{{ iconLink.url }}">
        <span class="link-with-icon__icon">
            {% include 'bits/color-circle-icon/color-circle-icon.twig' with {
                icon: iconLink.icon
            }%}
        </span>
        <span class="link-with-icon__text link-with-icon__text--{{ background }}">
            {{ iconLink.text }}
        </span>
    </a>
</div>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "iconLink": {
    "text": "See more items",
    "url": "#",
    "icon": "calendar"
  }
}
  • Content: 
    .link-with-icon
    --linkTextColor charcoalLight
    --linkTextColorActive illiniOrange

    &--arch
        --linkTextColor charcoalLight
        --linkTextColorActive industrialBlue

    &--art
        --linkTextColor charcoalLight
        --linkTextColorActive archesBlueDark

    &--dance
        --linkTextColor charcoalLight
        --linkTextColorActive archesBlueDark

    &--durp
        --linkTextColor charcoalLight
        --linkTextColorActive illiniOrange

    &--theatre
        --linkTextColor illiniBlue
        --linkTextColorActive illiniOrange

    align-items center
    display inline-flex
    width 100%

    &__icon
        flex-shrink 0

    &__link
        align-items center
        display flex
        text-decoration none

        &:focus
        &:hover
        &:active
            .link-with-icon__text
                color var(--linkTextColorActive)

    &--dark
        color white

    &__text
        @extends $headline2
        color var(--linkTextColor)
        margin-left 16px
  • URL: /components/raw/link-with-icon/link-with-icon.styl
  • Filesystem Path: components/partials/link-with-icon/link-with-icon.styl
  • Size: 1 KB

There are no notes for this item.