Our Corporate Vision
Cards are designed to act like a gateway or portal to detailed content around a singular topic. The physical analog for a card is the “trading card” – which usually features an image and/or statistics related to a single subject. Cards make use of outlines or surface boundaries to act as self-contained UI regions that can exist alone or in a group. Cards provide a lot of flexibility when used in UI layouts. If cards don’t contain any buttons, the entire card may act as a click-point, allowing the user to navigate to a dedicated page on the card topic.
Cards should be used when a user needs a quick, high-level summary of a subject to make a decision about UI interaction. The content of cards should be kept to a minimum, as cards can quickly become overloaded with content due to their flexible nature. If the gestalt principle of “common region” is required to delineate UI content, the “persistent container” layout should be used instead of a card. A persistent container is not a component, but a type of styled primitive with a self-contained layout.
|title||title of the card||``|
|subtitle||optional subtitle appears after the optional image||``|
|href||converts card into an html anchor tag; cannot be used with ||``|
image- use to insert an image
actions- use to insert optional button(s)
default- use to display card content
feather-card- the main card element