Overview
All 52 Feitio components, by group. Each has when to use it, when not to, and the code.
On this page
Actions
Text and page structure
- HeadingThe heading of a page or a section.
- TextText for reading, at its measure.
- IconA drawing from the sprite, next to the word.
- BlockA block of content on the page.
- VisuallyHiddenText for screen readers only.
- SkipLinkJumps straight to the content, by keyboard.
- DividerThe hairline between two parts that touch.
- KbdA key, written as on the keyboard.
Layout
Forms
- FieldA field’s label, hint, control and error.
- TextInputOne line of text.
- TimeInputHour and minute, in 12 or 24 hours.
- TextareaSeveral lines of text.
- SelectOne choice from a long list.
- CheckboxYes or no, or several choices.
- RadiosOne choice among a few, all in view.
- SwitchTurns a setting on and off, applied on save.
- SegmentedControlOne choice among a few neighboring options.
- FieldsetGroups fields that answer one question.
- FilterFieldFilters the list below as the person types.
Feedback and errors
- ErrorMessageA field’s error, below it.
- ErrorSummaryAll the form’s errors, at the top.
- NoticeA notice with the words for what happened.
- TagA thing’s status, with icon and word.
- EmptyStateWhen there is nothing: the drawing and the next step.
- StatusOverlayFeedback on the container itself: loading, done, error.
Data
Navigation
- HeaderThe site header: brand, areas and tools.
- FooterThe footer: the brand, the years and the links.
- AppShellA product’s layout of regions.
- NavThe product’s places, with the current one marked.
- BreadcrumbsThe path from the start to here.
- AnchorThe page index, following the scroll.
- DetailsA closed passage the person opens if they want.
- ScrollFadeSignals there is more content below.
- BackToTopGoes back to the top after half a screen.
- SearchSearch across the product, with results as you type.
On top of the screen
Documentation
Page templates
No component by that name.