Skip to content

Card Specification

Jump to bottom
Anastas Staev edited this page Aug 18, 2021 · 3 revisions

Overview

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

Objectives

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.

User Stories

Developer

  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.

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

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

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

ARIA support

Clone this wiki locally