Prototyping Demo

Link: Phone 

<a href="tel:72520000" title="phone number" target="" class="link" property="url">7252 0000</a>
 
{{> @link urlType="tel:" }}
 
{
  "url": "72520000",
  "text": "7252 0000",
  "target": null,
  "title": "phone number"
}
  • Content: 
    /*
 * Element: Link
 */

/*Setting document variables*/
:root{
	--link-color: var(--color-secondary);
	--link-font-family: var(--base-font-family);
}

/*Link style*/
.link,
a.link {
    font-family: var(--link-font-family);
    line-height: 30px;
    position: relative;

    &[href] {
        color: var(--link-color);
        font-weight: 800;
        text-decoration: none;
    }

    &[href]:hover,
    &[href]:focus {
        &:after {
            width: 100%;
        }   
    }

    &:after {
        background-color: var(--color-berry);
        bottom: -10px;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        transition: width .5s;
        width: 35px;
    }
}
  • URL: /components/raw/link/link.css
  • Filesystem Path: patterns/01-atoms/links/link/link.css
  • Size: 716 Bytes