Prototyping Demo

Link: Email 

<a href="mailTo:mail@mail.dk" title="e-mail" target="_blank" class="link" property="url">mail@mail.dk</a>
 
{{> @link urlType="mailTo:" }}
 
{
  "url": "mail@mail.dk",
  "text": "mail@mail.dk",
  "target": "_blank",
  "title": "e-mail"
}
  • 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