Vajra — Design System

Componentes / RelatedArticle

estable

Tarjeta de artículo relacionado, en variante default, minified o landscape.

Tech News

17 Jun 2026

Example related article title

This is a short description of the article content used for demo purposes.

5 min read

Leer artículo

Controls

themevariant

HTML

<article class="related-post">
  <span class="related-post__site">Tech News</span>
  <figure class="related-post__image" style="--related-article-icon: url(/icons/ico-arrow.svg);">
    <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d" alt="Example related article title" loading="lazy">
  </figure>
  <div class="related-post__inner">
    <div class="related-post__content">
      <span class="related-post__date">17 Jun 2026</span>
      <h3 class="related-post__title">Example related article title</h3>
      <p class="related-post__description">This is a short description of the article content used for demo purposes.</p>
      <div class="related-post__metadata">
        <div class="related-post__author"><div class="related-post__author-info"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e" alt="John Doe" class="related-post__author-image"></div><div class="related-post__author-info"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" alt="Jane Smith" class="related-post__author-image"></div></div>
        <span class="related-post__reading-time">5 min read</span>
      </div>
    </div>
    <a href="https://example.com/article" class="related-post__link">Leer artículo</a>
  </div>
</article>