UCI

Bodycopy m: Strong 

<div class="
    bodycopy-m
    
    
    bodycopy--strong
">
    <p>Bodycopy M</p>
</div>
 
<div class="
    bodycopy-m
    {{#if colorLight}}bodycopy_color_light{{/if}}
    {{#if colorDark}}bodycopy--color-dark{{/if}}
    {{#if strong}}bodycopy--strong{{/if}}
"{{#if id}} id="{{id}}"{{/if}}>
    {{#if href}}
        <a class="bodycopy__link" href="{{ href }}"><span>{{{ text }}}</span></a>
    {{else}}
        {{{ text }}}
    {{/if}}
</div>
 
{
  "text": "<p>Bodycopy M</p>",
  "strong": true
}
  • Content: 
    .bodycopy-m {
    color: var(--color-text-tertiary);
    transition: all 0.3s;
    &_color {
        &_light {
            color: var(--color-text-light);
        }
    }

    &.bodycopy {
        &_color {
            &_light {
                color: var(--color-text-light);

                .bodycopy__link {
                    color: var(--color-text-light);

                    span {
                        &::after {
                            background-color: var(--color-text-light);
                        }
                    }
                }
            }
        }

        &--color {
            &-dark{
                color: var(--color-accent-dark);
            }
        }

        &--strong {
            font-weight: 600;
        }
    }

    .bodycopy {
        &__link {
            display: inline-block;
            font-family: 'Jornada Sans Book';
            font-size: 16px;
            font-weight: normal;
            line-height: 26px;
            letter-spacing: 0;
            color: var(--color-text);

            &:hover,
            &:focus {
                span {
                    &::after {
                        width: 100%;
                    }
                }
            }

            span {
                position: relative;
                display: inline-block;
                padding-bottom: 5px;
                transition: all 0.3s;

                &::after {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 0;
                    height: 1px;
                    background-color: var(--color-accent);
                    transition: all 0.3s;
                    content: '';
                }
            }
        }
    }
}
  • URL: /components/raw/bodycopy-m/bodycopy-m.css
  • Filesystem Path: src/01-atoms/bodycopy-m/bodycopy-m.css
  • Size: 1.8 KB

No notes defined.