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

videoCard2 with language

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

videoCard2 with extra options

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

videoCard (deprecated)

2 min
Placeholder Image

Video Title

Video Subheading

Portuguese, Brazilian to English

Review Due in 2 days Decline

videoCardSimple (deprecated)