Borders, radius, widths and heights and other classes

Borders

Use border classes to add or remove borders on your element.

Here are all the supported classes:

  • .border
  • .border-top
  • .border-bottom
  • .border-left
  • .border-right
  • .border-0
  • .border-top-0
  • .border-bottom-0
  • .border-left-0
  • .border-right-0
.border .border-top .border-right .border-bottom .border-left
.border-0 .border-top-0 .border-right-0 .border-bottom-0 .border-left-0

Border radius

Use border radius classes to add border-radius or to remove it from on your element.

Here are all the supported classes:

  • .rounded
  • .rounded-0
  • .rounded-10
  • .rounded-20
  • .rounded-circle
  • .rounded-top, .rounded-right, .rounded-bottom, .rounded-left
.rounded-0 .rounded .rounded-10 .rounded-20 .rounded-circle
.rounded-top .rounded-right .rounded-bottom .rounded-left

Horizontal divider

hr tag element.





hr with .hr-dotted class





hr with .hr-nc-dotted class





Width and height

Add 100% width/max-width or height/max-height to your div.

Here are all the supported classes:

  • .w-100 width: 100%;
  • .h-100 height: 100%;
  • .mw-100 max-width: 100%;
  • .mh-100 max-height: 100%;

Overflow

Helper classes for controlling how an element handles content that is too large for the container.

  • .overflow-auto overflow: auto;
  • .overflow-hidden overflow: hidden;
  • .overflow-visible overflow: visible;
  • .overflow-scroll overflow: scroll;

  • .overflow-x-auto overflow-x: auto;
  • .overflow-x-hidden overflow-x: hidden;
  • .overflow-x-visible overflow-x: visible;
  • .overflow-x-scroll overflow-x: scroll;

  • .overflow-y-auto overflow-y: auto;
  • .overflow-y-hidden overflow-y: hidden;
  • .overflow-y-visible overflow-y: visible;
  • .overflow-y-scroll overflow-y: scroll;

Visibility

Use visibility classes to add display or to hide and element.

Here are all the supported classes:

  • .visibile
  • .invisible

Show and hide element only on dark/light mode

Use this classes classes to show and element only on light mode or only on dark mode.

Here are the supported classes:

  • .show-on-light - visible only on light mode
  • .show-on-dark - visible only on light mode
Show logo on light mode: Visma logo Show logo on dark mode: Visma logo 
				
<!-- Borders -->
<div class="border">Add border to this div</div>
<div class="border-top">Add top border on this div</div>
<div class="border-bottom-0">Remove the bottom border on this div</div>

<!-- Radius -->
<div class="rounded">Add the default rounded corners (5px) to this element (div/image/etc.)</div>
<div class="rounded-0">Remove the rounded corners of this element (div/image/etc.)</div>
<div class="rounded-10">Add the 10px rounded corners to this element (div/image/etc.)</div>
<div class="rounded-20">Add the 20px rounded corners to this element (div/image/etc.)</div>
<div class="rounded-circle">Make this element (div/image/etc.) a circle</div>

<div class="rounded-top">Add the default rounded corners (5px) to the top left and right corners of this element (div/image/etc.)</div>
<div class="rounded-right">Add the default rounded corners (5px) to the top right and bottom right corners of this element (div/image/etc.)</div>
<div class="rounded-bottom">Add the default rounded corners (5px) to the bottom left and right corners of this element (div/image/etc.)</div>
<div class="rounded-left">Add the default rounded corners (5px) to the bottom left and top left corners of this element (div/image/etc.)</div>

<!-- Horizontal divider -->
<hr class="hr-default">
<hr class="hr-primary">
<hr class="hr-disabled">
<hr class="hr-error">
<!-- Dotted divider -->
<hr class="hr-dotted">
<hr class="hr-dotted hr-primary">
<hr class="hr-dotted hr-disabled">
<hr class="hr-dotted hr-error">
<!-- NC dotted divider -->
<hr class="hr-nc-dotted">
<hr class="hr-nc-dotted hr-primary">
<hr class="hr-nc-dotted hr-disabled">
<hr class="hr-nc-dotted hr-error">




<!-- Overflow -->
<div class="overflow-hidden"> ... </div>
<div class="overflow-x-scroll"> ... </div>
<!-- or with breakpoints -->
<div class="overflow-x-xs-auto"> for min-width: 550px and up </div>
<div class="overflow-x-sm-auto"> for min-width: 769px and up </div>
<div class="overflow-x-md-auto"> for min-width: 992px and up </div>
<div class="overflow-x-lg-auto"> for min-width: 1280px and up </div>
<div class="overflow-x-xl-auto"> for min-width: 1440px and up </div>
<div class="overflow-x-xxl-auto"> for min-width: 1680px and up </div>

<!-- Visibility -->
<div class="visible"> ... </div>
<div class="invisible"> ... </div>

<!-- Show/Hide on dark/light mode -->
<img src="..." class="show-on-light"> 
<img src="..." class="show-on-dark">