Component Library
Utility Classes
Style Guide
Typography
Color
Borders
Shadows
Grids
Pages
Pages

Component Library

Icons / SVG
16px
24px
32px
48px
Icons / Fontawesome
16px
24px
32px
48px
Icons / Fontawesome / brand
16px
24px
32px
48px
Icons / Material Design
16px
24px
36px
48px
Icons / Lottie / click
16px
24px
32px
48px
Icons / Lottie / hover
16px
24px
32px
48px
avatars
Buttons
button-primary
Button
button-primary
Button
button-primary
Button
button-secondary
Button
button-secondary
Button
button-secondary
Button
button-text
Button
button-text
Button
button-text-static
Button
button-primary-white
Button
button-primary-white
Button
button-primary-white
Button
button-text-white
Button
button-text-white
Button
button-text-Static-white
Button
cards
Card

Headline / H4

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Button
Card [link]

Headline / H4

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Button
Card-Horizontal

Headline / H4

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu

Card-Horizontal [link]

Headline / H4

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu

Button
Card
Headline / H5
May 15, 2020

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

name
position
Button
Headers
Header-a

Headline / H1

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium
Header-B

Headline / H1

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Header-C

Headline / H1

odio pellentesque diam volutpat commodo sed egestas

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Header-D

Headline / H2

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Headline / H3

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

call-to-actions
primary

Headline / H3

Button
or
Contact us with questions
Secondary

Headline / H3

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Button
Tertiary

Headline / H3

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae

Button
testimonials

Headline / H3

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae
name
position
button
odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque
name
position
button

interaction note: each slide will fade in/out at the completion of the progress bar
progress bar duration: 5 seconds - in/out quad

tabs
tab 1
tab 2
tab 3
h5 / headline

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

h5 / headline

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

Headline / H5

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

  • odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque

Accordion
Accordion
Form components
input-field-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Submit button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form

Heading

odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
logo-cloud [3-col]
logo-cloud [4-col]
background-pattern

Utility Flow is a side project lovingly maintained and updated by Jason Kelley

Buy me a coffee
© 2021 Jason Kelley