UCI

Title l: Color Accent 

<h2 class="
    title-l
    
    
    
    title-l_color_accent
">

    Title L (h2)

</h2>
 
{{#if isH3}}
<h3 class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
">
    {{#if prefix}}
        <span class="title-l__prefix">{{ prefix }}</span>
    {{/if}}

    {{{ text }}}

    {{#if extented}}
        <span class="title-l__extented">{{ extented }}</span>
    {{/if}}
    
</h3>
{{else if isH1}}
<h1 class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
">
    {{#if prefix}}
        <span class="title-l__prefix">{{ prefix }}</span>
    {{/if}}

    {{{ text }}}

    {{#if extented}}
        <span class="title-l__extented">{{ extented }}</span>
    {{/if}}
    
</h1>
{{else if isH4}}
<h4 class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
">
    {{#if prefix}}
        <span class="title-l__prefix">{{ prefix }}</span>
    {{/if}}

    {{{ text }}}

    {{#if extented}}
        <span class="title-l__extented">{{ extented }}</span>
    {{/if}}
    
</h4>
{{else if isH5}}
<h5 class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
">
    {{#if prefix}}
        <span class="title-l__prefix">{{ prefix }}</span>
    {{/if}}

    {{{ text }}}

    {{#if extented}}
        <span class="title-l__extented">{{ extented }}</span>
    {{/if}}
    
</h5>
{{else if isDiv}}
<div class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
" id="{{ id }}"> {{{ text }}}
</div>
{{else if isP}}
<p class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
" id="{{ id }}"> {{{ text }}}
</p>
{{else}}
<h2 class="
    title-l
    {{#if colorLight}}title-l_color_light{{/if}}
    {{#if colorDark}}title-l_color_dark{{/if}}
    {{#if colorAccentDark}}title-l_color_accent-dark{{/if}}
    {{#if colorAccent}}title-l_color_accent{{/if}}
">
    {{#if prefix}}
        <span class="title-l__prefix">{{ prefix }}</span>
    {{/if}}

    {{{ text }}}

    {{#if extented}}
        <span class="title-l__extented">{{ extented }}</span>
    {{/if}}
    
</h2>
{{/if}}
 
{
  "text": "Title L (h2)",
  "colorAccent": true
}
  • Content: 
    .title-l {
    color: var(--color-text-quaternary);

    &__extented {
        position: absolute;
        margin-left: 5px;
        font-size: 14px;
        margin-top: -8px;

        @media (--viewport-ms-min) {
            font-size: 16px;
            margin-top: -11px;
        }
    
        @media (--viewport-sm-min) {
            font-size: 14px;
            margin-top: -6px;
        }
    
        @media (--viewport-md-min) {
            font-size: 16px;
            margin-top: -11px;
        }
    
        @media (--viewport-lg-min) {
            font-size: 16px;
            margin-top: -11px;
        }
    } 
    
    &__prefix {
        float: left;
        margin-right: 5px;

        font-size: 14px;
        margin-top: -5px;

        @media (--viewport-ms-min) {
            font-size: 16px;
            margin-top: -8px;
        }
    
        @media (--viewport-sm-min) {
            font-size: 14px;
            margin-top: -3px;
        }
    
        @media (--viewport-md-min) {
            font-size: 16px;
            margin-top: -8px;
        }
    
        @media (--viewport-lg-min) {
            font-size: 16px;
            margin-top: -7px;
        }
    } 
    &_color {
        &_light {
            color: var(--color-text-light);
        }
        &_secondary {
            color: var(--color-text-secondary);
        }
        &_dark {
            color: var(--color-text);
        }
        &_accent-dark {
            color: var(--color-accent-dark);
        }
        &_accent {
            color: var(--color-accent);
        }
    }
}
  • URL: /components/raw/title-l/title-l.css
  • Filesystem Path: src/01-atoms/title-l/title-l.css
  • Size: 1.6 KB

No notes defined.