Display

vel-src: layout.css

Utilities for controlling the display type of an element.

Class	Properties
vel-block	display: block
vel-inline-block	display: inline-block
vel-inline	display: inline
vel-flex	display: flex
vel-inline-flex	display: inline-flex
vel-grid	display: grid
vel-inline-grid	display: inline-grid
vel-hidden	display: none
vel-contents	display: contents
vel-table	display: table
vel-table-row	display: table-row
vel-table-cell	display: table-cell

Examples

Block vs inline

vel-block vel-inline-block vel-inline

example.html

<div class="vel-flex vel-gap-4 vel-items-center vel-flex-wrap">
  <span class="vel-block vel-bg-primary vel-text-white vel-rounded-md vel-text-center" style="padding:8px 16px;width:120px">vel-block</span>
  <span class="vel-inline-block vel-bg-success vel-text-white vel-rounded-md" style="padding:8px 16px">vel-inline-block</span>
  <span class="vel-inline vel-bg-info vel-text-white vel-rounded-md" style="padding:4px 12px">vel-inline</span>
</div>

Flex and Grid

Flex item

Grid 1

Grid 2

Grid 3

example.html

<div class="vel-flex vel-gap-3 vel-mb-4">
  <div class="vel-text-center vel-rounded-md" style="background:#7c5cfc20;border:1px solid #7c5cfc40;color:#a87fff;padding:12px 20px">Flex item</div>
  <div class="vel-text-center vel-rounded-md" style="background:#7c5cfc20;border:1px solid #7c5cfc40;color:#a87fff;padding:12px 20px">Flex item</div>
  <div class="vel-text-center vel-rounded-md" style="background:#7c5cfc20;border:1px solid #7c5cfc40;color:#a87fff;padding:12px 20px">Flex item</div>
</div>
<div class="vel-grid vel-grid-cols-3 vel-gap-3">
  <div class="vel-text-center vel-rounded-md" style="background:#0ecb8120;border:1px solid #0ecb8140;color:#0ecb81;padding:12px">Grid 1</div>
  <div class="vel-text-center vel-rounded-md" style="background:#0ecb8120;border:1px solid #0ecb8140;color:#0ecb81;padding:12px">Grid 2</div>
  <div class="vel-text-center vel-rounded-md" style="background:#0ecb8120;border:1px solid #0ecb8140;color:#0ecb81;padding:12px">Grid 3</div>
</div>