Typography

Examples of how different headings and text styles will look.

H1 Heading One

H2 Heading Two

H3 Heading Three

H4 Heading Four

H5 Heading Five

For additional sizing options, see the bulma docs here.

Cosby sweater iphone artisan, squid trust fund photo booth twee blog shoreditch single-origin coffee aesthetic jean shorts messenger bag brooklyn butcher. Iphone fap banksy next level put a bird on it, letterpress photo booth thundercats biodiesel fanny pack etsy banh mi wayfarers. Sustainable four loko dreamcatcher, vegan single-origin coffee yr cardigan biodiesel williamsburg thundercats salvia master cleanse terry richardson tumblr mcsweeney’s. Lomo gluten-free salvia you probably haven’t heard of them portland. Mlkshk jean shorts carles, etsy artisan farm-to-table sartorial williamsburg marfa PBR leggings trust fund. Mcsweeney’s banh mi lo-fi mustache, fixie cosby sweater tumblr twee fanny pack. Thundercats food truck vegan, hoodie irony artisan beard synth.

^ Hipster Ipsum. Small text example.

Colored text - good for UI messages and alerts.

Text that has the is-primary class.

Text that has the is-link class.

Text that has the is-info class.

Text that has the is-success class.

Text that has the is-warning class.

Text that has the is-danger class.

Text that has the is-black class.

Text that has the is-dark class.

Text that has the is-light class.

Text that has the is-white class.

For different color usages (background shades, inverted (dark mode) classes, etc view the docs for the color helpers.

Panels & Sections

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.

Buttons

Buttons have many different states of interaction, and can have different styles depending on their role. By default, Hippo buttons should be rounded and use the is-normal sizing.

Squared buttons:

Grouped (inline) buttons:

With icons:

Disabled state:

Tables

Add New Data

Generic	Table	Styles	Test	Actions
Admin	Matt Fisher	BC, Canada	April 01, 2017	Edit Delete
Admin	Carolyn Van Slyck	Chicago, Illinois	April 01, 2017	Edit Delete
Admin	Ivan Towlson	New Zealand	April 01, 2017	Edit Delete
Admin	Ronan Flynn-Curran	Bay Area, California	April 01, 2017	Edit Delete