UCI

Tile figures module 

<div class="tile-figures-module">
    <div class="tile-figures-module__figure">
        <div class="
    number-xl
    
"><span>95</span></div>
        <span class="tile-figures-module__figure-percentage">%</span>
    </div>
    <div class="tile-figures-module__line"></div>
    <div class="tile-figures-module__description">
        <div class="
            bodycopy-m
            
            
            
        ">
            De satisfacción global de los clientes UCI seguimos trabajando para que sea aún más alta
        </div>
    </div>
</div>
 
<div class="tile-figures-module">
    <div class="tile-figures-module__figure">
        {{> @number-xl figure }} <span class="tile-figures-module__figure-percentage">%</span>
    </div>
    <div class="tile-figures-module__line"></div>
    <div class="tile-figures-module__description">
        {{> @bodycopy-m description }}
    </div>
</div>
 
{
  "figure": {
    "number": "95"
  },
  "description": {
    "text": "De satisfacción global de los clientes UCI seguimos trabajando para que sea aún más alta"
  }
}
  • Content: 
    .tile-figures-module {
    text-align: center;

    &__figure {
        margin-top: 40px;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: first baseline;

        &-percentage {
            font-family: 'Jornada News Book';
            font-size: 80px;
            font-weight: normal;
            line-height: 1.2;
            letter-spacing: 0;
            color: var(--color-number-accent);

            @media (--viewport-ms-min) {
                font-size: 100px;
            }

            @media (--viewport-sm-min) {
                font-size: 50px;
            }
        }
    }

    &__line {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
        width: 60px;
        height: 3px;
        background-color: var(--color-accent);
    }

    &__description {
        padding-left: 20px;
        padding-right: 19px;
    }
}
  • URL: /components/raw/tile-figures-module/tile-figures-module.css
  • Filesystem Path: src/02-molecules/tile-figures-module/tile-figures-module.css
  • Size: 928 Bytes

No notes defined.