Skip to content

Cards

6. Cards

Cards are one of the most versatile components in Nova Suite, serving as containers for features, content, media, and complex layouts. NS-OG 2.0 establishes clear guidance for card design, spacing, elevation, and grid usage to ensure consistency, visual hierarchy, and interactivity.

6.1 Card Types

Feature Cards are the primary showcase elements used in the Features Section. These cards are slightly larger and emphasize key functionality or features. They use generous padding (p-8 / 2rem / 32px) and incorporate an icon container (w-16 h-16) with a semi-transparent bg-astro-primary/20 background. Corners are rounded (rounded-xl / 12px), and interactive states include subtle scaling and border color transitions on hover, providing a tactile sense of engagement.

Content Cards are secondary cards used throughout the suite to highlight smaller sections of information. They are slightly more compact (p-6 / 1.5rem / 24px) and use smaller icon containers (w-12 h-12). Typography is structured with text-lg headings and text-sm body text, ensuring clarity while differentiating them from primary feature cards.

Media Cards are designed for visual content, such as graphics, illustrations, or SVGs. The content area spans the full width (w-full h-64) and often uses gradient backgrounds to create visual interest. Media types may include SVG illustrations, background gradients, or other imagery that supports the narrative of the card.

Special Layout Cards accommodate more complex content structures. These cards may include internal grids, multiple media elements, or mixed text and visual content, requiring flexible layout rules while maintaining alignment and hierarchy.

6.2 Card Spacing, Elevation, and Padding

NS-OG 2.0 defines a systematic approach to padding and spacing within cards to ensure visual hierarchy and consistency.

Padding Scale:

p-8 (2rem / 32px) for feature cards and large content cards

p-6 (1.5rem / 24px) for standard content cards and mobile feature cards

Internal spacing uses mb-6, mb-4, and mb-3 to separate elements hierarchically

Border and Corner Radius System:

Standard cards: rounded-xl (12px)

Special cards: rounded-2xl (16px)

Icon containers: rounded-lg (8px)

Interactive elements (such as badges): rounded-full

This consistent application of spacing and radius ensures a cohesive visual language across different card types and layouts.

6.3 Card Grid Guidelines

Cards are often displayed in grids to maximize clarity and structure. NS-OG 2.0 outlines precise rules for grids and grouping:

4-Column Feature Grid:

  • Responsive breakpoints: 1 column on mobile → 2 columns at md → 4 columns at lg

  • Gap: gap-8 (2rem / 32px)

  • Max width: max-w-6xl (72rem / 1152px)

2-Column Content Grid:

  • Gap: gap-8

  • Internal spacing: mb-8 between sections

2-Column Mixed Layout:

  • Gap: gap-12 (3rem / 48px) for larger content

  • Alignment: items-center for vertical alignment

Responsive Behavior is mobile-first, with single-column layouts on small screens, progressing to multiple columns on tablet and desktop. Gaps remain consistent (gap-8) across breakpoints, ensuring a smooth visual rhythm.

Card Grouping Rules emphasize balance and clarity:

  • Cards in the same row should maintain equal heights for visual consistency.

  • Content hierarchy follows a predictable icon + title + description pattern.

  • Interactive states are synchronized across grouped cards.

  • Larger padding indicates primary content, while secondary content uses smaller padding.

6.4 Spacing Relationships

Spacing within and around cards is carefully managed:

  • Card Internal: mb-6 (1.5rem) between icons and titles

  • Card External: gap-8 (2rem) between cards

  • Section Spacing: py-20 (5rem) between major sections

  • Content Separation: mb-16 (4rem) between content blocks

6.5 Design Philosophy

The card system in NS-OG 2.0 is guided by several core principles:

  • Generous Spacing: Adequate gaps (gap-8 and gap-12) provide breathing room and prevent visual clutter.

  • Consistent Hierarchy: Primary content uses larger cards and padding, secondary content is more compact.

  • Interactive Feedback: Subtle hover effects signal interactivity without overwhelming the layout.

  • Responsive Scaling: Grids and padding scale gracefully across breakpoints.

  • Visual Continuity: Consistent border radius, color schemes, and elevation maintain a unified aesthetic.

Cards, therefore, serve as both functional containers and visual anchors, guiding users through content and reinforcing Nova Suite’s polished, approachable interface.