Card

What it does

The .card component provides a flexible, visually appealing container for grouping related content such as text, images, and actions. Cards help organize information in a way that is easy to scan and interact with, making them ideal for dashboards, listings, and feature highlights.

Key Features

• Flexible layout: Supports text, images, headings, and actions in a vertical stack.
• Customizable appearance: Easily adjust gap, border radius, box shadow, background, and text color using CSS variables or SCSS tokens.
• Responsive sizing: Cards adapt to different screen sizes and content lengths.
• Consistent spacing: Uses a configurable gap and margin system for tidy layouts.
• Image support: Handles images with aspect ratio, object-fit, and rounded corners.
• Typography-friendly: Ensures headings and text are readable and well-spaced.

How to use

1. Basic usage

<div class="card">
  <img src="image.jpg" alt="Card image">
  <h2>Card Title</h2>
  <p>This is a short description inside the card. You can add any content here.</p>
  <a href="#">Read more</a>
</div>

2. Customizing

You can tailor the card to fit your needs:

• Adjust appearance: Override CSS variables like --card-gap, --card-border-radius, --card-bg-color, or --card-box-shadow inline or in your stylesheet.
• Change image ratio: Set --card-img-ratio to control the aspect ratio of images (e.g., 16/9, 4/3).
• Use with headings and actions: Add headings, text, and links as needed. The card will handle spacing and alignment.

Example:

<div class="card" style="--card-gap: 2rem; --card-border-radius: 1.5rem; --card-bg-color: #f9f9f9;">
  ...
</div>

How it works

• The card uses a flex column layout to stack its children vertically with a configurable gap.
• Images are styled for aspect ratio, object-fit, and rounded corners.
• Headings and text inherit the card's text color and spacing.
• Margins and padding are managed with CSS variables for consistency.
• The card adapts to its container, never exceeding 50ch or 90% width by default.

Example

<div class="card">
  <img src="https://placehold.co/600x400" alt="Sample image">
  <h3>Feature Highlight</h3>
  <p>This card demonstrates how you can combine images, headings, and text in a clean, organized layout.</p>
  <a href="#">Learn more</a>
</div>

Result:

• Content is grouped in a visually distinct card with spacing, background, and rounded corners.
• Images are displayed at the top, followed by headings, text, and actions.
• The card adapts to different content and screen sizes.

Reference:

• SCSS partial: src/media/templates/site/jcrafts/scss/components/_cards.scss
• Uses tokens from: src/media/templates/site/jcrafts/scss/tokens/components/_card.scss
• Uses mixins and variables from: src/media/templates/site/jcrafts/scss/abstracts/_index.scss

Tip: Use .card for feature blocks, product listings, or any content that benefits from a clear, contained layout. Customize with CSS variables or extend the SCSS partial to match your brand and design system.

HTML Code (Demo)

<div class="card">
  <h3>No Photo</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.</p>
</div>

Configuration

{
  "headline": "No Photo",
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, esse nisi. Doloremque assumenda quas ullam ipsa ex quae, reiciendis voluptatum beatae officiis laudantium nesciunt qui rem perferendis eveniet sequi dignissimos.",
  "image": null,
  "type": ""
}