<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