Skip to content

Card Blueprints

Card blueprints in Super JSS provide a set of pre-designed, composable card styles that you can use out-of-the-box to build consistent and attractive user interfaces. The sjCard blueprint is a powerful function that comes with several variants to cover most common use cases.

Table of Contents

  1. Basic Usage
  2. Card Variants
  3. Customizing Cards

Basic Usage

The sjCard blueprint is a function that returns an SjStyle object. You can apply it directly to any element using the [sj] directive.

import { Component } from '@angular/core';
import { SjDirective, sjCard } from 'super-jss';

@Component({
  standalone: true,
  selector: 'app-my-card',
  imports: [SjDirective],
  template: `
    <div [sj]="sjCard()">
      <h3>Default Card</h3>
      <p>This is a simple card using the default style.</p>
    </div>
  `
})
export class MyCardComponent {
  protected readonly sjCard = sjCard;
}

Card Variants

The sjCard API comes with several convenient variants accessible via dot notation.

Default Card

The default card comes with a light background, padding, and subtle transitions.

  • Usage: sjCard()
  • Description: Default card with light background.
<div [sj]="sjCard()">...</div>

Outlined Card

An outlined card has a transparent background and a visible border.

  • Usage: sjCard.outlined()
  • Description: Outlined, transparent background, no shadow.
<div [sj]="sjCard.outlined()">...</div>

Flat Card

A flat card has no box shadow, making it appear flush with the background.

  • Usage: sjCard.flat()
  • Description: No shadow.
<div [sj]="sjCard.flat()">...</div>

Elevated Card

An elevated card has a more pronounced box shadow, making it appear to lift off the page.

  • Usage: sjCard.elevated()
  • Description: Stronger shadow.
<div [sj]="sjCard.elevated()">...</div>

Interactive Card

An interactive card includes hover effects, making it suitable for clickable elements.

  • Usage: sjCard.interactive()
  • Description: Card with hover effects.
<div [sj]="sjCard.interactive()">...</div>

Primary Card

A card styled with the theme's primary color for the background and a contrasting text color.

  • Usage: sjCard.primary()
  • Description: Primary background and contrast text.
<div [sj]="sjCard.primary()">...</div>

Secondary Card

A card styled with the theme's secondary color.

  • Usage: sjCard.secondary()
  • Description: Secondary background and contrast text.
<div [sj]="sjCard.secondary()">...</div>

Info Card

A card for displaying informational messages, often with a subtle background.

  • Usage: sjCard.info()
  • Description: Informational card with subtle background.
<div [sj]="sjCard.info()">...</div>

Code Snippet Card

A specialized card style for displaying preformatted code.

  • Usage: sjCard.codeSnippet()
  • Description: Preset style for code snippets inside cards.
<pre [sj]="sjCard.codeSnippet()"><code>...</code></pre>

Customizing Cards

All sjCard variants are functions that accept an overrides object. This allows you to easily customize any style property of the card.

import { Component } from '@angular/core';
import { SjDirective, sjCard } from 'super-jss';

@Component({
  standalone: true,
  selector: 'app-custom-card',
  imports: [SjDirective],
  template: `
    // Override background color of a default card
    <div [sj]="sjCard({ bg: 'secondary.main', c: 'secondary.contrast' })">
      Custom Background
    </div>

    // Override border radius of a primary card
    <div [sj]="sjCard.primary({ borderRadius: 4 })">
      Custom Border Radius
    </div>

    // Override padding of an elevated card
    <div [sj]="sjCard.elevated({ p: 3 })">
      Custom Padding
    </div>
  `
})
export class CustomCardComponent {
  protected readonly sjCard = sjCard;
}