nte-card

Card layout web component with optional header, image, content, footer and link handling.

Usage

import '@nextrap/nte-card';

<nte-card class="default">
  <h3 slot="header">Card title</h3>
  <img slot="image" src="/image.jpg" alt="">
  <p>Card content</p>
  <p slot="footer">Footer</p>
</nte-card>

Styling

@use '@nextrap/nte-card' as card;

nte-card {
  @include card.default-style();
}

default-style() sets border, background, border radius, inner padding and image aspect-ratio variables. It sets an independent wrapper $gap, defaulting to var(--nt-spacing-text). Region bleed removes only outer padding; gaps between regions and between sibling cards remain intact.

Available mixins:

@include card.default-style();
@include card.with-image-fullsize();
@include card.with-image-overlay();
@include card.with-modifier-classes();

Use --aspect-ratio or --image-aspect-ratio on nte-card to control the image area ratio. Images in the image slot use object-fit: cover by default.