You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
d-georgiev-91 edited this page Feb 7, 2017
·
2 revisions
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
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.
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.
As a citizen developer, I want to be able to add one, two or three lines of text in a card.
As a citizen developer, I want to able to other add elements to the cards like:
Toggle
Checkbox
Inputs
Icons
Avatar
Badge
Media
Buttons
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
The developer can create cards consisting of header, content, media and actions footer.
The citizen developer can add one, two or three lines of text.
The citizen developer can customize the cards adding other JS Blocks components/directives:
The citizen developer can left and right align the elements.
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-avatarsrc="https://localhost/images/elon-musk-avatar.jpg" roundShape="true"><h3>Elon Musk</h3></igx-avatar></igx-card-header><imgwidth="100%" src="https://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><buttonigxButton(click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button><buttonigxButton(click)="openUrl('https://twitter.com/elonmusk')">Share</button></igx-card-actions></igx-card>
User Interface
The end user interface consists of:
Header
Media
Content
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