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

Accordion

An accordion is used to contain multiple similar content blocks, showing only 1 at a time

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Facilis nostrum alias tempora, eaque fuga iste fugit consectetur porro cum earum.

Dolore ex molestias sit doloremque amet, aliquid vel fugiat dolorem inventore eaque, iusto repellat aut placeat officia ea similique officiis maxime? Dolores est consequuntur ex, maxime rem sint repellat voluptates voluptatem quae ipsa excepturi reprehenderit vitae cum? Quo optio hic aliquam inventore magni voluptate quibusdam at harum ipsa, optio explicabo corporis in impedit voluptates dolores, magni culpa optio nostrum et sint nihil, nisi suscipit corrupti in minus distinctio voluptatibus, iste quae magni exercitationem minima officiis fuga architecto nobis possimus nihil reprehenderit? Quia quaerat exercitationem praesentium quidem voluptatem deleniti, eum exercitationem praesentium possimus deleniti suscipit id assumenda vitae tempora porro quisquam.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quibusdam cupiditate accusantium dolorum sint harum quasi sit assumenda magnam illo, numquam ad beatae nam commodi placeat recusandae consectetur, consequuntur a beatae assumenda? Quis rerum tempora ullam reiciendis suscipit dolore, consectetur illo quam id, expedita voluptatem impedit eos consequatur cupiditate voluptas optio harum recusandae corrupti, quod consequatur in doloremque dignissimos sed dolore deserunt sapiente explicabo, atque molestias itaque. Ab dolor alias dolores minima veritatis enim est suscipit, exercitationem quae ipsa magnam, doloremque commodi necessitatibus nobis, laborum odit eum quam dignissimos autem vero, id mollitia voluptates et saepe aliquid sapiente porro quod consectetur?

Eum aspernatur odio ad, totam optio quisquam quod explicabo praesentium animi odit error ipsam, modi nemo est culpa tempore dolorem optio, nobis quam mollitia dolor recusandae iusto labore at, assumenda quos voluptate libero minus ratione totam?

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consequatur accusantium quia dicta id consequuntur atque dignissimos necessitatibus nam ducimus, voluptate doloremque impedit illum nulla odit. Officiis cumque dolorum harum autem quas aperiam fuga est.

Molestias porro magnam maiores quisquam accusantium dolor, iure error soluta? Perspiciatis atque doloribus voluptas impedit hic, animi placeat architecto eum nam possimus accusantium.

Append new section