UCI

Bodycopy: Bodycopy S Hipotecas 

<span class="bodycopy-s">bodycopy s</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
 
{{#if isH2}}
<h2 class="bodycopy{{type}}">{{{text}}}</h2>
{{else if isH3}}
<h3 class="bodycopy{{type}}">{{{text}}}</h3>
{{else if isH4}}
<h4 class="bodycopy{{type}}">{{{text}}}</h4>
{{else}}
<span class="bodycopy{{type}}">{{{text}}}</span>
{{/if}}
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
 
{
  "type": "-s",
  "text": "bodycopy s"
}
  • Content: 
    [class*='bodycopy-'] {
  font-family: var(--font-family-sans-low);
  letter-spacing: var(--font-letter-spacing-wide);
}

.bodycopy {
  &-l,
  &-L {
    font-size: var(--font-size-6);
    line-height: var(--font-line-height-4);

    /*Estilos heredados del viejo átomo (CA. R.)*/
    color: var(--color-text-tertiary);
    &_color {
      &_light {
        color: var(--color-text-light);
      }
    }
    /*Fin estilos heredados del viejo átomo (CA. R.)*/
  }
  &-m,
  &-M {
    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);
      }
    }
    .bodycopy {
      &__link {
        font-size: 16px;
        line-height: 26px;
      }
    }
    /*Fin estilos heredados del viejo átomo (CA. R.)*/
  }
  &-s,
  &-S {
    font-size: var(--font-size-3);
    line-height: var(--font-line-height-2);

    /*Estilos heredados del viejo átomo (CA. R.)*/

    color: var(--color-text);
    &_color {
      &_light {
        color: var(--color-text-light);
      }
    }
    .bodycopy {
      &__link {
        font-size: 13px;
        line-height: 23px;
      }
    }
    /*Fin estilos heredados del viejo átomo (CA. R.)*/
  }
  &-xs,
  &-XS {
    font-size: var(--font-size-2);
    line-height: var(--font-line-height-1);

    /*Estilos heredados del viejo átomo (CA. R.)*/
    color: var(--color-text);
    &_color {
      &_light {
        color: var(--color-text-light);
      }
    }
    /*Fin estilos heredados del viejo átomo (CA. R.)*/
  }

  &_strong {
    font-weight: 600;
  }
  &_medium {
    font-family: 'Jornada Sans Medium';
  }

  /* Para la variante href (CA.R.) */
  .bodycopy {
    &__link {
      display: inline-block;
      font-family: 'Jornada Sans Book';
      font-weight: normal;
      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: '';
        }
      }
    }
    &.bodycopy {
      &_color {
        &_light {
          .bodycopy__link {
            color: var(--color-text-light);

            span {
              &::after {
                background-color: var(--color-text-light);
              }
            }
          }
        }
      }
    }
  }
  /* Fin variante href (CA.R.) */

  &_color {
    &_light {
      color: var(--color-text-inverse);
    }

    &_dark {
      color: var(--color-text-accent);
    }
  }
}
  • URL: /components/raw/bodycopy/bodycopy.css
  • Filesystem Path: src/01-atoms/bodycopy/bodycopy.css
  • Size: 3 KB

No notes defined.