FAA Pattern Library - Department of Urban and Regional Planning

Tag: Tag Label Only 

<div class="tag tag--durp tag--light tag--label">
    <span class="tag__text">
            Detail + Fabrication
        </span>
</div>
 
{% if tag.isLinked | default %}
    <a href="{{ tag.url }}" class="tag tag--{{ siteUnit }} tag--{{ background }}">
        <span class="tag__text">
            {{ tag.text | trim }}
        </span>
    </a>
{% else %}
    <div class="tag tag--{{ siteUnit }} tag--{{ background }} tag--label">
        <span class="tag__text">
            {{ tag.text | trim }}
        </span>
    </div>
{% endif %}
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "light",
  "tag": {
    "isLinked": false,
    "text": "Detail + Fabrication",
    "url": "#"
  }
}
  • Content: 
    .tag
    --standardButtonBackgroundColor transparent
    --standardButtonBackgroundColorActive altgeld
    --standardButtonBorderRadius 28px
    --standardButtonOutlineBorder 2px solid illiniOrange
    --standardButtonTextColor charcoalLight
    --standardButtonTextColorActive white

    &--label
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBorderRadius 28px
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive charcoalLight

    &--durp
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBorderRadius 28px
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white

    &--durp&--label
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive cloud
        --standardButtonBorderRadius 28px
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive charcoalLight

    &--arch
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive industrialBlue
        --standardButtonBorderRadius 0
        --standardButtonOutlineBorder 2px solid industrialBlue
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white

    &--arch&--label
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBorderRadius 0
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive charcoalLight

    &--art
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBorderRadius 0
        --standardButtonOutlineBorder 2px solid archesBlue
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive black

    &--art&--label
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBorderRadius 0
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive charcoalLight

    &--college
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive altgeld
        --standardButtonBorderRadius 28px
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive white

    &--dance
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive archesBlue
        --standardButtonBorderRadius 0
        --standardButtonOutlineBorder 2px solid archesBlue
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive black

    &--dance&--label
        --standardButtonBackgroundColor transparent
        --standardButtonBackgroundColorActive transparent
        --standardButtonBorderRadius 0
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonTextColor charcoalLight
        --standardButtonTextColorActive charcoalLight

    &--theatre
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive illiniOrange
        --standardButtonBorderRadius 24px
        --standardButtonOutlineBorder 2px solid illiniOrange
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive illiniBlue

    &--theatre&--label
        --standardButtonBackgroundColor cloud
        --standardButtonBackgroundColorActive cloud
        --standardButtonBorderRadius 24px
        --standardButtonOutlineBorder 2px solid cloudDarkest
        --standardButtonTextColor illiniBlue
        --standardButtonTextColorActive charcoalLight

    align-items center
    background-color var(--standardButtonBackgroundColor)
    border var(--standardButtonOutlineBorder)
    border-radius var(--standardButtonBorderRadius)
    color var(--standardButtonTextColor)
    display inline-block
    padding 8px 20px
    text-align center
    text-decoration none
    transition all 0.3s ease

    &:hover
    &:focus
        background-color var(--standardButtonBackgroundColorActive)

    &:hover &__text
    &:focus &__text
        color var(--standardButtonTextColorActive)

    &__text
        @extends $secondaryLink
        color var(--standardButtonTextColor)
  • URL: /components/raw/tag/tag.styl
  • Filesystem Path: components/bits/tag/tag.styl
  • Size: 4.8 KB

There are no notes for this item.