Prototyping Demo

Link 

<a href="url" title="Link title" target="_blank" class="link" property="url">Link text</a>
 
<a {{#if url }}href="{{ urlType }}{{ url }}"{{/if}} title="{{ title }}" target="{{ target }}" class="link" property="url">{{ text }}</a>
 
{
  "url": "url",
  "text": "Link text",
  "target": "_blank",
  "title": "Link title"
}
  • 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