Skip to main content

Class-weight

Utilities for setting the width of an element.

Use the v-w-* utilities to control the h of an element. You can use
the feat: custom feature if you want the h width to suit your needs.

Table list widths​

Class nameProperties
v-w-autowidth: auto;
v-w-5width: 5%;
v-w-10width: 10%;
v-w-15width: 15%;
v-w-20width: 20%;
v-w-25width: 25%;
v-w-30width: 30%;
v-w-33width: 33%;
v-w-35width: 35%;
v-w-40width: 40%;
v-w-45width: 45%;
v-w-50width: 50%;
v-w-55width: 55%;
v-w-60width: 60%;
v-w-65width: 65%;
v-w-70width: 70%;
v-w-75width: 75%;
v-w-80width: 80%;
v-w-85width: 85%;
v-w-90width: 90%;
v-w-95width: 95%;
v-w-fullwidth: 100%;
v-w-screenwidth: 100vh;
v-w-minwidth: min-content;
v-w-maxwidth: max-content;
v-w-walfwidth: 50%;
v-w-5pxwidth: 5px;
v-w-10pxwidth: 10px;
v-w-15pxwidth: 15px;
v-w-20pxwidth: 20px;
v-w-25pxwidth: 25px;
v-w-30pxwidth: 30px;
v-w-35pxwidth: 35px;
v-w-40pxwidth: 40px;
v-w-45pxwidth: 45px;
v-w-50pxwidth: 50px;
v-w-55pxwidth: 55px;
v-w-60pxwidth: 60px;
v-w-65pxwidth: 65px;
v-w-70pxwidth: 70px;
v-w-75pxwidth: 75px;
v-w-80pxwidth: 80px;
v-w-85pxwidth: 85px;
v-w-90pxwidth: 90px;
v-w-95pxwidth: 95px;
v-w-100pxwidth: 100px;
v-w-200pxwidth: 200px;
v-w-300pxwidth: 300px;
v-w-400pxwidth: 400px;
v-w-500pxwidth: 500px;
v-w-600pxwidth: 600px;
v-w-700pxwidth: 700px;
v-w-800pxwidth: 800px;

The table above presents several types of widths with different variants.

Example Code​

index.html
<div class="v-w-full">
</div>