A group of Collapsible components that open and close when pressed, showing or hiding content.

A prominent method of messaging users about important information.

A horizontal sub-navigation component composed of anchor links. It is used to link to other parts of the current page and can be made stick to the top of the page on scroll.

AspectRatio is a container that will always maintain the same width-to-height ratio. It will expand to fill as much width as possible.

A graphical representation of a user's profile image to visually identify them in different contexts.

A powerful tool to showcase promotional offers, simplify user journeys and reinforce brand perception through visual storytelling.

The Bounded Content component is used to constrain the width of your page content. It puts a maximum width on that content and puts in a small amount of horizontal spacing to keep the content from touching the edges of the browser window.

A basic building block that can be used as a simple container or the foundations of a component.

Breadcrumbs are typically located at the top of the page and contain navigational links. They indicate the user's location within the site hierarchy.

Used to trigger an in-page action such as submitting a form or showing/hiding an interface component.

A set of actions visually grouped together.

A status label that calls attention to a product or service.

A simple container for grouping related content.

A carousel allows multiple pieces of content to be browsed in a cyclical view.

Checkboxes can be used to turn an option "On" or "Off". SWAN checkbox provides the same functionality as a native <input type="checkbox"> enhanced with styling.

A Collapsible is a section that can be toggled open and closed. It is typically grouped with other Collapsible into an Accordion.

A collection of color samples to present and select color options for products.

Input field that combines a text input and a list of suggested values that appear when the user enters text into the text input.

SWAN provides various utilities that can help a developer in creating a variety of UI patterns and rendering the page layout with ease.

Convenience Elements provide a wrapper component for many commonly used HTML tags like p, h1-h6, img, section and span. These convenience elements enable use of the system's core props (`margin`, `padding`, `fontWeight`, etc), and are optional.

Numeric message indicating an amount.

A horizontal divider to segment content.

A pull-down list of items that appear when the input is selected.

A React feature to detect if there has been a code error, and if so, display a fallback UI.

A <fieldset> groups several related form-fields (and their <label>s) together within a single <form>. A <legend> inside of a <fieldset> provides a caption that describes the field grouping.

Select and upload a file from the users local file system.

A simple, unstyled container that understands CSS flex layout without the need for adding any custom CSS.

A simple, responsive image that will maintain its aspect ratio and grow to fit the width of its container.

Standardized layout for the form elements.

An invisible framework responsible for the order and rhythm of our pages. By imposing constraints on layout, the grid makes it easy to achieve consistent and proportionate designs from page-to-page, and across devices.

Headings help to structure content on a page by creating clear visual hierarchy. SWAN has six heading components that render stylized HTML <h*> tags.

Hidden is a utility feature that allows you to hide content based on the size of the user's screen/window.

A vertical list of links to navigate through different sections of the site.

Hyperlinked text for navigating to a new page.

Related items that are organized vertically.

Input field that displays a list of items when selected.

A dropdown menu of buttons and/or links.

A card or panel that appears over the page content, requiring user interaction before returning to the content.

Page Wrappers are a group of components which wrap up the major elements of the page to provide a standard layout, and to support any behaviours we want to be consistent across the site.

For navigating across pages of related content.

A vertical divider to segment inline content.

A container that pops up from another element over other content. Triggered via click to give short, additional information in-context.

Displays price information and related content during the product flow.

Styling to display prices.

Displays the percentage of completion of a system operation.

Defers the loading of large images to improved the perception of page load times.

A code to receive a discount at checkout.

A set of mutually-exclusive choices.

Input a numeric value along a track using a handle.

Display a product rating.

Responsive Image is the preferred method for rendering an image when you know the aspect ratio of your image ahead of time.

Input field for search queries.

A set of options to choose from.

Placeholder boxes that resemble blocks of text, used while the real text is loading.

A visual indicator that a process is happening in the background but the interface is not yet ready for interaction.

A Square Image Container creates a square element that centers a Fluid Image inside it, and stretches the image to fill the width or height of the square as appropriate for the image's aspect ratio.

An image paired with descriptive text. Often used to present products.

A navigational element that shows the user's progress in a series of steps within a design or order flow.

Organize and display data efficiently in columns and rows.

Navigate between different types of related content at the same level of hierarchy.

Input field for entering more than one line of text.

Input field for entering alpha-numerical information.

A carousel of large images with thumbnails navigation.

A choice between two mutually exclusive options.

Use to define body copy styles.

Use to apply SWAN styles to rich text editor of a CMS.

Show content based on the size of the user's screen/window.

Hide content while still making it available in browser Accessibility Trees.

Zoom in and out of the current view.