v0.9.9defuss-shadcn
Theme
Design your own

defuss-shadcn / Website / Blog / blog-item

Built with: CSS

Blog ItemBLK

Previews one post with its image, excerpt, and metadata - a card, a horizontal row, or a featured post with the copy over the image. Part of the Blog blocks.

On this page (7)
Component Skill — components/blog-item/component-skill.md

Native basis

An <article> - image, category (Badge) + read time, the title link stretched over the item, a clamped excerpt and the byline (Avatar, name, <time>).

Built from

Badge, Avatar, Swap.

Web Platform APIs

<article>line-clampaspect-ratioscale

Classes

.mk-blog-item.mk-blog-item-title.mk-blog-item-media.mk-blog-item-body.mk-blog-item-meta.mk-blog-item-excerpt.mk-blog-item-byline.mk-blog-item-author.mk-blog-item-date.mk-blog-item-tags.mk-blog-item-actions.mk-blog-item-player

Data attributes

data-variant (horizontal, featured); data-variant (card, minimal, quote, podcast); .mk-blog-item-tags, .mk-blog-item-actions (a bookmark Swap), .mk-blog-item-player.

§Default

Three cards in a grid. Each is one link (the title's); the category is a Badge, the byline an Avatar.

§Horizontal

data-variant='horizontal': the image beside the copy - narrow it and the row wraps, image on top (no media query).

§Featured

data-variant='featured': the copy laid over the image on a dark gradient - the top post of a blog front.

§Cards with tags and bookmarks

data-variant='card': a card surface that lifts on hover. Tag Badges and a bookmark Swap (top right of the image) sit above the stretched link - click them without opening the post.

§Minimal

data-variant='minimal': no image - the date in its own column, the title large. An archive or an essay index.

§Quote and podcast

data-variant='quote' leads with a pull quote on the primary surface; data-variant='podcast' sets a square cover beside the copy with an <audio> player (above the stretched link) below.

§CSS view file

/* -- Blog Item (website) --------------------------------------------
   Previews one post: image, category + read time, the title (its link
   stretches over the whole item), a clamped excerpt and the byline (Avatar).
   Default: a vertical card; horizontal: image beside the copy; featured:
   the copy laid over the image. */
@layer components {
  .mk-blog-item {
    container: mk-blog-item / inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    color: var(--foreground);
    &:has(.mk-blog-item-title a:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 4px;
      border-radius: var(--radius-lg);
    }
  }
  .mk-blog-item-media {
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--muted);
    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 300ms ease;
    }
  }
  .mk-blog-item:hover .mk-blog-item-media img {
    scale: 1.03;
  }
  .mk-blog-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .mk-blog-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
  }
  .mk-blog-item-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
    & a {
      color: inherit;
      text-decoration: none;
      outline: none;
      &::after {
        content: "";
        position: absolute;
        inset: 0;
      }
    }
  }
  .mk-blog-item-excerpt {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mk-blog-item-byline {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-size: 0.8125rem;
  }
  .mk-blog-item-author {
    font-weight: 500;
  }
  .mk-blog-item-date {
    color: var(--muted-foreground);
  }
  /* horizontal: image beside the copy - the row wraps (image above) once
     the copy would drop under 18rem; no query needed */
  .mk-blog-item[data-variant="horizontal"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem 1.5rem;
    & .mk-blog-item-media {
      flex: 1 1 14rem;
      max-width: 100%;
    }
    & .mk-blog-item-body {
      flex: 999 1 18rem;
    }
  }
  /* featured: the copy over the image, on a darkening gradient */
  .mk-blog-item[data-variant="featured"] {
    justify-content: flex-end;
    isolation: isolate;
    min-height: 24rem;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #0b0b0f;
    color: #fff;
    & .mk-blog-item-media {
      position: absolute;
      inset: 0;
      z-index: -1;
      aspect-ratio: auto;
      border-radius: 0;
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgb(0 0 0 / 0.85), rgb(0 0 0 / 0.35) 55%, transparent);
      }
    }
    & .mk-blog-item-body {
      flex: none;
      max-width: 40rem;
    }
    & .mk-blog-item-title {
      font-size: 1.75rem;
    }
    & :is(.mk-blog-item-meta, .mk-blog-item-excerpt, .mk-blog-item-date) {
      color: rgb(255 255 255 / 0.8);
    }
  }
  @container mk-blog-item (min-width: 40rem) {
    .mk-blog-item[data-variant="featured"] .mk-blog-item-title {
      font-size: 2.25rem;
    }
  }
  /* tags under the excerpt, actions on the image (a bookmark Swap…): raised
     above the stretched link so they stay clickable */
  .mk-blog-item-tags {
    position: relative;
    z-index: 1;
    & a {
      text-decoration: none;
    }
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .mk-blog-item-actions {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-end: 0.625rem;
    z-index: 1;
    display: flex;
    gap: 0.25rem;
    & .swap,
    & .btn {
      border-radius: 999px;
      background: color-mix(in oklch, var(--background) 85%, transparent);
      backdrop-filter: blur(6px);
      box-shadow: var(--shadow-sm);
    }
  }
  /* card: on a card surface, lifted on hover */
  .mk-blog-item[data-variant="card"] {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    transition:
      translate 200ms ease,
      box-shadow 200ms ease;
    &:hover {
      translate: 0 -3px;
      box-shadow: var(--shadow-lg);
    }
    & .mk-blog-item-media {
      border-radius: 0;
    }
    & .mk-blog-item-body {
      padding: 1.125rem 1.25rem 1.25rem;
    }
    & .mk-blog-item-byline {
      padding-block-start: 0.75rem;
      margin-block-start: auto;
      border-block-start: 1px solid var(--border);
    }
  }
  /* minimal: typographic - the date in a column, no image */
  .mk-blog-item[data-variant="minimal"] {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0 1.5rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--border);
    & .mk-blog-item-media {
      display: none;
    }
    & .mk-blog-item-body {
      display: contents;
    }
    & .mk-blog-item-byline {
      grid-column: 1;
      grid-row: 1 / span 3;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.125rem;
      padding: 0.25rem 0 0;
      margin: 0;
    }
    & :is(.mk-blog-item-byline .avatar, .mk-blog-item-author) {
      display: none;
    }
    & :is(.mk-blog-item-meta, .mk-blog-item-title, .mk-blog-item-excerpt, .mk-blog-item-tags) {
      grid-column: 2;
    }
    & .mk-blog-item-title {
      font-size: 1.375rem;
    }
    &:hover .mk-blog-item-title {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
  /* quote: a post that leads with a pull quote */
  .mk-blog-item[data-variant="quote"] {
    justify-content: space-between;
    min-height: 16rem;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    background: var(--primary);
    color: var(--primary-foreground);
    & .mk-blog-item-media {
      display: none;
    }
    & .mk-blog-item-title {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.3;
      &::before {
        content: "“";
        display: block;
        font-size: 3rem;
        line-height: 0.6;
        opacity: 0.5;
      }
    }
    & :is(.mk-blog-item-meta, .mk-blog-item-excerpt, .mk-blog-item-date) {
      color: color-mix(in oklch, var(--primary-foreground) 75%, transparent);
    }
    & .mk-blog-item-meta .badge {
      background: color-mix(in oklch, var(--primary-foreground) 15%, transparent);
      color: inherit;
    }
  }
  /* podcast: a square cover beside the copy, a player under it */
  .mk-blog-item[data-variant="podcast"] {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    & .mk-blog-item-media {
      aspect-ratio: 1;
      border-radius: var(--radius-md);
    }
    & .mk-blog-item-excerpt {
      -webkit-line-clamp: 2;
    }
    & .mk-blog-item-byline {
      padding-block-start: 0.25rem;
    }
  }
  .mk-blog-item-player {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    width: 100%;
    height: 2.5rem;
    margin-block-start: 0.875rem;
  }
  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-blog-item-media img {
      transition: none;
    }
    .mk-blog-item:hover .mk-blog-item-media img {
      scale: none;
    }
    .mk-blog-item[data-variant="card"] {
      transition: none;
    }
    .mk-blog-item[data-variant="card"]:hover {
      translate: none;
    }
  }
  @media (prefers-contrast: more) {
    .mk-blog-item-excerpt,
    .mk-blog-item-meta {
      color: var(--foreground);
    }
  }
  @media (forced-colors: active) {
    .mk-blog-item-title a {
      color: LinkText;
    }
    .mk-blog-item[data-variant="featured"] {
      border: 1px solid CanvasText;
    }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub