Quasar 
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 --> |
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 --> |
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 --> |
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> |
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>