Primary Button
Inputs
Text input
Input messages
Textarea input
Checkbox buttons
Checkbox
Checkbox
Dropdowns
Label
Select
Label
Select
Label
Select
Avatars
Avatar photo
24px
32px
40px
48px
Avatar name
J
24px
JC
32px
JC
40px
JC
48px
Badges
Primary badges
Default
Default
Default
Neutral badges
Default
Default
Default
Default
Color badges
Default
Default
Default
Default
Tooltips
Tooltips
Simple text
Right tooltip
Simple text
Left tooltip
Simple text
Bottom tooltip
Simple text
Top tooltip
Notifications
Notification bars
Information message: Lorem ipsum dolor sit amet consectur amerlo
Sucess message: Lorem ipsum dolor sit amet consectur amerlo
Error message: Lorem ipsum dolor sit amet consectur amerlo
Warning message: Lorem ipsum dolor sit amet consectur amerlo
Cards
Text cards
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Icon cards
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Image cards
Card title
A gravida morbi tellus vitae misi non in risus nulla est nibh convallis quam mauris dolor vulputate consegur.
Learn more
Card title
A gravida morbi tellus vitae misi non inole risus nulla est nibh convallis quam.
Stats cards
March 22
Card title
50.88K
24%
Card title
50.88K
24%
Card title
50.88K
+24%
Analytics cards
Card title
$24,840.56
24%
1,805
Card title
+24%
Card title
$84,226
Card subtitle
Tasks cards
Pricing cards
Plan
$10/mo
A gravida morbi tellus vitae doleril.
A gravida morbi tellus vitae.
Imperdiet dolor dolor sed
Ac ultricies fermentum dol
Laoreet elementum coler
Eget in montes non sem ac
Get started
Plan
$10/mo
A gravida morbi tellus vitae misi non in risus nulla est nibh convallis quam mauris dolor.
A gravida morbi tellus vitae.
Imperdiet dolor dolor sed
Ac ultricies fermentum dol
Laoreet elementum coler
Eget in montes non sem ac
Plan
$249
/monthly
A gravida morbi tellus vitae misi non in risus nulla est nibh convallis quam mauris dolor.
A gravida morbi tellus vitae.
Imperdiet dolor dolor sed
Ac ultricies fermentum dol
Laoreet elementum coler
Eget in montes non sem ac
Tables
Data Table
Name
Email
Phone
Company
Country
John Carter
john@dataplus.com
(487) 180 - 5048
Dataplus X
United States
Sophie Moore
sophiemoore@saasly.com
(901) 870 - 6507
Saasly X
Canada
Andy Smith
andy@promoplus.com
(317) 197 - 0475
Promoplus X
Australia
Lily Woods
lily@startuper.com
(574) 048 - 6947
Startuper X
United States
User Table
Name
Title
Status
Role
John Carter
john@dashflow.com
CEO & Founder
BRIX Templates
Active
Admin
Sophie Moore
sophie@dashflow.com
CTO & Co-Founder
BRIX Templates
Active
Member
Andy Smith
andy@dashflow.com
VP of Marketing
BRIX Templates
Active
Member
Lily Woods
lily@dashflow.com
VP of Design
BRIX Templates
Active
Member
Modals
Modals
Tabs
Tabs
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Card title
A gravida morbi tellus vitae misi non in risus nulla est nibh convallis quam mauris dolor vulputate consegur.
Learn more
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Card title
A gravida morbi tellus vitae. Nisi non in risus nulla est nibh convallis quam. Mauris vulputate pellentesque urna a felis consectetur pellentesque sed. Netus sed risus amet aenean.
Learn more
Card title
A gravida morbi tellus vitae misi non in risus nulla est nibh convallis quam mauris dolor vulputate consegur.
Learn more
Breadcrumb
Breadcrumbs
Empty States
Empty States
State title
Donec enim lectus elit suspendisse nisi sodales pretium sed sed etiam amet porttitor urna vel massa nisl mattis aliquet eu consectet.
Create file
State title
Donec enim lectus elit suspendisse nisi sodales pretium sed sed etiam ametoler porttitor urna vel massa nisl mattis.
Create file