# Components

Looking for information related to a specific component? This is your one-stop shop for everything you need to know about any piece of our Skyline "lego".

Getting Started: Add Skyline to your Stack

Getting Started: Add Skyline to your Stack

Installing Skyline into a brand new project? These instructions will help get you started.

Components used for general application functionality such as navigation and search.
Application Shell
Application Shell
Provides consistent and reliable site-wide structure
Vertical Navigation
Vertical Navigation
Provides navigation for a hierarchical context
Search Bars
Search Bars
Allows the user to narrow down to a smaller subset of content based on a search query
Breadcrumbs
Breadcrumbs
Shows the current location within the application hierarchy and allows navigation to a previous level
Back Button
Back Button
Allows a user to navigate back to the previous page
Pagination
Pagination
Informs the user that a series of related content to their current context also exists across multiple pages
Trigger an event when a user interacts with it.
Buttons
Buttons
Actionable interface elements
Dropdown Menu
Dropdown Menu
A menu hidden behind a button to trigger additional information
Communicate useful information to the user.
Alerts
Alerts
Highlight feedback or information to the user about the system or process that will change how they interact with the page
Tooltips
Tooltips
Gives users additional information that doesn't need to be visible at all times
Toasts
Toasts
A message that appears at the bottom of the interface to provide feedback to a user's action in a non-disruptive manner
Skeletons
Skeletons
A placeholder for not-yet-loaded content to assist with perceived loading times
Progress Steppers
Progress Steppers
The progress stepper is a navigational element that helps the user understand their progress through a multi-step task.
Progress Bars
Progress Bars
Shows progress towards a goal
Capture user input to save and validate.
Input Container
Input Container
Provides layout and styling of inputs
Input Group
Input Group
Provides content before or after a form control
Text Input
Text Input
Allows a user to enter text
Text Area Input
Text Area Input
Allows a user to enter text that could take up multiple lines
Checkbox Input
Checkbox Input
Allows a user to select or unselect a value
Radio Input
Radio Input
Allows a user to select an option from a group
Select Input
Select Input
Allows a user to select a single value from a list of options
Single-select Input (with autocomplete)
Single-select Input (with autocomplete)
Allows users to select a single value from a predefined list of options, with the ability to filter the list of options.
Multi-select Input (with autocomplete)
Multi-select Input (with autocomplete)
Allows users to select multiple items from a predefined list, with the ability to filter the list of options.
File Drop Zone
File Drop Zone
An interface for accepting files
File Uploader
File Uploader
An uploader with a responsive file management interface and error handling
Toggles
Toggles
Switches between two states
Radio Toggle Bars
Radio Toggle Bars
Allows a user to select one option from two or more options in a group to trigger an immediate change in their user interface
Style and organize text content.
Headings
Headings
Consistent heading display styles across our products
Text
Text
Consistent typography styles across our products
Page Title
Page Title
Informs the user of where they are and provides an overview of the page content
Badges
Badges
Inform the user of a status or action that has been taken
Tags
Tags
Pair with another element to provide a way to filter by label or category within its data
Visually represent information.
Icons
Icons
Visual cues to support user understanding of content or context
Illustrations
Illustrations
Benevity custom imagery
Aspect Ratio
Aspect Ratio
Control the Aspect Ratio of elements
Avatars
Avatars
A visual representation of the user or a group of users
Provide structure and organize content within a page.
Page
Page
Defines the structure for a page
Containers
Containers
Group content into cohesive units
Dividers
Dividers
A thin gray line that groups content in lists and layouts
Text Tabs
Text Tabs
Organize related content within a specific page to help users find what they're looking for, without creating any visual clutter
Cards
Cards
Group similar content together, and to assist with responsive layout
Page Layouts
Page Layouts
Tools for laying out a page of content in consistent and accessible ways.
The Cluster
The Cluster
When you need elements to wrap one at time as they run out of space you can use The Cluster object
The Sidebar
The Sidebar
When you need both fixed and flexible columns to wrap elegantly on mobile you can use The Sidebar object
The Stack
The Stack
When you need one part within the page to have the same level of vertical spacing, you can use The Stack object
Components that are placed over the application.
Modal Dialogs
Modal Dialogs
A modal hidden behind a trigger to share or capture additional information without removing the user from the flow of the page
Display multiple items in a consistent way.