Card Section

What it does

The .section-card component creates a visually distinct section with a card layout, ideal for highlighting content, feature blocks, or interactive elements. It combines a flexible grid, customizable background and foreground colors, and responsive design to ensure your content stands out and adapts beautifully across devices.

Key Features

• Flexible grid layout: Adapts from single to two columns at larger breakpoints.
• Customizable colors: Easily override background and text colors using CSS variables.
• Responsive spacing: Padding and margins scale with breakpoints for consistent appearance.
• Supports card and animation content: Designed to host cards, images, or interactive elements like animations.
• Dark mode support: Automatically adapts colors for dark color schemes.
• Modifier support: Add custom classes (e.g., .reverse, .shadow-2) for layout or style variations.

How to use

1. Basic usage

<section class="section-card">
  <div class="container">
    <h1>Your headline</h1>
    <p>Section content goes here.</p>
  </div>
  <div>
    <div class="card">
      <!-- Card or animation content -->
    </div>
  </div>
</section>

2. Customizing colors and layout

Override CSS variables inline or in your stylesheet:

<section class="section-card" style="--section-card-bg: #fffbe6; --section-card-fg: #222;">
  ...
</section>

Add a modifier for layout changes:

<section class="section-card reverse">
  ...
</section>

How it works

• Uses CSS Grid to arrange content in one or two columns, adapting at lg and xl breakpoints.
• Padding and margin use design tokens (--grid-gap, --spacing-600) for consistent spacing.
• The .container inside .section-card ensures content is vertically stacked and wrapped.
• The last child (typically the card/animation) is positioned absolutely for visual emphasis.
• Supports dark mode via prefers-color-scheme media query.
• Modifier classes like .reverse swap column order at large breakpoints.
• Headings inside .section-card automatically inherit the foreground color for contrast.

Example

<section class="section-card shadow-2">
  <div class="container">
    <p class="h1 mt-ml mb-sm"><span class="text-contour">Crafting the </span><span class="underline-yellow">Future</span></p>
    <h1 class="surface-yellow transform-none h3 mt-sm mb-l">~ JCrafts Software</h1>
    <p>Innovative solutions for modern web projects.</p>
  </div>
  <div>
    <div class="card">
      <!-- Animation or card content here -->
    </div>
  </div>
</section>

Result:

• A visually distinct section with a colored background, responsive layout, and a card/animation area.
• Headings and text are styled for maximum contrast and readability.
• Layout adapts to screen size, stacking on mobile and splitting into columns on desktop.

Reference

• SCSS partial: layout/_section-card.scss
• Related mixins: mq (media queries for breakpoints)
• Tokens used: --color-primary-700, --color-neutral-50, --color-neutral-900, --grid-gap, --spacing-600, --spacing-175

Tip: Use .section-card to highlight important content or feature blocks. Combine with modifier classes and CSS variables for unique layouts that match your brand or project needs.

HTML Code (Demo)

<section class="section-card shadow-2">
  <div class="container"><p class="h1 mt-ml mb-sm"><span class="text-contour">Crafting the </span><span class="underline-yellow">Future</span></p><h1 class="surface-yellow transform-none h3 mt-sm mb-l">~ JCrafts Software</h1></div>
  <div>
    <div class="card">
      <jcrafts-animation src="/assets/images/animations/jclogo-animated-friction-optimized.svg" id="jcrafts-animation-1" class="jcrafts-logo-animation">
        <img src="/assets/images/logo/jclogo.svg" class="visually-hidden">
        <div class="control-panel">
          <button data-action="replay" class="btn btn-replay">
            <span class="fa fa-refresh icon-replay"></span>
            <span class="visually-hidden">Replay</span>
          </button>
          <button data-action="play-pause" class="btn btn-playpause">
            <span class="fa fa-pause icon-playpause"></span>
            <span class="visually-hidden">Play/Pause</span>
          </button>
        </div>
      </jcrafts-animation>
    </div>
  </div>
</section>

Configuration

{
  "headline": "Card Section",
  "modifier": "shadow-2",
  "content": "<p class=\"h1 mt-ml mb-sm\"><span class=\"text-contour\">Crafting the </span><span class=\"underline-yellow\">Future</span></p><h1 class=\"surface-yellow transform-none h3 mt-sm mb-l\">~ JCrafts Software</h1>",
  "animation": {
    "src": "/assets/images/animations/jclogo-animated-friction-optimized.svg",
    "fallbackimg": "/assets/images/logo/jclogo.svg",
    "class": "jcrafts-logo-animation",
    "id": "jcrafts-animation-1"
  }
}