Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

Erik KovalskyProduct Manager
ProfileView your profile

ProjectsAll my projects
TeamManage your team

SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

  • Erik KovalskyProduct Manager
    ProfileView your profile

    ProjectsAll my projects
    TeamManage your team

    SettingsAccount settings

Components

  • Components Hub
  • Colors
  • Helpers
  • Content
  • Table
  • Icons
  • Interaction
  • VDropdown
  • VLoader
  • VPlaceload
  • VPlaceloadText
  • VPlaceloadAvatar
  • VMessage
  • VModal
  • VProgress
  • VTootlip
  • Buttons
  • Forms
  • Switches
  • Display
  • VAvatar
  • VAvatarStack
  • VBlock
  • VIconBox
  • VIconWrap
  • VSnack
  • VTag
  • VFlex
  • VGrid
  • VBreadcrumb
  • VTabs
  • VFlexPagination
  • VFlexTable
  • Accordions
  • Cards
  • Placeholders
  • Addons

Notifications
See all
  • Alice C. left a comment.

    1 hour ago

  • Joshua S. uploaded a file.

    2 hours ago

  • Tara S. sent you a message.

    2 hours ago

  • Melany W. left a comment.

    3 hours ago

  • Components
  • Content

Unordered Lists

By default, using an unordered ul list won't generate an html list. This is part of the Bulma specification. To generate you unordered list, wrap it inside a div with the content class. Lists can also have the is-light modifier to change the text color.

  • Coffee
  • Tea
  • Milk
  • Coffee
  • Tea
  • Milk

Ordered Lists

Ordered lists ol are also genrated using a div with the content class. Ordered list bullets can be controlled with the type attribute. Available types are type="1", type="A", type="a", type="I", type="i"

  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk

Titles

To create a title, you can add the title class to any html element. Title sizes can be controlled with numbered modifiers using the patter is-* where * represents a number between 3 and 6. Titles can also be thinner using the is-thin, bold using the is-bold or bolder using the is-bolder modifier classes.

This is a title

This is a huge title

This is a title

This is a big title

This is a title

This is a medium title

This is a title

This is a smaller title

This is a title

This is a huge bold title

This is a title

This is a big bold title

This is a title

This is a medium bold title

This is a title

This is a smaller bold title

This is a title

This is a huge bolder title

This is a title

This is a big bolder title

This is a title

This is a medium bolder title

This is a title

This is a smaller bolder title

This is a title

This is a huge thin title

This is a title

This is a big thin title

This is a title

This is a medium thin title

This is a title

This is a smaller thin title

Subtitles

To create a subtitle, you can add the subtitle class to any html element. Subtitle sizes can be controlled with numbered modifiers using the patter is-* where * represents a number between 4 and 6.

This is a title

This is a huge subtitle

This is a title

This is a big subtitle

This is a title

This is a medium subtitle

This is a title

This is a smaller subtitle

Blockquotes

Vuero provides blockquote html element styling. Wrap your blockquote element inside a div with the content class. Blockquotes can have different colors. Available color modifier classes are is-primary, is-success, is-info, is-warning and is-danger.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem vobis placet.

Horizontal dividers

Vuero provides dividers for your textual content. You can use horizontal and vertical dividers by passing the divider text as a data-content html attribute. See the code example for more details about usage.

Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.

Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.

Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.

Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.

Tables

You can also use the content class to wrap an html table element to apply minimum styles to your table UI. Please refer to the Vuero components section to find more advanced table examples and layouts.

HeroesPowerAvailability
SupermanAvailable
BatmanUnavailable
DeadpoolUnavailable
SpawnAvailable
GalactusUnavailable