Skip to content

Platform: Card Component Technical Design

Jump to bottom
kavya-b edited this page May 13, 2020 · 6 revisions

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.

i18n

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.

Clone this wiki locally