Vistaprint

Card

Cards provide a strong visual cue of content relationships. They are simple containers into which you can put any content.

Playground

Sample Card Container. Note that a card has some padding by default. Note also that its default background color is white.
Sample Card Container with longer content. Note that a card container will expand to cover its contents, but by default it won't match the heights of any other cards on the same grid row.
Share
Share
jsx
<div class="card-container">
  Sample Card Container. Note that a card has some padding by default. Note also
  that its default background color is white.
</div>
some content goes here
Share
Share
jsx
<div class="card-container">some content goes here</div>

Bordered

The "bordered" option puts a visible border on the card.

some content goes here
Share
Share
jsx
<div class="card-container card-container-bordered">some content goes here</div>

Full Bleed

The "full bleed" option removes the padding from the Card.

This Card Container above has the "full bleed" option. With this option, the Container has no internal padding, so the image runs right up to the edges of the Card Container.
some content goes here
Share
Share
jsx
<div class="card-container card-container-full-bleed">
  some content goes here
</div>

Even Height

By default, a Card will only be as tall as its contents. If you want all the Cards on the same Grid row to have the same visible height, add the "even height" option to the cards. This will also put some vertical spacing below each card, so that there is a gap between rows of cards.

This card is really tall because it has more content than the other cards. This additional content causes the Card's height to grow, which causes the Column's height to grow, which causes the Row's height to grow!
This card is using the evenHeight option which ensures that its height matches the tallest Column in the Row.
This card is not using the evenHeight option, so its height is not affected by the other Columns in the Row at all.
Share
Share
jsx
some content goes here
Share
Share
jsx
<div class="card-container card-container-even-height">
  some content goes here
</div>

Dividers

You can add a Grid with the "card dividers" option inside a Card to create an internal set of vertical dividing lines between grid elements.

Note: the dividers don't add any internal spacing. Use the spacing system if you need to add spacing between the dividing lines and the content.

Section 1
Section 2
Section 3
Share
Share
jsx

Or using the "full bleed" option on the Card to make the dividers touch the top and bottom of the Card:

Section 1
Section 2
Section 3
Share
Share
jsx
<div class="card-container card-container-bordered">
  <div class="grid-container card-dividers">
    <div class="row">
      <div class="col-4">Section 1</div>
      <div class="col-4">Section 2</div>
      <div class="col-4">Section 3</div>
    </div>
  </div>
</div>

Cards as links

A Card does not have to be a <div> tag, but can be an <a> tag instead if the entire Card represents a link:

This Card is a link.

Cards as radio buttons

A set of Cards can act as radio buttons if they are selectable and represent a set of mutually exclusive choices.

Share
Share
jsx
jsx
/*
 This feature currently does not have any explicit React support, but you can 
 give each Card the prop
     component="label"


 Then put the CSS class 
     card-container-radio
 onto the radio button that is associated with that <label>.
*/
<div
  class="row"
  role="radiogroup"
  aria-labelledby="myExampleCardSetRadioButtonsTitle"
>
  <div class="col-4">
    <input
      type="radio"
      name="card-container-radio"
      value="1"
      id="myExampleCardContainerRadio1"
      class="card-container-radio"
    />
    <label class="card-container" for="myExampleCardContainerRadio1">
      Card as radio button 1
    </label>
  </div>


  <div class="col-4">
    <input
      type="radio"
      name="card-container-radio"
      value="2"
      id="myExampleCardContainerRadio2"
      class="card-container-radio"
    />
    <label class="card-container" for="myExampleCardContainerRadio2">
      Card as radio button 2
    </label>
  </div>


  <div class="col-4">
    <input
      type="radio"
      name="card-container-radio"
      value="3"
      id="myExampleCardContainerRadio3"
      class="card-container-radio"
    />
    <label class="card-container" for="myExampleCardContainerRadio3">
      Card as radio button 3
    </label>
  </div>
</div>

Components

Card

PropTypeDefaultDescription
fullBleedbooleanfalse

Whether or not the content should expand to the edges of the Card

borderedbooleanfalse

Whether or not the card should have a border

evenHeightbooleanfalse

Whether or not this Card should stretch its height to fill its parent GridContainer Row

This is useful if you have a Row of Cards and you want them to all be the same height

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)

Guidelines

Designer Guidelines

  • Cards can be used when visual separation is needed with the page structure.

  • Cards can be used to group items related to a product, such as an image product, name, and actions related to that product.

  • Cards can also be used to collect related groups of interactive items, such as paper thickness and paper stock selections.

  • Cards should not be used to frame an entire page section, but rather to frame groups within a given page section.

  • Cards are just that — containers. They are flexible enough to handle a wide array of layouts.

  • For maximum contrast, consider using cards on a tinted background.

Developer Guidelines

  • We recommend not combining a Card Container with another Visage component, as you may get unexpected layout and/or behavior. Ideally, treat it simply as a container into which you put other components. In particular, don't combine a Card Container with a grid element.

Accessibility Guidelines

  • If the cards are acting as radio buttons:

    • The row element around the cards element must have a role="radiogroup" attribute.

    • The row element must have an aria-labelledby an attribute whose value is the id of the element that acts as a title for the set of cards (typically, a heading right above that set.) If the set of cards does not have a visible title, then instead it needs an aria-label attribute whose value is a descriptive title of the set; this text must be localized, as some browsers will read it to the user.