← Home

APPLICATION UI

application shells / multi column

Constrained Three ColumnConstrained With Sticky ColumnsFull Width Secondary Column On RightFull Width Three ColumnFull Width With Narrow SidebarFull Width With Narrow Sidebar And Header

application shells / sidebar

Brand SidebarBrand Sidebar With HeaderDark SidebarDark Sidebar With HeaderLight SidebarLight Sidebar With Constrained Content AreaLight Sidebar With HeaderLight Sidebar With Off White Background

application shells / stacked

Brand Nav With OverlapBranded Nav With Compact White Page HeaderBranded Nav With White Page HeaderDark Nav With Compact White Page HeaderDark Nav With OverlapDark Nav With White Page HeaderLight Nav On Gray BackgroundLight Nav With Bottom BorderTwo Row Navigation With Overlap

data display / calendars

Borderless Side By SideBorderless StackedDay ViewDoubleMonth ViewSmall With MeetingsWeek ViewYear View

data display / description lists

Left AlignedLeft Aligned In CardLeft Aligned On DarkLeft Aligned StripedLeft Aligned With Inline ActionsNarrow With Hidden LabelsTwo Column

data display / stats

Simple In CardsSimple On DarkWith Brand IconWith Shared BordersWith Trending

elements / avatars

Avatar Group Stacked Bottom To TopAvatar Group Stacked Top To BottomCircular AvatarsCircular Avatars With Bottom NotificationCircular Avatars With Placeholder IconCircular Avatars With Placeholder InitialsCircular Avatars With Top NotificationRounded AvatarsRounded Avatars With Bottom NotificationRounded Avatars With Top NotificationWith Text

elements / badges

FlatFlat PillFlat Pill With DotFlat With DotFlat With Remove ButtonPill With BorderPill With Border And DotSmall FlatSmall Flat PillSmall Flat Pill With DotSmall Flat With DotSmall Pill With BorderSmall With BorderWith BorderWith Border And DotWith Border And Dot On DarkWith Border And Remove ButtonWith Border On Dark

elements / button groups

BasicIcon OnlyWith Checkbox And DropdownWith DropdownWith Stat

elements / buttons

Buttons With Leading IconButtons With Trailing IconCircular ButtonsPrimary ButtonsPrimary Buttons On DarkRounded Primary ButtonsRounded Secondary ButtonsSecondary ButtonsSecondary Buttons On DarkSoft Buttons

elements / dropdowns

SimpleWith DividersWith IconsWith Minimal Menu IconWith Simple Header

feedback / alerts

With Accent BorderWith ActionsWith DescriptionWith Dismiss ButtonWith Link On RightWith List

feedback / empty states

SimpleWith Dashed BorderWith RecommendationsWith Recommendations GridWith Starting PointsWith Templates

forms / action panels

SimpleSimple WellWith Button At Top RightWith Button On RightWith InputWith LinkWith ToggleWith Well

forms / checkboxes

List With Checkbox On RightList With DescriptionList With Inline DescriptionSimple List With Heading

forms / comboboxes

SimpleWith Check On LeftWith ImageWith Secondary TextWith Status Indicator

forms / form layouts

Labels On LeftStackedStacked On DarkTwo ColumnTwo Column With Cards

forms / input groups

Input With Add OnInput With Corner HintInput With Disabled StateInput With Gray Background And Bottom BorderInput With Hidden LabelInput With Inline Add OnInput With Inline Leading Add On And Trailing DropdownInput With Inline Leading And Trailing Add OnsInput With Inline Leading DropdownInput With Inset LabelInput With Keyboard ShortcutInput With LabelInput With Label And Help TextInput With Leading IconInput With Leading Icon And Trailing ButtonInput With Overlapping LabelInput With Pill ShapeInput With Trailing IconInput With Validation ErrorInputs With Inset Labels And Shared BordersInputs With Shared Borders

forms / radio groups

CardsColor PickerList With DescriptionList With Descriptions In PanelList With Inline DescriptionList With Radio On RightSimple Inline ListSimple ListSimple List With Radio On RightSimple TableSmall CardsStacked Cards

forms / select menus

Branded With Supported TextCustom With AvatarCustom With Check On LeftCustom With Status IndicatorSimple CustomSimple NativeWith Secondary Text

forms / sign in forms

SimpleSimple CardSimple No LabelsSimple On DarkSplit Screen

forms / textareas

SimpleWith Avatar And ActionsWith Preview ButtonWith Title And Pill ActionsWith Underline And Actions

forms / toggles

Short ToggleSimple ToggleToggle With IconWith Left Label And DescriptionWith Right Label

headings / card headings

SimpleWith ActionWith Avatar Meta And DropdownWith Avatar And ActionsWith DescriptionWith Description And Action

headings / page headings

Card With Avatar And StatsWith ActionsWith Actions And BreadcrumbsWith Actions And Breadcrumbs On DarkWith Actions On DarkWith Avatar And ActionsWith Banner ImageWith Filters And ActionWith Logo Meta And ActionsWith Meta Actions And BreadcrumbsWith Meta Actions And Breadcrumbs On DarkWith Meta And ActionsWith Meta And Actions On Dark

headings / section headings

SimpleWith ActionWith ActionsWith Actions And TabsWith Badge And DropdownWith DescriptionWith Inline TabsWith Input GroupWith LabelWith Tabs

layout / cards

Basic CardCard Edge To Edge On MobileCard With FooterCard With Gray BodyCard With Gray FooterCard With HeaderCard With Header And FooterWellWell Edge To Edge On MobileWell On Gray

layout / containers

Constrained To Breakpoint With Padded ContentConstrained With Padded ContentFull Width On Mobile Constrained To Breakpoint With Padded Content Above MobileFull Width On Mobile Constrained With Padded Content AboveNarrow Constrained With Padded Content

layout / dividers

With ButtonWith IconWith LabelWith Label On LeftWith TitleWith Title And ButtonWith Title On LeftWith Toolbar

layout / list containers

Card With DividersCard With Dividers Full Width On MobileFlat Card With DividersSeparate CardsSeparate Cards Full Width On MobileSimple With DividersSimple With Dividers Full Width On Mobile

layout / media objects

Aligned To BottomAligned To CenterBasicBasic ResponsiveMedia On RightNestedStretched To FitWide Responsive

lists / feeds

Simple With IconsWith CommentsWith Multiple Item Types

lists / grid lists

Actions With Shared BordersContact CardsContact Cards With Small PortraitsHorizontal Link CardsImages With DetailsLogos Cards With Description ListSimple Cards

lists / stacked lists

Full Width With Constrained ContentFull Width With LinksIn Card With LinksNarrowNarrow With ActionsNarrow With Badges On DarkNarrow With Small AvatarsNarrow With Small Avatars On DarkNarrow With Sticky HeadingsNarrow With Truncated ContentSimpleSimple On DarkTwo Columns With LinksWith Badges Button And Actions MenuWith Inline Links And Actions MenuWith Inline Links And Avatar GroupWith Links

lists / tables

Full WidthFull Width With Avatars On DarkFull Width With Constrained ContentSimpleSimple In CardSimple On DarkWith Avatars And Multi Line ContentWith BorderWith CheckboxesWith Condensed ContentWith Grouped RowsWith Hidden Columns On MobileWith Hidden HeadingsWith Sortable HeadingsWith Stacked Columns On MobileWith Sticky HeaderWith Striped RowsWith Summary RowsWith Uppercase HeadingsWith Vertical Lines

navigation / breadcrumbs

ContainedFull Width BarSimple With ChevronsSimple With Slashes

navigation / command palettes

Dark With IconsSemi Transparent With IconsSimpleSimple With PaddingWith FooterWith GroupsWith IconsWith Images And DescriptionsWith Preview

navigation / navbars

Dark With Quick ActionDark With SearchSimpleSimple DarkSimple Dark With Menu Button On LeftSimple With Menu Button On LeftWith Centered Search And Secondary LinksWith Centered Search And Secondary Links DarkWith Quick ActionWith SearchWith Search In Column Layout

navigation / pagination

Card Footer With Page ButtonsCentered Page NumbersSimple Card Footer

navigation / progress bars

BulletsBullets And TextCirclesCircles With TextPanelsPanels With BorderProgress BarSimple

navigation / sidebar navigation

BrandDarkLightWith Expandable SectionsWith Secondary Navigation

navigation / tabs

Bar With UnderlineFull Width Tabs With UnderlineSimple On DarkTabs In PillsTabs In Pills On GrayTabs In Pills With Brand ColorTabs With UnderlineTabs With Underline And BadgesTabs With Underline And Icons

navigation / vertical navigation

On GraySimpleWith BadgesWith IconsWith Icons And BadgesWith Secondary Navigation

overlays / drawers

Contact List ExampleCreate Project Form ExampleEmptyFile Details ExampleUser Profile ExampleWide Create Project Form ExampleWide EmptyWide Horizontal User Profile ExampleWith Background OverlayWith Branded HeaderWith Close Button On OutsideWith Sticky Footer

overlays / modal dialogs

Centered With Single ActionCentered With Wide ButtonsSimple AlertSimple Alert With Left Aligned ButtonsSimple With Dismiss ButtonSimple With Gray Footer

overlays / notifications

CondensedSimpleWith Actions BelowWith AvatarWith Buttons BelowWith Split Buttons

page examples / detail screens

Sidebar On DarkStacked

page examples / home screens

Sidebar On DarkStacked

page examples / settings screens

Sidebar On DarkStacked