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.

<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>

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

Header content of the card.

Body content of the card.

Title of the card.

Subtitle of the card.

Content for card counter.

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-card-header's title and subtitle attributes can be supported with string binding
• fdp-card-counter's content can be supported with normal i18n marker.

<fdp-card-header
    i18n-title="@@title"
    [title]="Card Title"
    i18n-subtitle="@@subtitle"
    subtitle="Card Subtitle">
    <fdp-card-counter i18n="@@counterMsg">3 of 6</fdp-card-counter>
</fdp-card-header>

• fdp-card-body can be supported with normal i18n markers in its content tags.

<fdp-card-body>
    <p i18n="@@content">Card body goes here!</p>
</fdp-card-body> 

Redesign Required: No

#####Questions:

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

@Manju: Quick view card is basically an object card(single object). This has actions at the footer of the card. And stack card is basically collection of object quick view cards. So, the design should have provision to accommodate these types of cards. We need to have footer section in the card that could enable app developer to host actions.