Card Specification

Overview

igx-card is a sheet of material that serves as an entry point to more detailed information. The component is part of the JS Blocks native Angular controls and is used to wrap and visualize content or media.

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 have the card container in a list, grid or standalone, so that I can design and organize my application in the best possible way.
3. As a citizen developer, I want to be able to add one, two or three lines of text in a card.
4. As a citizen developer, I want to able to other add elements to the cards like:
   • Toggle
   • Checkbox
   • Inputs
   • Icons
   • Avatar
   • Badge
   • Media
   • Buttons
5. 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.

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 and visually aesthetic way.

Acceptance criteria

1. The developer can create cards consisting of header, content, media and actions footer.
2. The citizen developer can add one, two or three lines of text.
3. The citizen developer can customize the cards adding other JS Blocks components/directives:
4. The citizen developer can left and right align the elements.
5. 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

<igx-card>
    <igx-card-header>
        <igx-avatar src="http://localhost/images/elon-musk-avatar.jpg" roundShape="true">
            <h3>Elon Musk</h3>
        </igx-avatar>
    </igx-card-header>

    <img width="100%" src="http://localhost/images/elon-musk-image.jpg">

    <igx-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>
    </igx-card-content>

    <igx-card-actions>
        <button igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
        <button igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
    </igx-card-actions>
</igx-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/roles#group