Callout Card
Draw special attention to special features, offers, or important messages with this prominent callout card.
This component is designed to stand out from the surrounding content on a page. It's perfect for placing within a blog post, on a dashboard, or in a sidebar to announce something that users shouldn't miss.
About this Component
This card uses a horizontal, multi-column layout on larger screens to present an icon alongside a title, description, and call-to-action. A distinctive colored border on the left side adds a strong visual accent. On mobile devices, the card gracefully stacks into a single column to maintain readability.
Features
- Attention-Grabbing Design: A prominent icon and a colored accent border help the card stand out from standard page content.
- Responsive Layout: Transitions from a horizontal two-column layout on desktop to a stacked, single-column layout on mobile using a simple media query.
- Themed with CSS Variables: The accent color for the border and icon is controlled by a single CSS variable (
--callout-accent-color), making it easy to create different color variations (e.g., for warnings, info, or success messages). - Clear Call-to-Action: Includes an understated but clear "learn more" style link for the call-to-action.
Code Breakdown
HTML Structure
The card uses a section element as its container, which is appropriate for a thematic grouping of content. It's a flex container holding two main children in the form of a div for the SVG icon and another div for the textual content.
CSS Styling
The main class (.callout-card) is styled with display: flex and align-items: center to achieve the side-by-side, vertically centered layout. The colored left border provides the main visual distinction. A media query checks for screens narrower than 640px and changes the flex-direction to column, which causes the icon and text to stack on top of each other.
Code
Here is the complete, self-contained code. You can easily change the theme of the callout by editing the --callout-accent-color CSS variable, or by adding a modifier class as shown in the commented-out example.