Cards

Recently added to the Design System

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;

Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates