Platform: Card Component Technical Design

Card

Summary

A Card is a container which consists of a Header and Content Area. There are several different types of Card defined in the Fiori 3 specs:

• Analytic Card
• Calendar Card
• List Card
• Object Card
• Table Card
• Timeline Card
• Component Card

However all of the cards (with the exception of the Analytic Card) have the same structure for the Header and Content Area. This design specification will focus on the general Card anatomy, the other cards can be created by customizing the content area of the Card.

Example

<fdp-card [headerPosition]="top">
  <fdp-card-header
    [title]="Card Title"
    [subtitle]="Card Subtitle">
    <fdp-card-counter>3 of 6</fdp-card-counter>
  </fdp-card-header>
  <fdp-card-body>
    <p>Card body goes here!</p>
  </fdp-card-body> 
</fdp-card>

Card

Property Bindings

headerPosition: 'top' | 'bottom'

Sets position of header content on 'top' of the card or at the 'bottom'.

Projected Content

fdp-card-header

Header content of the card.

fdp-card-body

Body content of the card.

CardHeader

Property Bindings

title: string

Title of the card.

subtitle: string

Subtitle of the card.

Projected Content

fdp-card-counter

Content for card counter.

#####Questions:

@From Sushma to Manju: Fiori 3 Design Guidelines lists Stack and Quick view cards on a page. Could you please confirm on this.