Link

Any text utility class can be used to change the link's font size.
<!-- Default -->
<a href="#" class="sds-link">

    {link}

</a>

<!-- Icon Left -->
<a href="#" class="sds-link">

    <span class="sds-link__icon sds-icon sds-icon-externallink"></span>

    {link}

</a>

<!-- Icon Right -->
<a href="#" class="sds-link">

    {link}

    <span class="sds-link__icon sds-icon sds-icon-externallink"></span>

</a>

<!-- Icon Left Right -->
<a href="#" class="sds-link">

    <span class="sds-link__icon sds-icon sds-icon-externallink"></span>

    {link}

    <span class="sds-link__icon sds-icon sds-icon-externallink"></span>

</a>

<a href="{{ href }}" class="{{ namespace }}link{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    {% if iconLeft %}
	<span class="{{ namespace }}link__icon {{ namespace }}icon {{ namespace }}{{ iconLeft }}"></span>
	{% endif %}
	{{ text | safe }}
	{% if iconRight %}
	<span class="{{ namespace }}link__icon {{ namespace }}icon {{ namespace }}{{ iconRight }}"></span>
	{% endif %}
</a>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}link {
    
        /* Save root element context for easy access if nesting is needed */
    
        $self: &;
    
    
        /* properties of current element  + media queries */
       	@include link();
    
    
        /* Pseudo Elements */
    
        &::before {
        }
    
        &::after {
        }
    
        /*
        Include elements that are linked to the current element but have to reside at the root level of the stylesheet
        (e.g: keyframes)
        */
        @at-root {
        }
    
    
        /* children - write selector in full in comments in order to facilitate search */
    
        // link__icon
        &__icon {
    
            // follows same logic as parent
    
    		vertical-align: baseline;
    		position: relative;
    		text-decoration: none;
    		
    		&::before {
    
    			font-size: 1em;
    
    		}
    
    	}
    
    
        /* modifiers */
    
        // link -altStyle
        &.-altStyle {
    
            // follows same logic as base element
    
        }
    
        /* random parent element */
        /*
        *
        *   Syntax : .randomParentElt & {}
        *
        */
    
        /* Pseudo Classes */
    
        &:hover {
    		@media (hover: hover) {
    			@include custom-prop-fallback("color","sys-color-text-secondary-vivid");
    		}
        }
    
        &:focus-visible {
    		@include link-focus();
        }
    
        &:active {
        }
    
        &:focus,
        &:active {
        }
    
    }
  • URL: /components/raw/link/_link.scss
  • Filesystem Path: components/base-components/atoms/link/_link.scss
  • Size: 1.3 KB