UI Components

Our system of UI components are designed to set a new bar for simplicity and consistency across District services, while providing you with plug-and-play.

Call to Action Element With the Button on right side

Use this element when you use a full with column on the page. The element name is DO – Call to Action with Button on right side

Call to Action Element with Button on the bottom side

Use this element when you use a full with column on the page. The element name is DO – Call to Action with Button on the bottom side

Button styling

A full width button will take up the full with of the column size that it is in. In the case above its within a full size column. Below is an example of how it would look in a two column row.

Two Column

Two Column

Accordion

Accordions are a list of headers that can be clicked to hide or reveal additional content.


When to use an accordion

  • Users only need a few specific pieces of content within a page.
  • Information needs to be displayed in a small space.

When to consider something else

  • If visitors need to see most or all of the information on a page. Use well-formatted text instead.
  • If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

To insert an Accordion look for the element named DO – Accordion

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.