Cards are used to display content and related actions about a specific subject or topic. They can include text and images, buttons, links, data visualization, and media. The content should be placed hierarchically, allowing the user to easily digest the information, and locate the available action items.
height: 198px;
width: 465px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Cards containing images and document previews
height: 266px;
width: 264px;
border-radius: 4;
border: 2px #000000;
background: #000000;
opacity: 1;
color: ;
height: 336px;
width: 354px;
border-radius: 4;
border: 2px #000000;
background: #000000;
opacity: 1;
color: ;
Cards with action items using raised and flat buttons.
height: 198px;
width: 393px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 416px;
width: 393px;
border-radius: 4;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
Card States
Cards will usually have a Level-1 shadow on their default state. While hovering on the card, the shadow will grow to Level-2, and in a disabled state, there will be no shadow. For more information about shadows, please refer to our Tokens & Styles section.
height: 318px;
width: 264px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 318px;
width: 264px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 336px;
width: 264px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 336px;
width: 264px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 336px;
width: 264px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
height: 336px;
width: 264px;
border-radius: ;
border: 1px #000000;
background: #000000;
opacity: 1;
color: #000000;
