UCI

Title m: H 2 

<h2 class="
        title-m
        
        
        
        
    ">Title M (h2)</h2>
 
{{#if isH2}}
<h2 class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</h2>
{{else if isH1}}
<h1 class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</h1>
{{else if isH4}}
<h4 class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</h4>
{{else if isH5}}
<h5 class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</h5>
{{else if isH6}}
<h6 class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</h6>
{{else if isP}}
<p class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</p>
{{else}}
<h3 class="
        title-m
        {{#if colorLight}}title-m_color_light{{/if}}
        {{#if colorDark}}title-m_color_dark{{/if}}
        {{#if colorAccentDark}}title-m_color_accent-dark{{/if}}
        {{#if colorAccent}}title-m_color_accent{{/if}}
    ">{{{ text }}}</h3>
{{/if}}
 
{
  "text": "Title M (h2)",
  "isH2": true
}
  • Content: 
    .title-m {
    color: var(--color-secondary-brand);
    transition: all 0.3s;
    &_color {
        &_light {
            color: var(--color-text-light);
        }

        &_dark {
            color: var(--color-secondary)
        }

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

        &_accent {
            color: var(--color-text-error)
        }
    }


}
  • URL: /components/raw/title-m/title-m.css
  • Filesystem Path: src/01-atoms/title-m/title-m.css
  • Size: 395 Bytes

No notes defined.