FAA Pattern Library - Department of Urban and Regional Planning

Anchor 

<div id="example-named-link">
</div>
<a href="#example-named-link" class="anchor" title="This link is only visible to logged-in users">
    <span class="anchor__icon">
        <svg class="chain-link-icon" data-name="Layer 1" id="Layer_1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="chain-link-icon_link-1" d="M13.38 10.79a3.5 3.5 0 0 1 0 5l-2.86 2.81a3.5 3.5 0 0 1-5 0 3.5 3.5 0 0 1 0-5l.86-.86" data-name="&lt;Path&gt;" id="_Path_"/>
  <path fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2px" class="chain-link-icon-link-2" d="M11 13.21a3.5 3.5 0 0 1 0-5l2.81-2.81a3.5 3.5 0 0 1 5 0 3.5 3.5 0 0 1 0 5l-.86.86" data-name="&lt;Path&gt;" id="_Path_2"/>
</svg>    </span>
    <span class="anchor__text-label">
        Anchor: &nbsp;
    </span>
    <span class="anchor__text">
        Example named link
    </span>
</a>
 
<div id="{{ component.id }}"></div>
<a href="#{{ component.id }}" class="anchor" title="This link is only visible to logged-in users">
    <span class="anchor__icon">
        {% include 'bits/icons/chain-link.twig' %}
    </span>
    <span class="anchor__text-label">
        Anchor: &nbsp;
    </span>
    <span class="anchor__text">
        {{ component.name }}
    </span>
</a>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "bodyClasses": "logged-in",
  "component": {
    "type": "anchor",
    "id": "example-named-link",
    "name": "Example named link"
  }
}
  • Content: 
    .anchor
    display none

.logged-in .anchor
    display flex

.anchor
    background repeating-linear-gradient(45deg,smokeDarker,smokeDarker 10px,smoke 10px,smoke 20px)
    color navy
    padding 16px 8px
    text-decoration none
    &:hover
    &:focus
        background repeating-linear-gradient(45deg,smokeDarker,smokeDarker 10px,smokeDark 10px,smokeDark 20px)
        .anchor__icon
            transform scale(150%)
    &__text-label
        @extends $headline4
    &__text
        @extends $primaryParagraph
    &__icon
        height 28px
        margin-right 8px
        stroke navy
        transition 0.5s all
        width 28px
  • URL: /components/raw/anchor/anchor-component.styl
  • Filesystem Path: components/components/anchor-component/anchor-component.styl
  • Size: 639 Bytes

There are no notes for this item.