Card ​

The XCard component is a great way to display important pieces of grouped content. This pattern is quickly emerging as a core design pattern for Apps, website previews and email content. It assists the viewer by containing and organizing information, while also setting up predictable expectations.

Overview ​

XCard ​

type CardTypeVariant = 'div' | 'span' | 'section' | 'aside' | 'nav' | 'footer';

interface UseCardClassesProps {
  tag?: CardTypeVariant;
  square?: boolean;
  flat?: boolean;
  bordered?: boolean;
  hoverable?: boolean;
}

XCardSection ​

type CardTypeVariant = 'div' | 'span' | 'section' | 'aside' | 'nav' | 'footer';

interface UseCardClassesProps {
  tag: CardTypeVariant;
  horizontal: boolean;
}

Basic Cards ​

Hoverable ​

Flat ​

Media Content ​

This section component is inspired on Quasar Card.