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
0:55
Details
Video 1
20:41
Details
Video 2
03:02
Details
Video 3
11:24
Details
Video 4
17:00
Details
Video 5
16:26
Details

videoCard2 with language

Video 0
Secondary Info
0:55
English
Transcribe
Video 1
Secondary Info
20:41
French
Transcribe
Video 2
Secondary Info
03:02
Spanish
Transcribe
Video 3
Secondary Info
11:24
American Sign Language
Transcribe
Video 4
Secondary Info
17:00
Japanese
Transcribe
Video 5
Secondary Info
16:26
Brazillian Portuguese
Transcribe

videoCard2 with extra options

Video 0
Secondary Info
Tertiary Info
0:55
English
Transcribe
Video 1
Secondary Info
Tertiary Info
20:41
French
Transcribe
Video 2
Secondary Info
Tertiary Info
03:02
Spanish
Transcribe
Video 3
Secondary Info
Tertiary Info
11:24
American Sign Language
Transcribe
Video 4
Secondary Info
Tertiary Info
17:00
Japanese
Transcribe
Video 5
Secondary Info
Tertiary Info
16:26
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