Intro

Card

Cards are surfaces that display content and actions. They should be easy to read. Elements such as, text and images, should be placed on them in a way that has good hierarchy.

Do’s

  • On desktop, card content can expand and scroll within the card
  • When tabbing through the cards the area is focused before moving to the next card
  • The card container is the only required element in the card, all other actions are optional
  • Buttons or anything actionable is placed at the bottom
  • Expand card to reveal information
  • More than two buttons goes in an overflow menu at the bottom

Don’ts

  • mobile, card content can’t scroll but it can expand
  • Don’t overload cards with extraneous information or actions
  • If using dividers don’t have them run the full length of the card
  • Don’t flip card to reveal information
  • Don’t put more than two buttons on the card

Base

Base Card

Empty, no extra styles - .linq-card-base

The base card class has no padding. Child elements inside the card are padded. The base card is just the outline, box-shadow and background color.

The base card class should used when the layout only requires the proper outline, box-shadow and border.
Use .linq-card the majority of the time.

Header

Card Header

.linq-card__header

The card header consist of styles which align button actions with the main title. The card header does not have rounded corners, the parent card handles the rounded corners.

Class List
  • .linq-card__card-header - background colors and padding
  • .card-header - layout control
  • .card-header__primary-actions - alignment for actions next to title
  • .card-header__secondary-actions - alignment for actions not next to title

Example of a card header

Card Header with primary and secondary actions

Example of a card header

Card Header inside a Card

H3 Title Example

H4 Title Example

Profile

Profile Card

Multiple Selectors
.linq-card or .mat-card

The profile card calls out key information about a user and showcases the user's image. In the example below the profile card does not have any more styles.

Jane Doe

ID #88888810
LINQ High School
M - F 7:00AM - 8:00PM
account_circle

Profile Card with More Info

The example below has extra information, but the extra information styles are not part of the profile card styles. The extra information is using key/value classes, not profile card specific class names.

Kitty McCatterson

ID #34548810
Failed Obedience Training
S - M 3:00AM - 6:00AM
Key
Value

Profile Card Full Design

Nicolas Cage

ID #496382856
Beverly Hills High School
F - S 5:00PM - 1:00AM
Meal Balance (as of December 10)
$88.07
Fees Due (as of December 10th)
$50.00
Bus Pick Up
Main St / Wilson Blvd 6:35AM
Bus Drop Off
171 Main Street 5:05AM
not_interested Food Allergies: None
medical_services Bee Sting Requires EpiPen

Profile Cards in Grid

By design Cards, like (almost) all components, do not have a set width. The width must be set by the parent container

Kitty McCatterson

ID #34548810
Failed Obedience Training
S - M 3:00AM - 6:00AM
Key
Value

Primary

Primary Card
AKA Heading Card

The heading card contains details about the heading, this could be details about their position. This card contains details about a grouped subject. This will be used when you can’t edit the fields right on that same page with the slide out panel.

Primary Card and Card Header

H4 Title Example

Details

Card Details

A Card can contain many different types of data. Building out multiple classes to handle all the use cases is not maintainable. A better solution is to build a few utility classes for spacing, colors and layout.

Card Spacing Example

Welcome to a card which only contains text. The spacing is rendered using the class .linq-card__space. The space class is a utility to provide common spacing for any details inside of the card body.

Card Key Value List

The example below is rendered using .linq-key-value-list. The key value list class has nothing to do with the card and can be used anywhere. The list uses flexbox and will display overflow items under each other to support multiple viewport sizes.

Card Spacing Example

Key One
Value One
Key Two
Value Two
Key Three
Value Three
Key with long verbiage which might overflow
Short Value
Short Key
Value with long verbiage which might overflow
Key with long verbiage which might overflow
Value with long verbiage which might overflow

Card with Actions

Card actions is a utility class which creates space and aligns buttons. A div element is required to align the button actions. A single div will align all items on the right. Two div elements will align the first items on the left and the second elements on the right.

I take action!

A card using the .linq-card__actions class.

Multiple types of actions

A card using the .linq-card__actions class and two div child elements.