Modifiers

The single list of all modifiers in Kube.

Alert #

is-error Error status and style for alerts
is-success Success status and style for alerts
is-focus Focus (info) status and style for alerts
is-inverted White background style for alerts (useful for dark themes/backgrounds)

See the module

Button #

is-secondary Secondary style and meaning for buttons
is-tertiary Tertiary style and meaning for buttons
is-disabled Disabled style for buttons
is-inverted White background style for buttons (useful for dark themes/backgrounds)
is-loading Loading indicator into buttons
is-small Small size for buttons
is-big Big size for buttons

See the module

Form #

Input, select, textarea

is-error Error state of inputs
is-success Success state of inputs
is-disabled Disabled state of inputs
is-search Search icon into inputs

Helpers

is-checkbox Checkbox style for label element
is-desc Description style for span/div elements
is-req Required style for asterisks

Form item

is-inline Allows to make the label of input on the left side
is-inline-offset Adds the left shift for the form item if it is inline
is-bar Makes all form elements in one line
is-buttons Sets the additional spacing between buttons in the form item
is-append Allows to make the input in the form item with an appended element
is-prepend Allows to make the input in the form item with a prepended element

See the module

Grid #

is-row Makes the element as a grid row
is-col Makes the element as a grid column
is-bricks Allows to use columns as bricks in one row
is-gapless Removes the gap between grid columns

See the module

Helpers #

Position

is-fixed Fixed position for element
is-relative Relative position for element

Display

is-invisible Visibility hidden for element
is-relative Visibility visible for element
is-hidden Hides element
is-hidden-mobile Hides element on the mobile devices
is-hidden-print Hides element on when printing a page
is-shown-mobile Shows element on the mobile devices

Position

is-shadow-1 Small shadow on the element
is-shadow-2 Medium shadow on the element
is-shadow-3 Big shadow on the element

Border

is-border Border around the element
is-border-top Border at the top of the element
is-border-bottom Border at the bottom of the element
is-border-radius Rounded corners of the element

Scroll

is-scrollable Makes the element scrollable if it is overflowed
is-no-scroll Disables scrolling of the element on two sides
is-no-scroll-x Disables the horizontal scroll of the element

Misc

is-video-container Makes video in the iframe responsive
is-loading Adds the loading indicator into the element

Close

is-big Big the close icon
is-large Large the close icon

See the module

Label #

is-secondary Secondary style and meaning for labels
is-tertiary Tertiary style and meaning for labels
is-badge Badge style for labels

See the module

Layout #

is-container Display flex to the container and the flex-direction column on the mobile devices
is-container-row Display flex and the flex-direction row to the container on all devices
is-container-column Display flex and the flex-direction column to the container on all devices
is-items-middle Makes the items in the container vertically centered and aligns it top left on the mobile devices
is-center Makes the container centered if it has a width
is-left-mobile Moves the centered container to the left on the mobile devices
is-push-right Pushes the element to the right edge of container and moves it to the left on the mobile devices
is-push-right-mobile Pushes the element to the right edge of container on the mobile devices

See the layout section in the Helpers module

Pager #

is-stacked Makes the pager as left/right navigation stack

Items

is-prev Style for the previous item in the pager
is-next Style for the next item in the pager
is-disabled Disabled state for the item in the pager
is-current Current state for the item in the pager
is-prev Active state for the item in the pager

See the module

Spacing #

Set

is-inset-2 - is-inset-120 Sets the padding on all sides of the container.
is-inset-x-2 - is-inset-x-120 Sets the padding on the left and right side of the container.
is-inset-y-2 - is-inset-y-120 Sets the padding on the top and bottom side of the container.
is-inset-top-2 - is-inset-top-120 Sets the padding on the top side of the container.
is-inset-bottom-2 - is-inset-bottom-120 Sets the padding on the bottom side of the container.
is-inset-left-2 - is-inset-left-120 Sets the padding on the left side of the container.
is-inset-right-2 - is-inset-right-120 Sets the padding on the right side of the container.
is-outset-2 - is-outset-120 Sets the margin around all sides of the container.
is-outset-x-2 - is-outset-x-120 Sets the margin from the left edge and from the right edge of the container.
is-outset-y-2 - is-outset-y-120 Sets the margin from the top edge and from the bottom edge of the container.
is-stack-2 - is-stack-120 Sets the bottom margin of the container.
is-col-stack-2 - is-col-stack-120 Sets the bottom margin of each grid column (with .is-col class) in the row.

Remove

is-inset-x-none Removes the padding from the left and right side of the container.
is-inset-none Removes the padding from all sides of the container.
is-inset-y-none Removes the padding from the top and bottom side of the container.
is-inset-top-none Removes the padding from the top side of the container.
is-inset-bottom-none Removes the padding from the bottom side of the container.
is-inset-right-none Removes the padding from the right side of the container.
is-inset-left-none Removes the padding from the left side of the container.
is-outset-none Removes the margin from the container.
is-outset-x-none Removes the left and right margin from the container.
is-outset-y-none Removes the top and bottom margin from the container.
is-stack-none Removes the bottom margin from the container.
is-col-stack-none Removes the bottom margin from each grid column (with .is-col class) in the row.

See the module

Table #

is-border Border on all sides of the cells in the table
is-striped Zebra style for the table rows
is-middle Vertical centering for cells content in the table (uses for tbody, tr or td)
is-nowrap Makes white space nowrap in the table cell
is-responsive Makes the table responsive on the mobile devices
is-table-container Makes the table container (wrapper) responsive on the mobile devices

See the module

Tabs #

is-active Makes the tabs item is active

See the module

Typography #

Lists

is-bar Makes the list items in one line
is-unstyled Removes the margin and bullets from the list

Size

is-large Large text
is-big Big text
is-small Small text
is-smaller Smaller text

Align

is-text-center Centered text
is-text-right Aligns text to the right
is-text-left-mobile Left text on the mobile devices
is-text-right-mobile Right text on the mobile devices
is-text-center-mobile Center text on the mobile devices

Color

is-muted Makes text or links is muted with 60% opacity
is-color-black Sets the black color for the links

Misc

is-nowrap Adds white space nowrap to the text
is-highlight Highlights text background

See the module

Width #

is-width-large Large width for the container
is-width-medium Medium width for the container
is-width-small Small width for the container
is-10 10% width
is-20 20% width
is-25 25% width
is-30 30% width
is-33 33.3333% width
is-34 33.3333% width
is-35 35% width
is-40 40% width
is-50 50% width
is-60 60% width
is-65 65% width
is-66 66.6666% width
is-67 66.6666% width
is-70 70% width
is-75 75% width
is-80 80% width
is-90 90% width
is-100 100% width

See the width section in the Helpers module