Amara styleguide

• Global
  • Color palette
  • Typography
  • Lists
  • Definition Lists
  • Tables
  • Dropdown menus
• Layout
  • General Layout
  • Utility classes
  • Tabs
  • Multi-step Pane
• Buttons
  • Tags
  • Options
  • Split Buttons
• Iconography
  • Icons
  • Avatars
  • Step lists
• Forms
  • Forms
  • Fields
  • Checkboxes and Radios
  • Switches
  • multiField
  • Fieldsets
  • Settings page forms
  • Field errors
  • File Uploads
  • Image Uploads
  • Compound fields
  • ButtonField
  • Searchbar
  • Selects
  • Table select
  • Preset or custom
  • Dynamic Help Text
• Modals / Dialogs
  • Modal dialogs
  • Language Switcher
• Containers
  • Content header
  • Filter Box
  • Content footer
  • List View
  • Selection group
  • Accordion
  • Dynamic Formset
  • Dynamic Formset (alternate)
• Elements
  • Alerts
  • Announcements
  • Video cards
  • Video subtitles list
  • Filters
  • Check All
  • Search results / Select List
  • Pagination
  • Constrained content
  • Assignment history table
  • Workflow diagram
  • Zero states
  • Progress bars
  • Date input/display
  • Navbar
  • Checkout table
• Utility Classes
  • Text center
  • Block center
  • Block wrap
  • Video thumbnails

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

26:47

Details

Video 1

12:41

Details

Video 2

09:00

Details

Video 3

17:32

Details

Video 4

01:51

Details

Video 5

10:40

Details

videoCard2 with language

Video 0

Secondary Info

26:47

English

Transcribe

Video 1

Secondary Info

12:41

French

Transcribe

Video 2

Secondary Info

09:00

Spanish

Transcribe

Video 3

Secondary Info

17:32

American Sign Language

Transcribe

Video 4

Secondary Info

01:51

Japanese

Transcribe

Video 5

Secondary Info

10:40

Brazillian Portuguese

Transcribe

videoCard2 with extra options

Video 0

Secondary Info

Tertiary Info

26:47

English

Transcribe

Video 1

Secondary Info

Tertiary Info

12:41

French

Transcribe

Video 2

Secondary Info

Tertiary Info

09:00

Spanish

Transcribe

Video 3

Secondary Info

Tertiary Info

17:32

American Sign Language

Transcribe

Video 4

Secondary Info

Tertiary Info

01:51

Japanese

Transcribe

Video 5

Secondary Info

Tertiary Info

10:40

Brazillian Portuguese

Transcribe

• Edit
• Move
• Delete

videoCard (deprecated)

2 min

Video Title

Video Subheading

Review Due in 2 days Decline

videoCardSimple (deprecated)

The Future Of News? Virtual Reality

Carl Safina

+2 Videos