Modifiers
The single list of all modifiers in Kube.
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
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
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
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
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
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
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
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
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
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
is-active |
Makes the tabs item is active |
See the module
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
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