UCI

Related article 

<div class="related-article">
    <div class="related-article__line">
        <div class="related-article__title">
            <span class="caption-label">Leia Ainda</span>
        </div>
        <div class="related-article__text">
            <span class="bodycopy-m">Vantagens de comprar casa com elevada eficência energética</span>
            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
        </div>
    </div>
</div>
 
<div class="related-article">
    <div class="related-article__line">
        <div class="related-article__title">
            {{> @caption caption }}
        </div>
        <div class="related-article__text">
            {{> @bodycopy bodycopyM }}
        </div>
    </div>
</div>
 
{
  "caption": {
    "type": "-label",
    "text": "Leia Ainda"
  },
  "bodycopyM": {
    "type": "-m",
    "text": "Vantagens de comprar casa com elevada eficência energética"
  }
}
  • Content: 
    .related-article {
    padding:16px 0;
    width:100%;
    @media(--viewport-xs-max) {
        margin-right: 0;
        margin-left: 0;
    }
    &__line {
        border-left: solid 2px var(--color-accent);
        padding:20px;
        background-color: var(--color-background-subtle); 
        width:100%;
    }
    &__text .bodycopy-m{
        color:var(--color-text-link-secondary);
    }
}
  • URL: /components/raw/related-article/related-article.css
  • Filesystem Path: src/02-molecules/related-article/related-article.css
  • Size: 395 Bytes

No notes defined.