<span class="title-xl
">Title xl Default</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
{{#if isH1}}
<h1 class="title{{type}}{{#if colorLight}} title_color_light{{/if}}
{{#if colorDark}} title_color_dark{{/if}}
{{#if colorAccentDark}} title_color_accent-dark{{/if}}
{{#if colorAccent}} title_color_accent{{/if}}">{{{text}}}</h1>
{{else if isH2}}
<h2 class="title{{type}}{{#if colorLight}} title_color_light{{/if}}
{{#if colorDark}} title_color_dark{{/if}}
{{#if colorAccentDark}} title_color_accent-dark{{/if}}
{{#if colorAccent}} title_color_accent{{/if}}">{{{text}}}</h2>
{{else if isH3}}
<h3 class="title{{type}}{{#if colorLight}} title_color_light{{/if}}
{{#if colorDark}} title_color_dark{{/if}}
{{#if colorAccentDark}} title_color_accent-dark{{/if}}
{{#if colorAccent}} title_color_accent{{/if}}">{{{text}}}</h3>
{{else if isH4}}
<h4 class="title{{type}}{{#if colorLight}} title_color_light{{/if}}
{{#if colorDark}} title_color_dark{{/if}}
{{#if colorAccentDark}} title_color_accent-dark{{/if}}
{{#if colorAccent}} title_color_accent{{/if}}">{{{text}}}</h4>
{{else}}
<span class="title{{type}}{{#if colorLight}} title_color_light{{/if}}
{{#if colorDark}} title_color_dark{{/if}}
{{#if colorAccentDark}} title_color_accent-dark{{/if}}
{{#if colorAccent}} title_color_accent{{/if}}">{{{text}}}</span>
{{/if}}
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
{
"type": "-xl",
"text": "Title xl Default"
}
[class*='title-'] {
font-family: var(--font-family__title);
letter-spacing: var(--font-letter-spacing-wide);
}
.title {
&-xl,
&-XL {
@media (--viewport-xs-min) {
font-size: var(--font-size-11);
line-height: var(--font-line-height-8);
}
@media (--viewport-ms-min) {
font-size: var(--font-size-12);
line-height: var(--font-line-height-9);
}
@media (--viewport-sm-min) {
font-size: var(--font-size-12);
line-height: var(--font-line-height-9);
}
@media (--viewport-md-min) {
font-size: var(--font-size-14);
line-height: var(--font-line-height-11);
}
@media (--viewport-lg-min) {
font-size: var(--font-size-14);
line-height: var(--font-line-height-11);
}
/*Estlos heredados del viejo átomo (CA. R.)*/
color: var(--color-text-quaternary);
&_color {
&_light {
color: var(--color-text-light);
}
&_secondary {
color: var(--color-text-secondary);
}
}
}
&-l,
&-L {
@media (--viewport-xs-min) {
font-size: var(--font-size-9);
line-height: var(--font-line-height-6);
}
@media (--viewport-ms-min) {
font-size: var(--font-size-10);
line-height: var(--font-line-height-7);
}
@media (--viewport-sm-min) {
font-size: var(--font-size-10);
line-height: var(--font-line-height-7);
}
@media (--viewport-md-min) {
font-size: var(--font-size-11);
line-height: var(--font-line-height-8);
}
@media (--viewport-lg-min) {
font-size: var(--font-size-11);
line-height: var(--font-line-height-8);
}
/*Estlos heredados del viejo átomo (CA. R.)*/
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);
}
}
}
&-m,
&-M {
@media (--viewport-xs-min) {
font-size: var(--font-size-6);
line-height: var(--font-line-height-3);
}
@media (--viewport-ms-min) {
font-size: var(--font-size-7);
line-height: var(--font-line-height-4);
}
@media (--viewport-sm-min) {
font-size: var(--font-size-7);
line-height: var(--font-line-height-4);
}
@media (--viewport-md-min) {
font-size: var(--font-size-8);
line-height: var(--font-line-height-5);
}
@media (--viewport-lg-min) {
font-size: var(--font-size-8);
line-height: var(--font-line-height-5);
}
/*Estlos heredados del viejo átomo (CA. R.)*/
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)
}
}
}
&-s,
&-S {
/*No responsive scaling*/
font-family: var(--font-family__title-s);
letter-spacing: var(--font-letter-spacing-wide);
font-size: var(--font-size-5);
line-height: var(--font-line-height-3);
/*Estlos heredados del viejo átomo (CA. R.)*/
color: var(--color-text-tertiary);
transition: all 0.3s;
&_color {
&_light {
color: var(--color-text-light);
}
}
}
&_color {
&_light {
color: var(--color-text-inverse);
}
&_dark {
color: var(--color-text);
}
&_accent-dark {
color: var(--color-text-accent);
}
&_accent {
color: var(--color-text-error);
}
}
}
No notes defined.