1.2.1 #Components - Cards - Basic Basic Card

Toggle example guides Toggle HTML markup

Card components are blocks by default. We don't suggest using them as inlines or inline-blocks. Normally you would just wrap cards in card stack or get them in layouts so they won't get too wide. In some cases you want to wrap cards directly in containers: Fine, but don't do it every where, since cards can be too wide for desktop users. In the following example page, we explictly get a max width for demostration purpose.

Cards can't be too narrow too; Because we have great padding around cards, if you get 4 or more columns in a container, the whole page may looks too messy, and lines in each column will be too short for a comfortable reading experience.

Of course titles are accepted in cards and you will use them frequently. We also get head images for cards, and even pure image cards. Go ahead and make your app vivid.

We have patched cards for being used in links; Feel free to use them as clickable items, but don't use them as buttons. For example, you can use linked cards as article items in a list page of blog, but don't use a card titled "Click Here" as an action button. Card always contains some actual data, instead of pure commands / verbs.

Example

Basic Card Component

俱往矣,数风流人物,还看今朝。

Titled Card

Of course, cards can have a proper title.

Photo from Unsplash

Card with image

Card can comes with images. Make sure you have proper class set.

Photo from Unsplash
Markup: components/card/card.html
<div class="hola-card-stack" style="max-width: 300px">
  <div class="hola-card">
    <p>Basic Card Component</p>
    <p>俱往矣,数风流人物,还看今朝。</p>
  </div>
  <div class="hola-card">
    <h2 class="hola-card-title">Titled Card</h2>
    <p>Of course, cards can have a proper title.</p>
  </div>
  <div class="hola-card hola-card-with-image">
    <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
    <h2 class="hola-card-title">Card with image</h2>
    <p>Card can comes with images. Make sure you have proper class set.</p>
  </div>
  <div class="hola-card hola-card-full-image">
    <img src="https://source.unsplash.com/featured/?sky" alt="Photo from Unsplash" class="hola-image">
  </div>
</div>
Source: components/card/card.css, line 1