Card - No Content

  1. Demo
  2. Docu
  3. Full Screen ↗
  • Documentation
  • HTML code
  • Configuration
    •

    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>
    1. 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 Content</h3>
  <img src="https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;q=80&amp;w=400" alt>
</div>

    Configuration

    Component Config: Teasers/card/card.config.js 
    {
  "headline": "No Content",
  "content": null,
  "image": "https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400",
  "type": ""
}