Card Specification

Overview

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

Objectives

Provide means for the citizen 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.

User Stories

Developer

1. As a citizen 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 citizen developer, I want to be able to add one, two or three lines of text in a card.
3. As a citizen developer, I want to able to other add elements to the cards like:
   • Toggle
   • Checkbox
   • Inputs
   • Icons
   • Avatar
   • Badge
   • Media
   • Buttons
4. As a citizen 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 citizen 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.

End user

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.

Acceptance criteria

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

Functionality

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

A card example:

End User Experience

Developer Experience

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

User Interface

The end user interface consists of:

1. Header
2. Media
3. Content
4. Actions

The card layout:

• As a collection, comprises multiple data types, such as images, movies, and text
• Supports content of highly variable length, such as comments
• Contains interactive content, such as +1 buttons or comments

ARIA support

• Roles:
• role="group". https://www.w3.org/TR/wai-aria-1.1/#group