Category Tag & Reading Time Card
Help users find the right content faster with this metadata-rich blog card that highlights the category and estimated reading time.
This layout is particularly useful for blogs and knowledge bases with a diverse range of topics and article lengths, as it allows users to make quick, informed decisions about what to read.
About this Component
The main feature of this card is the metadata bar positioned at the top of the content area. It contains a clickable category "tag" on the left and a "reading time" indicator with an icon on the right. This prioritizes context, telling the user what the article is about and how long it will take to read before they even parse the title.
Features
- Prominent Metadata: The category tag and reading time are placed above the title for quick scanning and content filtering.
- Valid Nested Links: Uses a modern CSS "stretched-link" technique to make the entire card clickable while allowing the category tag to be a separate, valid link.
- Clear Reading Time Indicator: A clock icon paired with the text makes the time commitment instantly recognizable.
- Flexible Height: Flexbox ensures the author byline remains aligned at the bottom, even with different amounts of text in each card.
Code Breakdown
HTML Structure
The card is built as a single article that contains an img for the header photo, a h3 for the title, and a footer for the author details. The metadata bar itself contains a link for the category and a span for the reading time.
A common challenge with cards like this is having multiple clickable areas. In this case it's the category tag, and the main card itself. This template solves that with a modern technique. The primary a is placed on the article's title. CSS is then used to stretch this link's clickable area to cover the entire card, while ensuring that the smaller, more specific category a remains clickable on top.
CSS Styling
This component uses a "stretched-link" technique to ensure the HTML is valid. The main card container (.bmt-card) has position: relative. The primary anchor tag (.bmt-card-link) has a CSS pseudo-element (::after) with position: absolute and inset: 0. This stretches a clickable, transparent layer across the entire card. All the visible content within the card, including the smaller category tag link, are then given a higher z-index to "lift" them above this background link. This ensures that a click on the category tag is captured by that specific link, while a click anywhere else is captured by the main card's link.
Code
Here is the complete code. You can easily adapt this template by updating the metadata and content for your own articles.