Blog Article Card

<article class="blog-card">

  <div class="blog-card-image">
    <span class="blog-card-category">DESIGN</span>

    <div class="blog-card-visual">
      <span>&lt;/&gt;</span>
    </div>
  </div>

  <div class="blog-card-content">

    <div class="blog-card-meta">
      <span>Sep 5, 2026</span>
      <span>5 min read</span>
    </div>

    <h2>How to Build Better UI Components</h2>

    <p>
      Learn simple techniques for creating cleaner,
      reusable and more polished interface components.
    </p>

    <div class="blog-card-footer">

      <div class="blog-card-author">

        <div class="blog-card-avatar">
          AM
        </div>

        <div>
          <strong>Alex Morgan</strong>
          <span>Frontend Developer</span>
        </div>

      </div>

      <a href="#" class="blog-card-link">
        Read More
        <span>→</span>
      </a>

    </div>

  </div>

</article>

.blog-card{
  width:100%;
  max-width:400px;
  overflow:hidden;
  background:#08111f;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  color:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.blog-card:hover{
  transform:translateY(-7px);
  border-color:rgba(34,211,238,.45);
  box-shadow:
    0 26px 55px rgba(0,0,0,.35),
    0 0 28px rgba(34,211,238,.12);
}

.blog-card-image{
  height:190px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(34,211,238,.20),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #0b1728,
      #121a32
    );
}

.blog-card-category{
  position:absolute;
  top:16px;
  left:16px;
  padding:6px 10px;
  border-radius:999px;
  background:#22d3ee;
  color:#04101b;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
}

.blog-card-visual{
  width:86px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6
  );
  box-shadow:0 0 35px rgba(139,92,246,.25);
}

.blog-card-visual span{
  color:#ffffff;
  font-size:24px;
  font-weight:800;
}

.blog-card-content{
  padding:24px;
}

.blog-card-meta{
  display:flex;
  gap:14px;
  margin-bottom:12px;
  color:#7f93ad;
  font-size:11px;
}

.blog-card h2{
  margin:0 0 12px;
  color:#ffffff;
  font-size:22px;
  line-height:1.35;
}

.blog-card p{
  margin:0 0 22px;
  color:#9fb3cc;
  font-size:14px;
  line-height:1.65;
}

.blog-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.blog-card-author{
  display:flex;
  align-items:center;
  gap:10px;
}

.blog-card-avatar{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6
  );
  color:#ffffff;
  font-size:11px;
  font-weight:800;
}

.blog-card-author > div:last-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.blog-card-author strong{
  color:#ffffff;
  font-size:12px;
}

.blog-card-author span{
  color:#7f93ad;
  font-size:10px;
}

.blog-card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  color:#22d3ee;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.blog-card-link span{
  transition:transform .25s ease;
}

.blog-card:hover .blog-card-link span{
  transform:translateX(5px);
}

How This Blog Article Card Works

The Blog Article Card uses a single <article> element as the main container, with separate sections for the visual header, article details, metadata, author information, and the call-to-action link. The structure is simple enough to reuse inside blog grids, resource pages, or content-heavy layouts without relying on JavaScript.

The main .blog-card container is limited to 400px with width: 100%, so it can shrink inside smaller parent containers while keeping a clear maximum size. A dark #08111f background, a subtle semi-transparent border, and a 20px border radius define the card. overflow: hidden keeps the top visual area and rounded corners neatly contained.

The hover interaction is handled entirely with CSS. When the card is hovered, transform: translateY(-7px) lifts it slightly above its normal position. At the same time, the border becomes more cyan and the box shadow expands from 0 18px 45px to a larger layered shadow. All three changes use a .3s ease transition, keeping the movement controlled rather than instant. For more detail about this technique, see the MDN CSS transitions documentation.

The card header is a 190px-high .blog-card-image section. Instead of using an actual image, it combines a radial cyan highlight with a dark linear gradient. Flexbox centers the decorative .blog-card-visual, which is an 86px square with rounded corners and a cyan-to-purple gradient. The </> text inside it acts as a simple code-related visual.

The category label is positioned independently in the top-left corner using position: absolute, with 16px offsets. Its 999px border radius creates the pill shape, while the cyan background contrasts strongly against the dark header.

Inside .blog-card-content, the metadata row uses flexbox to place the publication date and reading time beside each other with a 14px gap. The article title uses a 22px font size, while the description uses a smaller 14px size and 1.65 line height for readability.

The footer is separated from the main description by a subtle top border. It uses justify-content: space-between to keep the author details on one side and the Read More link on the other. The author avatar is a circular 38px block with the same cyan-to-purple gradient used in the visual header.

The Read More arrow has its own interaction. When the user hovers anywhere over the card, .blog-card:hover .blog-card-link span moves the arrow 5px to the right using a .25s ease transition. This creates a second visual response without requiring JavaScript.

Customizing This Blog Article Card

The component can be adapted by changing the existing content and CSS values while keeping the same structure.

• Change the 400px maximum width if you need wider or narrower article cards.
• Replace the #08111f card background and gradient colors to match your site’s color palette.
• Adjust the 190px header height or the 86px visual block dimensions.
• Replace the DESIGN category, publication date, reading time, article title, description, author name, and role with real content.
• Change the 20px card radius or the smaller visual radius for sharper or softer corners.
• Increase or reduce the translateY(-7px) value to control how far the card lifts on hover.
• Modify the .3s card transition or .25s arrow transition to make the interactions faster or slower.
• Replace the </> visual and AM avatar initials with content that fits the article or author.

Where to Use This Blog Article Card

This card works best when a page needs compact article information combined with author details and a clear reading action.

• Blog archive and category pages.
• Developer resource or tutorial listings.
• Magazine-style article grids.
• Documentation homepages with featured guides.
• Personal portfolio sections containing written articles.
• News or editorial layouts with author information.
• Homepage sections highlighting recent or featured posts.

Because the component has no JavaScript dependency, multiple cards can be placed in a CSS Grid or Flexbox layout without adding interaction logic. If you want a more visually animated card style for another section, the 3D Hover Monster Cards component is a related option.

Frequently Asked Questions

Does the Blog Article Card use JavaScript?

No. The published component contains HTML and CSS only. Its card lift and arrow movement are both controlled with CSS hover selectors and transitions.

How does the card move when hovered?

The .blog-card:hover rule applies transform: translateY(-7px), changes the border color, and increases the shadow. These properties transition over .3s ease.

Can I replace the gradient header with a real blog image?

Yes. The current component uses CSS gradients and a centered </> visual rather than an image. You can replace that visual content when adapting the markup, although the published version itself does not include an image element.

Is the card responsive?

The outer card uses width: 100% together with max-width: 400px, allowing it to shrink with its parent container. The component does not include separate media queries, so broader layout responsiveness depends on the surrounding page.

The Blog Article Card provides a compact dark article preview with useful metadata, author information, and lightweight CSS hover feedback while keeping the implementation straightforward.