Components

92 components the portal and the Console are built from, each on its own page.

Form

  • Address SearchBoth
    A typed address search with suggestions, current location and manual entry.
  • ButtonBoth
    Solid, outline and plain buttons, with icons.
  • Capture ArtBoth
    What a photo or file target asks for, drawn as a small sticker.
  • CheckboxBoth
    Single and grouped checkboxes with labels.
  • Choice CardsBoth
    A single choice made between cards.
  • ComboboxBoth
    A searchable single-select.
  • Confirm ButtonConsole
    An icon that turns into its act on the first press and does it on the second.
  • Copy ButtonBoth
    Copies a value, with a check when it lands.
  • Day InputConsole
    A date field that takes a day only once it is whole and inside its bounds.
  • DropzoneBoth
    Click or drag to upload, with a preview overlay.
  • Field InputsBoth
    Masked inputs for card number, expiry, phone and numbers.
  • FieldsetBoth
    Fieldset, legend, field, label, description and error.
  • Filter ChipConsole
    A facet chip with a count; press the lit one to clear it.
  • InputBoth
    Text input, with invalid and disabled states.
  • Legal Name FieldsBoth
    A student’s legal name in its four parts, in the order it is written.
  • ListboxBoth
    A styled select built on a listbox.
  • Locate ButtonBoth
    Use my location: a round button on a map’s corner.
  • Location PickerPortal
    Choose a SafeWay location from a map and a list.
  • Multi ComboboxConsole
    A searchable multi-select that keeps its picks as chips.
  • Password InputBoth
    Password field with a show and hide toggle.
  • Payment FieldsBoth
    The card fields and marks checkout and the payment sheet share.
  • Photo TileBoth
    A photo slot that takes a picture or shows one.
  • RadioNot used yet
    Radio groups with labels and descriptions.
  • Search FieldConsole
    A search box with a clear button.
  • SegmentedBoth
    A pill control that slides between a few options.
  • SelectBoth
    A styled native select.
  • Signature PadBoth
    A drawn signature for documents that need one.
  • SwitchBoth
    An on and off switch.
  • Switch ListConsole
    Switches in rows, each with a label and a description.
  • TextareaBoth
    Multiline text input.
  • Theme ControlBoth
    Light, dark or follow the system.
  • WorksheetConsole
    A small bordered table of labels and figures, in a dialog.

Display

  • Animated NumberConsole
    A figure that counts to its new value when it changes.
  • AvatarBoth
    A photo or initials, round or square.
  • BadgeBoth
    A short status label in a tone.
  • Behind the Wheel CardPortal
    The portal’s driving-lessons card, laid out as a wallet pass.
  • CardBoth
    The plain surface every card and panel is built on.
  • Card ArtBoth
    A card that leads somewhere, carrying the place it opens as a sticker.
  • Card HeaderConsole
    A card’s title row, with its action at the right.
  • ChecklistBoth
    Tasks with a done or to-do state and an action each.
  • Course Session RowBoth
    One online-course session or checkpoint, with its state.
  • Course WorkbookPortal
    The portal’s online course: a workbook with progress and assessments.
  • Description ListBoth
    Label and value pairs.
  • DisclosureBoth
    A section that expands and collapses.
  • DividerNot used yet
    A horizontal rule between sections.
  • Empty ArtBoth
    The scene an empty state draws: the thing its space holds, in neutral tones.
  • Empty StateBoth
    What an empty list, table or search says.
  • FolderBoth
    A pocket of a student’s papers, the newest peeking out.
  • History TimelineConsole
    A record’s history, each act with who did it and when.
  • IconBoth
    Every glyph in the house set, by name.
  • Journey FoldersBoth
    The portal’s progress tracker: a deck of status folders.
  • Location MapBoth
    A quiet Google map with the SafeWay locations on it.
  • Pin MapBoth
    A pin at the map’s center that reads back the address under it.
  • Place ListBoth
    Address and place results in a capped list.
  • Plan WalletPortal
    The plan and the card that pays for it, in one wallet.
  • Queue CardConsole
    The Waiting on you count, and the card a queue drawer stacks.
  • Seat-Time BadgeBoth
    The seat-time medallion a package wears, by hours.
  • Sortable HeaderConsole
    A table column header that sorts.
  • StatNot used yet
    A metric with its change, alone or in a row.
  • Status TileConsole
    A summary tile: a figure, a label and a state.
  • Sticker ArtBoth
    The product’s own UI, dealt as die-cut stickers.
  • TableConsole
    Data table, with striped, dense and full-bleed variants.

Feedback

  • Info HintBoth
    A quiet circled i that opens one short answer.
  • NoticeBoth
    An inline banner: neutral, success, warning or critical.
  • SpinnerBoth
    A small busy indicator in the current text color.
  • ToastBoth
    A short receipt for something that just happened.

Typography

  • HeadingBoth
    Heading and subheading.
  • LinkBoth
    An inline link.
  • TextBoth
    Body, code and strong text.

Overlay

  • AlertNot used yet
    A modal that asks for a confirmation.
  • Buy Drive Hours DialogBoth
    Pick a bundle of drive hours, then pay for it.
  • DialogBoth
    A modal panel for a form or a decision.
  • Dialog FaceBoth
    One step of a dialog that changes in place.
  • DrawerConsole
    A panel from the right for a record beside its list.
  • DropdownBoth
    A menu with sections and icons.
  • Invite Student DialogBoth
    Invite a student or a guardian by email or a copied link.
  • Payment DialogBoth
    Pay a balance or a fee with the card on file or another.
  • Solo PopoverConsole
    Floating cards that keep only one open at a time.

Navigation

  • NavbarBoth
    The top navigation bar inside a layout.
  • PaginationConsole
    Previous, next and page links.
  • Record HeaderConsole
    A record’s back chevron, title, badges and actions.
  • SidebarBoth
    The sidebar navigation inside a layout.
  • TabsConsole
    Underline tabs for sections of a page.

Layout

  • Auth LayoutNot used yet
    A centred layout for sign-in screens.
  • Auto HeightBoth
    Eases a container’s height as its content changes.
  • Enrollment LayoutPortal
    A form beside a brand panel, for enrollment.
  • List FooterConsole
    The count and paging under a list.
  • Overlay ScrollbarBoth
    A scroll cue painted over the content, costing no width.
  • Scroll AreaConsole
    A scrolling region with the house scrollbar.
  • Scroll FadeBoth
    A fade at the foot of a capped, scrolling list.
  • Sidebar LayoutBoth
    The app shell with a sidebar; this catalog is one.
  • Stacked LayoutNot used yet
    The app shell with a top bar only.