Pelican Design System Components

Components

Components are the small piece of a user interface.

Alerts

Alerts communicate system or data statuses, such as warnings, to users.

App Screen

The App Screen is the container for your digital product.

Badges

Badges are labels that inform users about some aspect of the data, such as the count of related items.

Breadcrumbs

Breadcrumbs show users where the current page is in relation to other pages on the site.

Buttons

Buttons are interactive elements that trigger actions.

Button Container

The Button Container collects a series of related buttons at bottom of page.

Button Container

Previous and Next Page Buttons

Previous & Next Page buttons allow users to move through a sequential process.

Previous and Next Page Buttons

Back to Top Button

The Back to Top Button allows users to return to the top of the page.

Back to Top Button

Add Data Button

Add Data Button allows users to add data to a set.

Add Data Button

Page Actions Button

Page Actions allow users perform various actions.

Page Actions Button

Cards

Cards are containers for related content or information.

Chip

Chips allow users to see items added to or removed from a set.

Collapse

Collapses allow users to toggle the visibility of content.

Content Container

Content Containers collect content into meaningful groups.

Content Container

Data Tile

Data Tiles group related information about a category.

Dividers

Dividers separate content into clear, meaningful groups.

Footer

Footers contain links and other useful information at the bottom of a page.

Loading Animation

The Loading Animation informs the system is getting data.

Loading Animation

Modal

Modals stop the user for an important change or decision.

Navbar

Navbars allow users to move around digital products.

Official Banner

The Official Banner identifies official Louisiana Government websites.

Official Banner

Page Title

The Page Title block explains the purpose of a page.

Pagination

Pagination allows users to choose between viewable data sets.

Popovers & Tooltips

Popovers & Tooltips provide additional context to users about a connected item.

Popovers & Tooltips

Progress Indicator

Progress Indicators show users their place in a multi-step process.

Progress Indicator

Share & Social

Social Icons allow users to share the page with others.

Sidebar with Navigation

Contains and organizes all of the navigation for your web app.

Sidebar with Navigation

Skip Link

Skip Links allow users to skip navigation elements and go straight to content.

Tabbed Content

Tabs group related content, allowing users to see only what they want to see.

Table

Tables allow users to compare and review large amounts of data.

Toasts

Toasts are a lightweight notification relaying information related to the user's actions.

Page Top