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

videoCard2 with language

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

videoCard2 with extra options

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

videoCard (deprecated)

2 min
Placeholder Image

Video Title

Video Subheading

Portuguese, Brazilian to English

Review Due in 2 days Decline

videoCardSimple (deprecated)