Card

The QCard 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.

With so much content to display at once, and often so little screen real-estate, Cards have fast become the design pattern of choice for many companies, including the likes of Google and Twitter.

The QCard component is intentionally lightweight and essentially a containing element that is capable of “hosting” any other component that is appropriate.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QCard',
      'QCardSection',
      'QCardActions'
    ]
  }
}

Usage

Basic cards



With actions

Cards with actions



Media content

Cards with media content



Card with video



Card with parallax



Various content

Various content



Table



Tabs



QCard API

QCardSection API

QCardActions API