UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page

Was this helpful?

  1. Components

Card

PreviousButtonNextCheckbox

Last updated 4 years ago

Was this helpful?

A card container is an element designed to be interactive. A tile should be easy to scan for relevant and actionable information. Elements, like text and buttons, should be placed inside them in a way that clearly indicates hierarchy. Card layouts can vary to support the types of content they contain.

The card containers have different states and styles and can be selectable or clickable.

Simple Card

  • Enabled background colour White, with shadow

  • Hover background colour White, and bottom border colour; Blue D30

  • Focus border is Purple L50

  • Selected background colour White, and bottom border colour; Blue Base

  • Disabled background colour White, and bottom border colour; Grey L40

  • Dashed border colour; Grey Base (2px dash, 3px Gap)

  • Danger background colour White, and bottom border colour; Red Base

  • Danger focussed border; Red L70