anchor 

<!-- Level 1 -->
<a href="" onclick="helloWorld()" class="" role="button">
    <span class="navmask">
        <img src="../../images/bricknav-thick-studs.png" alt="lego brick - sets find">
        <span class="button-label">Primary</span>
    </span>
</a>


<!-- Level 2 -->
<a href="" onclick="helloWorld()" class="" role="button">
    <span class="navmask-flyout">
        <img src="../../images/bricknav-thick-studs.png" alt="lego brick - sets find">
        <span class="button-label">Primary</span>
    </span>
</a>


<!-- Sets -->
<a href="" onclick="helloWorld()" class="sets" role="button">
    <span class="navmask">
        <img src="../../images/bricknav-thick-studs.png" alt="lego brick - sets find">
        <span class="button-label">Sets</span>
    </span>
</a>


<!-- Parts -->
<a href="" onclick="helloWorld()" class="parts" role="button">
    <span class="navmask">
        <img src="../../images/bricknav-thick-studs.png" alt="lego brick - sets find">
        <span class="button-label">Parts</span>
    </span>
</a>


<!-- Colours -->
<a href="" onclick="helloWorld()" class="colours" role="button">
    <span class="navmask">
        <img src="../../images/bricknav-thick-studs.png" alt="lego brick - sets find">
        <span class="button-label">Colours</span>
    </span>
</a>


<!-- Minifigs -->
<a href="" onclick="helloWorld()" class="minifigs" role="button">
    <span class="navmask">
        <img src="../../images/bricknav-thick-studs.png" alt="lego brick - sets find">
        <span class="button-label">Minifigs</span>
    </span>
</a>


<a href="{{href}}" onclick="{{onClick}}" class="{{anchor_class}}" role="button">
    <span class="{{navclass}}" >
        <img src="{{path '/images/bricknav-thick-studs.png'}}" alt="{{alt}}"> 
        <span class="button-label" >{{anchor_label}}</span>
    </span>
</a>
 
/* Level 1 */
{
  "variant_name": "Level 1",
  "anchor_class": "",
  "navclass": "navmask",
  "anchor_label": "Primary",
  "title": "Primary",
  "unique_id": "button1",
  "onClick": "helloWorld()",
  "alt": "lego brick - sets find",
  "more_info": ""
}


/* Level 2 */
{
  "variant_name": "Level 2",
  "anchor_class": "",
  "navclass": "navmask-flyout",
  "anchor_label": "Primary",
  "title": "Primary",
  "unique_id": "button2",
  "onClick": "helloWorld()",
  "alt": "lego brick - sets find",
  "more_info": ""
}


/* Sets */
{
  "variant_name": "sets",
  "anchor_class": "sets",
  "navclass": "navmask",
  "anchor_label": "Sets",
  "title": "Sets",
  "unique_id": "sets",
  "onClick": "helloWorld()",
  "alt": "lego brick - sets find",
  "more_info": ""
}


/* Parts */
{
  "variant_name": "Parts",
  "anchor_class": "parts",
  "navclass": "navmask",
  "anchor_label": "Parts",
  "title": "Parts",
  "unique_id": "parts",
  "onClick": "helloWorld()",
  "alt": "lego brick - sets find",
  "more_info": ""
}


/* Colours */
{
  "variant_name": "Colours",
  "anchor_class": "colours",
  "navclass": "navmask",
  "anchor_label": "Colours",
  "title": "Colours",
  "unique_id": "colours",
  "onClick": "helloWorld()",
  "alt": "lego brick - sets find",
  "more_info": ""
}


/* Minifigs */
{
  "variant_name": "Minifigs",
  "anchor_class": "minifigs",
  "navclass": "navmask",
  "anchor_label": "Minifigs",
  "title": "Minifigs",
  "unique_id": "minifigs",
  "onClick": "helloWorld()",
  "alt": "lego brick - sets find",
  "more_info": ""
}

No notes defined.

  • Content: 
    a {
    .navmask, .navmask-flyout {
        img{
            width: 125px;
            height: 49px;
        }

        .button-label{
            top: 18px;
            left: 20px;
        }
    }    
}

// a.sets:hover .navmask{
//     background-color: orange;
// }


@include anchorColors('sets');
@include anchorColors('parts');
@include anchorColors('colours');
@include anchorColors('minifigs');
  • URL: /components/raw/anchors/_anchors.scss
  • Filesystem Path: components/basic-elements/anchors/_anchors.scss
  • Size: 402 Bytes