Components
Actions and inputs
Everything you press, type or choose.
Triggers an action. Two sizes.
Primary
Hover
Keyboard focus
Pressed
Working (press to try)
Not available
Choose a section first.
Secondary, hover
Tertiary
Full width
Small: inside cards, alerts and tight rows
Link
Goes to another page or site.
Search field
Find a course by name, skill or campus.
Filled (clear button appears)
Search suggestions
Suggests subjects, campuses and courses while someone types. Try “health” or “rock”.
Text field
Short typed answers.
Already known (read only)
CourseHealth Care Assistant, SUNY Adirondack
Select and text area
One choice from a list, or a longer message.
Select
Text area with a count
Please don't include your Social Security number or health details.
Up to 1,000 characters
Checkboxes
Any number of options, as bordered cards.
Radio buttons
Exactly one option, as bordered cards.
The bar that ends every form. Secondary at the start, primary at the end.
Short form: the bar sits at the bottom of the space
Filter panel
Narrow results. Updates instantly.
Filters on a phone
Filters on smaller screens.
Press to open the drawer
Applied filters
Filters in use, removable in one tap.
24 courses for “nursing”
Location prompt
Nearby campuses first, by consent or ZIP code.
See nearby campuses first? Other campuses stay in the list.
or
Save a course
Keep a course for later.
Signed in (press to try)