Cards

Quasar Cards are a great way to display important pieces of content, and are quickly emerging as a core design pattern for Apps. They’re a great way to contain and organize information, while also setting up predictable expectations for the user. 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.

Quasar Cards are a collection of components that you can use, based on the needs. It’s all about being creative. Experiment with different Web Components by embedding them in Card components to create awesome results.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QCard',
    'QCardTitle',
    'QCardMain',
    'QCardMedia',
    'QCardSeparator',
    'QCardActions'
  ]
}

Basic Usage

Familiarize yourself with Card components with the examples below. The only requirement is that QCard needs to wrap all the other ones. Everything else is optional and can be inserted into your template anywhere as long as they are direct children of QCard.

Following are Vue properties of QCard component:

Vue Property	Type	Description
`square`	Boolean	Squared borders instead of round ones.
`flat`	Boolean	Remove shadow.
`inline`	Boolean	Make it inline. Also set a CSS width to work. Take a look at Grid example on the “More Examples” section.
`color`	String	One color from Quasar Color Palette.
`text-color`	String	Override color of text, one from Quasar Color Palette.
`dark`	Boolean	(v0.17.13+) To be set when the `color` is a dark one.

<!-- An basic example -->
<q-card>
  <q-card-title>
    Card Title
  </q-card-title>
  <q-card-separator />
  <q-card-main>
    Card Content
  </q-card-main>
</q-card>

A more complex example:

<q-card inline style="width: 500px">
  <q-card-media>
    <img src="~assets/donuts.png">
  </q-card-media>
  <q-card-title>
    Cafe Basilico
    <q-rating slot="subtitle" v-model="stars" :max="5" />
    <div slot="right" class="row items-center">
      <q-icon name="place" /> 250 ft
    </div>
  </q-card-title>
  <q-card-main>
    <p>$・Italian, Cafe</p>
    <p class="text-faded">Small plates, salads & sandwiches in an intimate setting.</p>
  </q-card-main>
  <q-card-separator />
  <q-card-actions>
    <q-btn flat round dense icon="event" />
    <q-btn flat label="5:30PM" />
    <q-btn flat label="7:30PM" />
    <q-btn flat label="9:00PM" />
    <q-btn flat color="primary" label="Reserve" />
  </q-card-actions>
</q-card>

Card Title (QCardTitle)

QCardTitle has three main areas (all are optional): title, subtitle (“subtitle” slot) and right side (“right” slot).

Note that you can set title and subtitle as overlay on an image or video through a QCardMedia component too (see QCardMedia section).

<q-card-title>
  <!--
    Optional. Anything that goes here without specifying "slot"
    is considered the main title
  -->
  Title

  <!-- Optional. Adding the subtitle. Notice slot="subtitle" -->
  <span slot="subtitle">Subtitle</span>

  <!--
    Optional. Adding something on the right side,
    like an icon triggering a Popover with a menu.
    Notice the slot="right"
  -->
  <q-icon slot="right" name="more_vert">
    <q-popover>
      <q-list link class="no-border">
        <q-item v-close-overlay>
          <q-item-main label="Remove Card" />
        </q-item>
        <q-item v-close-overlay>
          <q-item-main label="Send Feedback" />
        </q-item>
        <q-item v-close-overlay>
          <q-item-main label="Share" />
        </q-item>
      </q-list>
    </q-popover>
  </q-icon>
</q-card-title>

Card Main Content (QCardMain)

QCardMain defines an area containing the main Card content, like description, details or anything you need outside of the other Card component’s purpose.

<q-card-main>
  Card main content.
</q-card-main>

<q-card-main>
  <p>$・Italian, Cafe</p>
  <p class="text-faded">
    Small plates, salads & sandwiches in an intimate setting.
  </p>
</q-card-main>

Card Actions (QCardActions)

Cards can have some actions (buttons) attached to them.

Vue Property	Type	Description
`vertical`	Boolean	Stack actions vertically
`align`	String	One of ‘start’, ‘center’, ‘end’, ‘around’, ‘between’ which aligns buttons in respect to the actions container

<!-- Horizontal actions -->
<q-card-actions>
  <!--
    Define the buttons to your liking,
    these are just examples
  -->
  <q-btn flat round dense icon="event" />
  <q-btn flat label="5:30PM" />
  <q-btn flat label="7:30PM" />
  <q-btn flat label="9:00PM" />
  <q-btn flat color="primary" label="Reserve" />
</q-card-actions>

<!-- Vertical actions -->
<q-card-actions vertical>
  <q-btn flat label="Action 1" />
  <q-btn flat label="Action 2" />
</q-card-actions>

Card Media (QCardMedia)

Cards can also contain media elements: images, videos (through QVideo) or a parallax (through QParallax). This can be done through QCardMedia component, which supports an optional overlay too (for things like title and/or subtitle).

Vue Property	Type	Description
`overlay-position`	String	One of ‘top’, ‘bottom’ or ‘full’ which sets the position of overlay on top of media element.

<!-- Displaying an image -->
<q-card-media>
  <img src="~assets/some-image.jpg">
</q-card-media>

<!-- Display a video (with help of QVideo component) -->
<q-card-media>
  <q-video src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
</q-card-media>

<!-- Displaying a Parallax (with help of QParallax) -->
<q-card-media>
  <q-parallax :src="'statics/parallax1.jpg'" :height="150">
    <div slot="loading">Loading...</div>
  </q-parallax>
</q-card-media>

Now let’s see how we can add overlays too (through “overlay” slot):

<q-card-media>
  <img src="~assets/mountains.jpg">

  <!-- Notice the slot="overlay" -->
  <q-card-title slot="overlay">
    Title
    <span slot="subtitle">Subtitle</span>
  </q-card-title>
</q-card-media>

<!--
  Overlay at top of media elements.
  Notice overlay-position="top"
-->
<q-card-media overlay-position="top">
  <img src="~assets/mountains.jpg">

  <!-- Notice the slot="overlay" -->
  <q-card-title slot="overlay">
    Title
    <span slot="subtitle">Subtitle</span>
  </q-card-title>
</q-card-media>

<!--
  Overlay on full area of media elements
  Notice overlay-position="full"
-->
<q-card-media overlay-position="full">
  <img src="~assets/mountains.jpg">

  <!-- Notice the slot="overlay" -->
  <q-card-title slot="overlay">
    Title
    <span slot="subtitle">Subtitle</span>
  </q-card-title>
</q-card-media>

Card Inner Separator

You can choose to add a separator between Card components, which is basically a horizontal thin line, by adding QCardSeparator.

Vue Property	Type	Description
`inset`	Boolean	Inset separator

<q-card>
  <q-card-title>
    ...
  </q-card-title>

  <!-- Here is the separator -->
  <q-card-separator />

  <q-card-actions>
    ...
  </q-card-actions>
</q-card>

Some More Examples

Coloring Cards

Use colors from Quasar Color Palette to set a color for your Cards.

<q-card color="primary">
  ...
</q-card>

<q-card color="amber-8" text-color="black">
  ...
</q-card>

Lists on Cards

Place a QList with its QItems at root of your QCard, like this:

<q-card>
  ...
  <q-list>
    <q-item>
      <q-item-side>
        <q-item-tile color="primary" icon="local bar" />
      </q-item-side>
      <q-item-main>
        <q-item-tile label>Bar XYZ</q-item-tile>
        <q-item-tile sublabel>Have a drink.</q-item-tile>
      </q-item-main>
    </q-item>
    <q-item>
      <q-item-side>
        <q-item-tile color="red" icon="local gas station" />
      </q-item-side>
      <q-item-main>
        <q-item-tile label>Gas Station</q-item-tile>
        <q-item-tile sublabel>Fill your gas tank.</q-item-tile>
      </q-item-main>
    </q-item>
    <q-item>
      <q-item-side>
        <q-item-tile color="amber" icon="local movies" />
      </q-item-side>
      <q-item-main>
        <q-item-tile label>Cinema XYZ</q-item-tile>
        <q-item-tile sublabel>Watch a movie.</q-item-tile>
      </q-item-main>
    </q-item>
  </q-list>
  ...
</q-card>

There’s also the possibility to create a nice header for your Cards with an image / avatar, a person name and some quick details. In this example, we skip using QCardList:

<q-card>
  <q-item>
    <q-item-side avatar="/statics/boy-avatar.png" />
    <q-item-main>
      <q-item-tile label>Title</q-item-tile>
      <q-item-tile sublabel>Subhead</q-item-tile>
    </q-item-main>
  </q-item>
</q-card>

Making a Grid of Cards

In order to make a grid of Cards you need to use the inline property of QCard component and set a width for your Cards.

<div>
  <!--
    In this example every card has a "style" tag with a width.
    Consider defining a CSS class instead to ease the template syntax.
  -->
  <q-card inline style="width: 300px">...</q-card>
  <q-card inline style="width: 300px">...</q-card>
  <q-card inline style="width: 300px">...</q-card>
  ...
  <q-card inline style="width: 300px">...</q-card>
</div>

Card with Collapsibles

Since Collapsibles are List items too, it makes sense to use a QList component to encapsulate them. Also, imagine a Card with Collapsibles containing Cards. Inception :)

<q-card>
  <q-card-title>
    Card with Collapsible List
  </q-card-title>

  <q-card-separator />

  <q-list>
    <q-collapsible icon="explore" label="First">
      <div>
        Lorem ipsum dolor sit amet...
      </div>
    </q-collapsible>

    <q-collapsible icon="perm_identity" label="Second">
      <div>
        Lorem ipsum dolor sit amet...
      </div>
    </q-collapsible>

    <q-collapsible icon="shopping_cart" label="Third">
      <div>
        Lorem ipsum dolor sit amet...
      </div>
    </q-collapsible>
  </q-list>
</q-card>

Uploader Collapsible

Docs for

Components

Style & Identity

CSS Helpers

Layout

Buttons

Navigation

Form Components

Grouping

Popups

Progress

Media

Scrolling

Animation

Other Components

Touch/Mouse Actions

Utils

Web API Wrappers

Cards

Installation

Basic Usage

Card Title (QCardTitle)

Card Main Content (QCardMain)

Card Actions (QCardActions)

Card Media (QCardMedia)

Card Inner Separator

Some More Examples

Coloring Cards

Lists on Cards

Making a Grid of Cards

Card with Collapsibles

Docs forv0.17.20v0.16v0.15v0.14v0.13

Components

Style & Identity

CSS Helpers

Layout

Buttons

Navigation

Form Components

Grouping

Popups

Progress

Media

Scrolling

Animation

Other Components

Touch/Mouse Actions

Utils

Web API Wrappers

Cards

Installation

Basic Usage

Card Title (QCardTitle)

Card Main Content (QCardMain)

Card Actions (QCardActions)

Card Media (QCardMedia)

Card Inner Separator

Some More Examples

Coloring Cards

Lists on Cards

Making a Grid of Cards

Card with Collapsibles

Docs for