Petal Components

Components Live Components

Containers

Max width "full"
Max width "lg"
Max width "md"
Max width "sm"

Links

Types
Link | Link with method | Live Patch | Live Redirect

Buttons

Types
Link Link with method Live Patch Live Redirect
Colors
Outline
Inverted
Shadow
Sizes
States
Button with icon
Home Home
Icon buttons

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Modified Heading

Fancy Heading

Paragraph tag

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2

Prose

Paragraph tag

  • Item 1
  • Item 2

Badges

Light
Primary Secondary Info Success Warning Danger Gray
Dark
Primary Secondary Info Success Warning Danger Gray
Outline
Primary Secondary Info Success Warning Danger Gray
Sizes
SM md lg
With icon
2 hours ago New messages Online now

Alerts

Default
This is an info state
This is a success state
This is a warning state
This is a danger state that is very long
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
With state icon
This is an info state
This is a success state
This is a warning state
This is a danger state that is very long
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.
Dismissable
This is an info state
This is a success state
This is a warning state
This is a danger state that is very long
Optional heading that is too long
This is quite a long paragraph that takes up more than one line.

Forms

Help text

can't be blank
must be at least 2 characters

Help text

Help text with a link

can't be blank

Help text with Link

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

:
:
can't be blank

can't be blank

/ /
/ /
can't be blank

can't be blank

/ / — :
/ / — :
can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

can't be blank

Dropdowns

Loading

Spinner

Breadcrumbs

Slash
Link 1
/
Link 2
/
Link 3
Chevron
Link 1
Link 2
Link 3
Custom CSS
Link 1
/
Link 2
/
Link 3

Avatar

Basic avatars
Avatars with placeholder icon
Avatar groups stacked
Avatars with placeholder initials
PC
PC
PC
PC
PC
Random color generated avatars with placeholder initials
MP
NH
JC
WS
PJ

Progress

Progress bar
Sizes
15%

Pagination

Basic pagination

Tabs

Basic tabs
Home About
Tabs with underline
Home About
Basic tabs with number
Home 1 About
Tabs underlined with number
Home 1 About
Basic tabs with icons
Home Company
Tabs underlined with outline icons
Home Company

Card

Basic cards
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Marketing
Tips for lightning fast development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Event
Petal meetup in Melbourne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Outline cards
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Marketing
Tips for lightning fast development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Event
Petal meetup in Melbourne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Cards with media
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Marketing
Tips for lightning fast development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Event
Petal meetup in Melbourne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Cards with media and footer
Article
Enhance your Phoenix development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Marketing
Tips for lightning fast development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
Event
Petal meetup in Melbourne
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.

Table

Basic table
Name Title Email
John Smith Engineer john.smith@example.com
Beth Springs Developer beth.springs@example.com
Peter Knowles Programmer Peter.knowles@example.com
Sarah Hill Marketer sarah.hill@example.com
Multi-lined table with avatars and badges
Name Title Phone Status
John Smith
john.smith@example.com
Engineer +1 0432 677 943 Active Edit
Beth Springs
beth.springs@example.com
Developer +1 0465 899 443 Pending Edit
Peter Knowles
peter.knowles@example.com
Programmer +1 0472 344 565 Cancelled Edit
Sarah Hill
sarah.hill@example.com
Marketer +1 0429 996 220 Deleted Edit

Accordion

Basic accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.