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.


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [


Basic cards

With actions

Cards with actions

Below are some of the custom alignments that you can use for the actions through the align property:

Aligning actions

Media content

Cards with media content

Card with video

Card with parallax

Various content

Various content




QCardSection API

QCardActions API