Style Guide

This site is built using a combination of bulma.io and custom SCSS. This page serves as documentation of how this site leverages those. Below you will find the basic building blocks of this site. Consider this a living document, as it does not represent all of the components and/or elements available at any one time. This page also does not represent the full range of sizes and other options available for these components/elements.

Typography

Headers

H1 Lorem ipsum dolor sit amet, consectetur adipiscing elit

H2 Lorem ipsum dolor sit amet, consectetur adipiscing elit

H3 Lorem ipsum dolor sit amet, consectetur adipiscing elit

H4 Lorem ipsum dolor sit amet, consectetur adipiscing elit

H5 Lorem ipsum dolor sit amet, consectetur adipiscing elit
H6 Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lists

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 2
  4. Ordered List Item 4

  • Unordered List Item 1
  • Unordered List Item 2
  • Unordered List Item 3
  • Unordered List Item 4

Text Elements

Example i element
Example strong element

Example p element. 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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Example blockquote element

Example dd element

Example dl element

Example dt element

Example figcaption element

Example pre element

Elements

Alerts

Notification

Messages

  • Hello World

    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.
  • Dark

    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.
  • Primary

    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.
  • Info

    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.
  • Success

    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.
  • 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.
  • Danger

    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.

Avatar

Small

Medium

Large

Badge (Tag)

Small

I am a badge I am a badge I am a badge

Medium

I am a badge I am a badge I am a badge

Large

I am a badge I am a badge I am a badge

Custom Filter Badge/Tag

I am a badge I am a badge I am a badge

Buttons & Links

Link Elements

Button Elements

Button States


Progress Bar

Simple Progress Bar

70%

Danger Progress Bar

20%

Forms

Input

This is a help text

Form Layouts

Complete Form Example

This username is available

This email is invalid

Login Example

Signin

Select

Toggles

Checkbox

Commerce

Cards

Custom Product Cards

Pricing Card

  • Entreprise

    $199 / month

    For most businesses that want to optimize web queries.

    • All illimited link
    • Own analitycs plateform
    • 24/24 support link
    • Unlimited user
    • Best ranking
    • Prenium svg
    • Free Fonts

Navigation

Pagination

Square Style

Rounded Style

Tabs

Default Tabs

Folder Style Tabs

Toggle Style Tabs

Round Toggle Style Tabs