Card Styles and Usage
Cards are a great pattern for grouping like content into a visual container. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. They should remain identifiable as a single contained unit. They cannot merge with another card. Nor can they be broken up into multiple cards. They can, however, be surrounded by supportive content. Or they can stand alone, not relying on any surrounding content.
Cards are molecular components that can be employed inside larger organisms (see our List Widgets and Product Cards, for examples). They also can be used on their own to compartmentalize content of a particular focus.
The foundation of a card consists of a container bordering a title element above some supportive content. Supporting content can contain text, links, calls to actions etc.
| Background Color | Border Radius | Border Style |
|---|---|---|
Background ColorWhite (#ffffff) |
Border Radius6px |
Border Style1px solid rgba(0, 0, 0, 0.05) |
Beeline Manager is great way to manage all of your contingent workforce needs from your mobile device.
Clickable cards must have a blue primary text block to indicate to the user that they are clickable. They also must be raised and have a hover state.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Clickable cards must have a blue primary text block to indicate to the user that they are clickable. They also must be raised and have a hover state.
We like our content to have adequate space to increase clarity. For cards, we have a default padding of 20px. However, there are times when space is not a priority and we need to reduce the padding of the cards to better fit the amount of content inside the card. There are also times when we may want to increase the padding to provide better clarity. For these reasons, we support the following card padding sizes.
| Size | Padding |
|---|---|
SizeLarge |
Padding30px |
SizeDefault |
Padding20px |
SizeSmall |
Padding10px |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
To raise and lower cards we add or remove the box shadow property. Flat cards are de-emphasized and often used to support existing content. Elevating a card can give the impression of importance and draw the user's focus. For this reason, we always raise clickable cards. However, sometimes we elevate a card to increase it's visual hierarchy on the page. It is up to the designer of the view to decide the best way to use elevations.
| Elevation | Box Shadow |
|---|---|
ElevationFlat |
Box Shadownone |
ElevationElevated |
Box Shadow0px 0px 10px rgba(0, 0, 0, 0.1) |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Any card can be made clickable. However, we need to signal to the user that the card is in fact clickable before they hover over it. To do this, we add a blue primary text block to the content. We also elevate the card to raise its prominence against the other items in the view. Flat cards cannot be clickable.