Components Showcase
Default
Schedule
No Icon
No Shadow
Full-width
Left Icon
Rounded
Schedule
No Icon
No Shadow
Full-width
Left Icon
Hollow
Schedule
No Icon
No Shadow
Full-width
Left Icon
Hollow Rounded
Schedule
No Icon
No Shadow
Full-width
Left Icon
Disabled
Loading
Loading + Disabled
Default
lorem ipsum dolor sit amet
Varius tempor parturient dignissim augue neque donec curabitur, vestibulum cras vel finibus vehicula conubia venenatis, aptent lacus ridiculus nam enim dictum.
Efficitur senectus nullamNotch & Background Color
habitasse porttitor primis fermentum vitae taciti
Placerat amet velit arcu adipiscing torquent ligula gravida fermentum senectus, dui vehicula magna leo parturient dolor enim habitant lacus, aliquam primis etiam urna volutpat quam risus justo.
Urna egestas lacus laciniaNo Notch
maecenas mi pulvinar ante etiam ullamcorper
Elit iaculis non mollis accumsan ridiculus commodo nisl, tempus sagittis dictumst volutpat pretium curae.
Sem nulla torquent- gray-100
- gray-200
- gray-300
- gray-400
- gray-500
- gray-600
- gray-700
- gray-800
- gray-900
- red-500
- red-700
- orange-500
- green-500
- yellow-400
- yellow-500
- yellow-600
- blue-300
- blue-500
- blue-700
- pink-500
- a-50
- a-100
- a-200
- a-300
- a-400
- a-500
- a-600
- a-700
- a-800
- a-900
- a-950
- b-50
- b-100
- b-200
- b-300
- b-400
- b-500
- b-600
- b-700
- b-800
- b-900
- b-950
- c-50
- c-100
- c-200
- c-300
- c-400
- c-500
- c-600
- c-700
- c-800
- c-900
- c-950
- d-50
- d-100
- d-200
- d-300
- d-400
- d-500
- d-600
- d-700
- d-800
- d-900
- d-950
Default (Condensed)
Applied
Full
Save $20 on your repair
Save $20 on any repair over $100. Lorem ipsum dolor sit amet.
Some restrictions apply. Expires October 02, 2026.
Default
Responsive (shows content at @md)
Default
Standard
Maecenas cubilia rutrum taciti pharetra sit
Nulla praesent nisi ultricies rhoncus
Collapsed (until md)
Molestie volutpat magnis platea tellus imperdiet
Image left
Enim morbi vehicula diam lectus pretium
Larger image
Ultricies efficitur scelerisque tempor convallis
Largest image
Amet justo finibus semper
No image, simple section title
Ultricies sem eros hendrerit sollicitudin turpis
No image, no section title
Nec sagittis imperdiet tristique nullam ante
Default
Service type
Active
Service type
Default
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Option 2
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Compact
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Stripped
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
With Coupon
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Option 2 With Coupon
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
With Coupon No Image
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Option 2 With Coupon No Image
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
No Coupon No Image
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Option 2 No Coupon No Image
Lorem Ipsum
Dolor Sit Amet Edipiscing Consectetur
urna tortor massa vitae aptent molestie scelerisque lacinia pretium ipsum per hac eleifend luctus interdum nostra faucibus efficitur mattis natoque tempus primis
- quisque aliquet vulputate
- dignissim felis fringilla
- sem fames metus
Icon Set
- check-circle
- check-circle-hollow
- zoom
- close
- pin
- star-solid
- phone
- calendar
- dollar
- bars
- house
- search
- arrow-right
- chevron-up
- chevron-down
- chevron-left
- chevron-right
- bbb
- angies-list
- home-advisor
- gmb
- yelp
- linkedin-solid
- facebook-solid
- twitter-solid
- youtube
- youtube-solid
- instagram-solid
- tiktok
Sizes
Default
accumsan ad ipsum
Facilisis sapien auctor dictum taciti
Placerat at ultrices metus adipiscing donec massa orci praesent mollis eros pretium, vel quam nisl lectus magnis feugiat elit ligula porta.
Expanded
accumsan ad ipsum
Facilisis sapien auctor dictum taciti
Placerat at ultrices metus adipiscing donec massa orci praesent mollis eros pretium, vel quam nisl lectus magnis feugiat elit ligula porta.
Default
Default
And what happens if the text is long and wraps?
And what about special characters on the end?)
And what about special characters on the end!
And what about special characters on the end.
And what about special characters on the end#
And what about special characters on the end (A+)
Specify tag and add arbitrary attributes
Control Icon Size
With "icon-up"
Default
Default
With content
ultrices malesuada feugiat
auctor natoque sodales penatibus porttitor id porta torquent
No call
ultrices malesuada feugiat
Default
vitae consectetur et facilisis
velit malesuada lorem mattis sollicitudin phasellus consequat fermentum
Customize Tags
And I’m just a
This is now an <h1> tag
Default (expand to width of container)
Don't expand
Multiple sizes, same source
Multiple sizes, multiple sources
Default
itemArea: 10,000
Responsive item area: '': 1000, sm: 5000, md: 7000 lg: 9000
Default
- Low $X,XXX
- Our Average $XX,XXX
- High $XX,XXX
Competitor
Average Competitor average is higher than ours
Set colors and offset
- Low $X,XXX
- Our Average $XX,XXX
- High $XX,XXX
Competitor
Average Competitor average is higher than ours
Default
morbi cras euismod netus lorem ipsum
Default
Standard section title
A really long section title that wraps
Set both colors
Standard section title
Set mark color
Standard section title
No mark
Standard section title
Rounded Box
Standard section title
A really long section title that wraps
Bar
Standard section title
A really long section title that wraps
Borders (Beta only)
Standard section title
A really long section title that wraps
Default
Pellentesque lectus aenean
Augue accumsan porttitor lacus tincidunt conubia tellus purus maecenas rutrum varius, aenean sociosqu dignissim semper efficitur sollicitudin lectus nunc porta luctus, nostra tortor habitasse neque et lorem vehicula aliquet venenatis.Tellus aenean rhoncus
Ornare morbi sociosqu est inceptos eros nec, malesuada tortor metus quis hendrerit non lacinia, id enim erat sit accumsan.Felis odio primis facilisi
Potenti ultrices quisque mattis volutpat sit sagittis turpis, aliquam lectus fringilla nam proin risus pretium urna, porttitor montes leo platea dui inceptos.
Collapsed
Pellentesque lectus aenean
Tellus aenean rhoncus
Felis odio primis facilisi
The works
Section title
Habitasse parturient netus ante donec ultrices
Customer review
Euismod nec dui magna efficitur tortor nisl ligula
nunc magnis mi tortor lorem ipsum
Dark Text
Section title
Habitasse parturient netus ante donec ultrices
Customer review
Euismod nec dui magna efficitur tortor nisl ligula
nunc magnis mi tortor lorem ipsum
Callout + Reviews
Customer review
Euismod nec dui magna efficitur tortor nisl ligula
nunc magnis mi tortor lorem ipsum
Callout only
Customer review
Euismod nec dui magna efficitur tortor nisl ligula
Content only
Section title
nascetur et mauris est velit id
nunc magnis mi tortor lorem ipsum
Default
- Posted in:
- Troubleshooting,
- Tips,
- Cooling,
- Heating
Default
Customer review
Suspendisse neque at iaculis cubilia ridiculus lacinia congue
(display) Non commodo.
<h1> Sunt sint labore.
<h2> Excepteur enim proident velit quis.
<h3> Sint laborum dolor.
<h4> Ad in minim non.
<h5> Labore amet id sunt.
<h6> Deserunt ex aliquip tempor fugiat.
(base) Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
(small) Dolore incididunt.
(x-small) Proident esse dolore.