Others

Blockquote#

This is a blockquote, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis assumenda sapiente blanditiis ratione iure amet quae, dolorum laudantium necessitatibus earum facilis quas placeat velit voluptas porro tenetur praesentium? Saepe, maiores.

<blockquote class="blockquote">
  This is a blockquote, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis assumenda sapiente blanditiis ratione iure
  amet quae, dolorum laudantium necessitatibus earum facilis quas placeat velit voluptas porro tenetur praesentium? Saepe, maiores.
</blockquote>

Truncate class#

The .truncate makes your text able to truncate himself.

<div style="width: 15rem;">
  <div class="card shadow-1 primary">
    <div class="card-content truncate">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis eius necessitatibus consectetur aut culpa veniam, sapiente
      minima non recusandae impedit magnam iure numquam quia, fugiat modi pariatur animi odit dicta.
    </div>
  </div>
</div>

Divider class#

The .divider class is creating a horizontal line, taking the full width of your element.
This is helpful to separate content.

<div class="card shadow-1 secondary">
  <div class="card-header">Header</div>
  <div class="divider"></div>
  <div class="card-content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis eius necessitatibus consectetur aut culpa veniam, sapiente
    minima non recusandae impedit magnam iure numquam quia, fugiat modi pariatur animi odit dicta. hello
  </div>
</div>

Responsive medias#

Using medias, you should want to make it fit your page.
The .responsive-media class works for the images and the videos.
This is helpful when you want a high definition image to be resized. See an example on the lightbox page.

<!-- This is a 1920x1080 image, but it fits the container of the page -->
<img src="https://picsum.photos/1920/1080" alt="random image" class="responsive-media">

Cursors#

The cursors classes allow you to modify the cursor appearance when you hover the element.
The classes are .cursor-{cursorName} where cursorName can be :
default | pointer | not-allowed | grab | wait | zoom-in | zoom-out | none

Example :

Adding the .cursor-pointer class change the cursor to a pointer on all the element.

Overflow#

The overflow classes allow you to modify the overflow of the element.
The classes are .overflow-{propertyName}, .overflow-x-{propertyName} and .overflow-y-{propertyName}
where propertyName can be :
hidden | scroll | auto | visible | initial | inherit

The .overflow-x- and the .overflow-y- prefixes are applying the overflow property on the X and Y axes, while the simple .overflow- prefix apply the property for the X and Y axes.

Opacity#

The opacity classes allow you to modify the opacity of the element.
The classes are .opacity-{value}, where value can be :
0 | 10 | 20 | ... | 100

Positions#

Z-index#

The z-index classes allow you to modify the z-index of the element.
The classes are .z-index-{value}, where value can be :
0 | 1 | 2 | ... | 10

Others#