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
10:41
Details
Video 1
09:51
Details
Video 2
18:21
Details
Video 3
06:31
Details
Video 4
09:38
Details
Video 5
23:18
Details

videoCard2 with language

Video 0
Secondary Info
10:41
English
Transcribe
Video 1
Secondary Info
09:51
French
Transcribe
Video 2
Secondary Info
18:21
Spanish
Transcribe
Video 3
Secondary Info
06:31
American Sign Language
Transcribe
Video 4
Secondary Info
09:38
Japanese
Transcribe
Video 5
Secondary Info
23:18
Brazillian Portuguese
Transcribe

videoCard2 with extra options

Video 0
Secondary Info
Tertiary Info
10:41
English
Transcribe
Video 1
Secondary Info
Tertiary Info
09:51
French
Transcribe
Video 2
Secondary Info
Tertiary Info
18:21
Spanish
Transcribe
Video 3
Secondary Info
Tertiary Info
06:31
American Sign Language
Transcribe
Video 4
Secondary Info
Tertiary Info
09:38
Japanese
Transcribe
Video 5
Secondary Info
Tertiary Info
23:18
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