Blog Listing 3col

Contrato del layout

Un layout transporta anatomia, no pintura: se rellena por slots y depende del CSS de los componentes que lista. Instalarlo sin ellos lo deja sin estilos.

Slots

{{tagline}}{{headline}}{{description}}{{post1_image}}{{post1_category}}{{post1_title}}{{post1_description}}{{post1_avatar}}{{post1_fullName}}{{post1_date}}{{post1_readTime}}{{post1_url}}{{post2_image}}{{post2_category}}{{post2_title}}{{post2_description}}{{post2_avatar}}{{post2_fullName}}{{post2_date}}{{post2_readTime}}{{post2_url}}{{post3_image}}{{post3_category}}{{post3_title}}{{post3_description}}{{post3_avatar}}{{post3_fullName}}{{post3_date}}{{post3_readTime}}{{post3_url}}{{ctaAll_url}}{{ctaAll}}

Componentes requeridos

typographyimagetagavatarlink-buttonbuttonitem

Anatomía CSS

<div class="layoutBlogListing3col">

</div>

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS.

/* Layout: blog-listing-3col — structure only */
.l-blog-listing-3col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 32px;
}
.l-blog-listing-3col__header {
  text-align: center;
}
.l-blog-listing-3col__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .l-blog-listing-3col__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .l-blog-listing-3col__grid {
    grid-template-columns: 1fr;
  }
}
.l-blog-listing-3col__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l-blog-listing-3col__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}
.l-blog-listing-3col__cta {
  text-align: center;
  margin-top: 16px;
}