Cards

Still work in progress.

Cards combine imagery, a short description, and a link or call-to-action.

I've avoided styling the content of the card. I'd prefer card content to be driven by standard building blocks, like the rest of the DS. We could provide utility classes to size things like card headings. This would be much more flexible and encourage emergent use.

Cards themselves have no explicit size. They flow into their container. This makes them useful in many different scenarios.

Simple card

Here's a basic card, all alone.

My first card

Nothing fancy yet!

Button

<ca-card>
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
  <article>
    <h3><a href="#">My first card</a></h3>
    <p>Nothing fancy yet!</p>
    <a href="#" class="ca-button ca-button-magenta">Button</a>
  </article>
</ca-card>

A card consists of two possible elements.

An image, such as an img or svg element.
A content section. This can be article, div, or section, depending upon desired semantics.

Card sizing

Cards have no explicit size themselves. By default, they expand to their container.

To size a single card, just add a max-width.

My first card, constrained

The max-width limits the size of the card.

<ca-card style="max-width: 31rem">
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
  <article>
    <h3><a href="#">My first card, constrained</a></h3>
    <p>The <code>max-width</code> limits the size of the card.</p>
  </article>
</ca-card>

With grid

In many real-world use cases, we will be displaying many cards together, in list-like structures.

One way to do this is with our own ca-mesh component.

Grid card 1

Resize the window to see how the cards respond to changes in the grid.

Grid card 2

Note the size="medium" attributes. This helps lock the images into consistent size across all cards.

Grid card 3

It's all aligned.

<ca-mesh>
  <ca-card size="medium">
    <img
      src="https://live.staticflickr.com/5707/30956223351_b42f440856_o_d.jpg"
      alt="Half dome"
    />
    <div>
      <h3><a href="#">Grid card 1</a></h3>
      <p>
        Resize the window to see how the cards respond to changes in the grid.
      </p>
    </div>
  </ca-card>
  <ca-card size="medium">
    <img
      src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
      alt="California poppy flower"
    />
    <article>
      <h3><a href="#">Grid card 2</a></h3>
      <p>
        Note the <code>size="medium"</code> attributes. This helps lock the
        images into consistent size across all cards.
      </p>
    </article>
  </ca-card>
  <ca-card size="medium">
    <img
      src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
      alt="Brown bear"
    />
    <div>
      <h3><a href="#">Grid card 3</a></h3>
      <p>It's all aligned.</p>
    </div>
  </ca-card>
</ca-mesh>

A card is nearly always displayed with friends, in a grid-like structure. We usually want every card to be the same size, nicely aligned.

Below, we use the ca-mesh component's sizing capabilities to change the flow of all cards together.

<!-- The --cell-width variable is a function of the ca-mesh component. -->
<ca-mesh style="--cell-width: 15rem">
  <ca-card>
    <img
      src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
      alt="Brown bear"
    />
    <div>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </div>
  </ca-card>
  <ca-card>
    <img
      src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
      alt="Brown bear"
    />
    <article>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </article>
  </ca-card>
  <ca-card>
    <img
      src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
      alt="Brown bear"
    />
    <article>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </article>
  </ca-card>
  <ca-card>
    <img
      src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
      alt="Brown bear"
    />
    <article>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </article>
  </ca-card>
  <ca-card>
    <img
      src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
      alt="Brown bear"
    />
    <article>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </article>
  </ca-card>
</ca-mesh>

With lists

Many scenarios call for cards to be displayed within a semantic ul or ol list. No problem.

Card heading

Lorem ipsum dolor sit amet, consectetur
Card heading

Lorem ipsum dolor sit amet, consectetur
Card heading

Lorem ipsum dolor sit amet, consectetur

<ca-mesh>
  <ul class="meshify">
    <li>
      <ca-card size="medium">
        <img
          src="https://live.staticflickr.com/5609/15596534729_9c240ff83a_b.jpg"
          alt="Brown bear"
        />
        <article>
          <h3><a href="#">Card heading</a></h3>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </article>
      </ca-card>
    </li>
    <li>
      <ca-card size="medium">
        <img
          src="https://live.staticflickr.com/5707/30956223351_b42f440856_o_d.jpg"
          alt="Half dome"
        />
        <article>
          <h3><a href="#">Card heading</a></h3>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </article>
      </ca-card>
    </li>
    <li>
      <ca-card size="medium">
        <img
          src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
          alt="California poppy flower"
        />
        <article>
          <h3><a href="#">Card heading</a></h3>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </article>
      </ca-card>
    </li>
  </ul>
</ca-mesh>
<!-- Note our use of the grid class here. -->

Image fit

Images will automatically fit the card with an object-fit of cover. This can be altered by applying a utility class to the image.

Using fit

Let's stretch out this image with the fit-fill class. Why not?

<ca-card>
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
    class="fit-fill"
  />
  <article>
    <h3><a href="#">Using fit</a></h3>
    <p>
      Let's stretch out this image with the <code>fit-fill</code> class. Why
      not?
    </p>
  </article>
</ca-card>

Here's a list of available utility classes.

Class	Effect
`fit-cover`	Default. Instructs the image to fill all available space, without breaking aspect ratio. Some content may be hidden along the edges.
`fit-contain`	Instructs the image to expand, but without breaking aspect ratio or hiding anything. This may result in some margin around the image.
`fit-fill`	Instructs the image to fill all available space by stretching itself, breaking aspect ratio.

Image padding

Padding can be added around the image if desired. Use utility classes.

Using padding

Add CSS or utility classes to alter the padding.

<ca-card class="padding-2">
  <img
    class="rounded"
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
  <article class="padding-y-start-3 padding-y-end-0 padding-x-1">
    <h3><a href="#">Using padding</a></h3>
    <p>Add CSS or utility classes to alter the padding.</p>
  </article>
</ca-card>

The card is a base. It's flexible. Add your own CSS or utility classes to make it yours.

With interactive effects

The interactive attribute can set visual hover effects on the card.

By default, this will raise the whole card when a link or button is hovered.

Interactive hover on the links

When hovering a link, the whole card will rise.

<ca-card interactive="">
  <img
    src="https://live.staticflickr.com/5707/30956223351_b42f440856_o_d.jpg"
    alt="Half dome"
  />
  <div>
    <h3><a href="#">Interactive hover on the links</a></h3>
    <p>When hovering a link, the whole card will rise.</p>
  </div>
</ca-card>

With interactive="full", we can make the whole card clickable.

Fully clickable card

Through the magic of CSS, the whole card is now clickable.

<ca-card interactive="full">
  <img
    src="https://live.staticflickr.com/5707/30956223351_b42f440856_o_d.jpg"
    alt="Half dome"
  />
  <div>
    <h3><a href="#">Fully clickable card</a></h3>
    <p>Through the magic of CSS, the whole card is now clickable.</p>
  </div>
</ca-card>

With shadow

The shadow attribute adds depth.

The shadow card

Catch some shade.

<ca-card shadow="">
  <img
    src="https://live.staticflickr.com/5707/30956223351_b42f440856_o_d.jpg"
    alt="Half dome"
  />
  <div>
    <h3><a href="#">The shadow card</a></h3>
    <p>Catch some shade.</p>
  </div>
</ca-card>

It's even better when used alongside interactive.

The interactive shadow card

Catch some (raised) shade.

<ca-card interactive="full" shadow="">
  <img
    src="https://live.staticflickr.com/5707/30956223351_b42f440856_o_d.jpg"
    alt="Half dome"
  />
  <div>
    <h3><a href="#">The interactive shadow card</a></h3>
    <p>Catch some (raised) shade.</p>
  </div>
</ca-card>

Without images

Images are optional in our cards.

<ca-mesh>
  <ca-card>
    <div>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </div>
  </ca-card>
  <ca-card>
    <div>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </div>
  </ca-card>
  <ca-card>
    <!-- But the content container will still work too. Here we use article. -->
    <article>
      <h3><a href="#">Card heading</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur</p>
    </article>
  </ca-card>
</ca-mesh>

In horizontal orientation

Cards can be tipped over, placing images on the side instead.

Use the flow="horizontal" attribute.

Using direction

The flow="horizontal" attribute puts the image on the side.

<ca-card flow="horizontal" size="small">
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
  <article>
    <h3><a href="#">Using direction</a></h3>
    <p>
      The <code>flow="horizontal"</code> attribute puts the image on the side.
    </p>
  </article>
</ca-card>

To change the direction of the responsive flip on mobile, use flow="horizontal-reverse".

Flipping direction

flow="horizontal-reverse" flips vertical orientation on mobile.

<ca-card flow="horizontal-reverse" size="small">
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
  <article>
    <h3><a href="#">Flipping direction</a></h3>
    <p>
      <code>flow="horizontal-reverse"</code> flips vertical orientation on
      mobile.
    </p>
  </article>
</ca-card>

Flip image position

To put the image at the end of the card, just switch the position of the image element.

Flipping position

By changing the position of the img element, we we can put the image at bottom of the card.

<ca-card size="medium">
  <article>
    <h3><a href="#">Flipping position</a></h3>
    <p>
      By changing the position of the <code>img</code> element, we we can put
      the image at bottom of the card.
    </p>
  </article>
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
</ca-card>

Works with horizontal cards too.

Flipping position, horizontal

We can put the image on the right in horizontal cards too.

<ca-card flow="horizontal" size="small">
  <article>
    <h3><a href="#">Flipping position, horizontal</a></h3>
    <p>We can put the image on the right in horizontal cards too.</p>
  </article>
  <img
    src="https://live.staticflickr.com/8628/16622486169_087756b818_b.jpg"
    alt="California poppy flower"
  />
</ca-card>