Card Specification - IgniteUI/igniteui-webcomponents GitHub Wiki

igc-card is a container/block which displays a grouped information in a concise and visually aesthetic way.

Provide means for the developers to implement a simple common case, yet customizable cards with minimal efforts. Cards display content composed of different elements whose size or supported actions vary.

1. As a developer, I want to add a card component to my application, so that I can present more details in a wrapper container consisting of header, content, media and footer.
2. As a developer, I want to be able to add one, two or three lines of text in a card.
3. As a developer, I want to able to other add elements to the cards like:
   • Toggle
   • Checkbox
   • Inputs
   • Icons
   • Avatar
   • Badge
   • Media
   • Buttons
4. As a developer, I want to be able to add left and right align any additional element I add, so that I can order them easily.
5. As a developer, I want to be able to add different containers in my card, so that I can easily control the order and orientation of card items.

As an end user, I want to have cards in my application, so that I could be presented with more details for a topic in a grouped, concise and visually aesthetic way.

1. The developer can create cards consisting of header, content, media and actions footer, and can order these components/items randomly
2. The developer can add one, two or three lines of text.
3. The developer can control the orientation and order of the card items
4. The card component has all ARIA tags that apply.

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length

<igc-card>
    <igc-card-header>
          <igc-avatar slot="thumbnail"></igc-avatar>
          <h3 slot=”title”>Elon Musk</h3>
          <h5 slot=”subtitle”>SpaceX </h5>
    </igc-card-header>
    <igc-card-media >
        <img width="100%" src="http://localhost/images/elon-musk-image.jpg">
    </igc-card-media>
    <igc-card-content>
        <p>South African entrepreneur Elon Musk is known for founding Tesla Motors and SpaceX, which launched a landmark commercial spacecraft in 2012.</p>
    </igc-card-content>
    <igc-card-actions>
        <button (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
        <button (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
    </igc-card-actions>
</igc-card>

The end user interface consists of:

1. Header (slots: thumbnail, title, subtitle and default)
2. Media
3. Content
4. Actions (slots: buttons, default and icons)

The card layout:

• Comprises multiple data types, such as images, movies, text
• Supports content of highly variable length, such as comments
• Contains interactive content, such as +1 buttons or comments

• Roles:
• card -> role="group". https://www.w3.org/TR/wai-aria-1.1/#group
• card header -> role="header"
• card media -> role="img"