Amara styleguide

Video cards

Used to display videos in a grid. Also used to display related objects like subtitles, requests, etc. Video cards consist of several components:

  • Thumbnail: The main area. Clicking on this should show extra details for the object (if there are extra relevant details).
  • CTA (optional): Appears below the thumbnail. Clicking on this should invoke the main action for the object
  • CTA-extra (optional): Appears to the right of the CTA. Clicking on this should show a context menu with additional actions.

videoCard2

Video 0
06:03
Details
Video 1
15:44
Details
Video 2
25:44
Details
Video 3
27:30
Details
Video 4
09:37
Details
Video 5
03:56
Details

videoCard2 with language

Video 0
Secondary Info
06:03
English
Transcribe
Video 1
Secondary Info
15:44
French
Transcribe
Video 2
Secondary Info
25:44
Spanish
Transcribe
Video 3
Secondary Info
27:30
American Sign Language
Transcribe
Video 4
Secondary Info
09:37
Japanese
Transcribe
Video 5
Secondary Info
03:56
Brazillian Portuguese
Transcribe

videoCard2 with extra options

Video 0
Secondary Info
Tertiary Info
06:03
English
Transcribe
Video 1
Secondary Info
Tertiary Info
15:44
French
Transcribe
Video 2
Secondary Info
Tertiary Info
25:44
Spanish
Transcribe
Video 3
Secondary Info
Tertiary Info
27:30
American Sign Language
Transcribe
Video 4
Secondary Info
Tertiary Info
09:37
Japanese
Transcribe
Video 5
Secondary Info
Tertiary Info
03:56
Brazillian Portuguese
Transcribe

videoCard (deprecated)

2 min
Placeholder Image

Video Title

Video Subheading

Portuguese, Brazilian to English

Review Due in 2 days Decline

videoCardSimple (deprecated)

Placeholder Image

The Future Of News? Virtual Reality

Carl Safina

 +2 Videos