Use is-rounded for displaying rounded corners (default to 0.5rem).
<div class="has-p-6 has-m-2 has-bg-primary is-rounded"> <strong>.is-rounded</strong> </div>
Use is-pill to round it's corners like a pill element:
<div class="has-p-6 has-m-2 has-bg-primary is-pill"> <strong>.is-pill</strong> </div>
Use .is-radiusless to prevent rounded corners in the element:
<div class="has-p-6 has-m-2 has-bg-primary is-radiusless"> <strong>.is-radiusless</strong> </div>
Use the is-shadowed class to apply a shadow to the specified element:
<div class="has-p-6 has-bg-white is-rounded is-shadowed"> <strong>.is-shadowed</strong> </div>
Use the is-shadowless class to remove the shadow of the element:
<div class="has-p-6 has-bg-white is-rounded is-shadowless"> <strong>.is-shadowless</strong> </div>
Use is-clickable for displaying a pointer cursor to indicate a link or an interactive element:
<div class="has-bg-primary has-text-center has-p-3 has-w-64 is-rounded is-clickable"> Pointer </div>
Use is-not-allowed to display a not allowed cursor:
<div class="has-bg-primary has-text-center has-p-3 has-w-64 is-rounded is-not-allowed"> Cursor disabled </div>
Control how elements will be displayed using the following classes:
| Class | Property |
|---|---|
is-hidden | display: none; |
is-inline | display: inline; |
is-block | display: block; |
is-inline-block | display: inline-block; |
is-flex | display: flex; |
is-inline-flex | display: inline-flex; |
Use is-hidden to hide an element:
<div class="has-bg-primary has-p-3 has-ml-2 has-mr-2 has-w-24 is-rounded">1</div> <div class="has-bg-primary has-p-3 has-ml-2 has-mr-2 has-w-24 is-rounded is-hidden">2</div> <div class="has-bg-primary has-p-3 has-ml-2 has-mr-2 has-w-24 is-rounded">3</div>
Use is-block to generate a block-level element:
<span class="has-bg-primary has-p-3 has-m-2 is-rounded is-block">1</span> <span class="has-bg-primary has-p-3 has-m-2 is-rounded is-block">2</span> <span class="has-bg-primary has-p-3 has-m-2 is-rounded is-block">3</span>
Use is-inline-block to generate an inline block element:
<div class="has-bg-primary is-rounded has-p-2"> <div class="has-bg-white has-p-3 has-m-2 is-rounded is-inline-block">1</div> <div class="has-bg-white has-p-3 has-m-2 is-rounded is-inline-block">2</div> <div class="has-bg-white has-p-3 has-m-2 is-rounded is-inline-block">3</div> </div>
You can control the display of an element at a specific breakpoint adding a -{breakpoint} suffix to the display class. For example, to hide an element only on mobile screens, use the class is-hidden-mobile.
<div class="is-block is-hidden-mobile"> . . . </div>
Use the following classes to change the position property of an element:
| Class | Property |
|---|---|
is-relative | position: relative; |
is-absolute | position: absolute; |
is-sticky | position: sticky; |
is-fixed | position: fixed; |
is-top | top: 0px; |
is-bottom | bottom: 0px; |
Example:
<div class="is-fixed is-top"> ... </div>
Use the following classes for positioning and formatting content, for example to wrap text around images.
| Class | Property |
|---|---|
is-aligned-left | float: left; |
is-aligned-right | float: right; |
You can use is-aligned-left to float an element to the left side of it's containing block:
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.
<div class="is-aligned-left has-w-32 has-h-32 has-mr-8 has-bg-primary is-rounded"> <div class="has-w-full has-h-full is-flex has-justify-center"> <i class="si-image has-size-7 has-text-white"></i> </div> </div> <p class="has-text-justified has-mb-none"> 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. </p>
Use is-aligned-right to float an element to the right side of it's containing block:
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.
<div class="is-aligned-right has-w-32 has-h-32 has-ml-8 has-bg-primary is-rounded"> <div class="has-w-full has-h-full is-flex has-justify-center"> <i class="si-image has-size-7 has-text-white"></i> </div> </div> <p class="has-text-justified has-mb-none"> 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. </p>
Use is-scrollable to display scrollbars only if content does not fit inside the padding box of the container:
<div class="is-scrollable has-h-32 has-w-64 has-p-6 has-bg-primary is-rounded"> 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. </div>
Use is-clipped to clip all neccesary content to fit the container size. Note that no scrollbars will be displayed and the user scrolling will be disabled.
<div class="is-clipped has-h-32 has-w-64 has-p-6 has-bg-primary is-rounded"> 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. </div>
Use is-semitransparent to apply an opacity of 0.5 to the specified element
<div class="has-p-6 has-m-2 has-bg-primary is-rounded is-semitransparent"> <strong>.is-semitransparent</strong> </div>
Use is-transparent to make the element full transparent (that is opacity: 0):
<div class="has-p-6 has-m-2 has-bg-primary is-rounded is-transparent"> <strong>.is-transparent</strong> </div>
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.