Max-Width

vel-src: sizing.css

Utilities for setting the maximum width of an element.

Class	Properties
vel-max-w-none	max-width: none
vel-max-w-xs	max-width: 20rem
vel-max-w-sm	max-width: 24rem
vel-max-w-md	max-width: 28rem
vel-max-w-lg	max-width: 32rem
vel-max-w-xl	max-width: 36rem
vel-max-w-2xl	max-width: 42rem
vel-max-w-3xl	max-width: 48rem
vel-max-w-4xl	max-width: 56rem
vel-max-w-5xl	max-width: 64rem
vel-max-w-6xl	max-width: 72rem
vel-max-w-full	max-width: 100%
vel-max-w-screen	max-width: 100vw

Examples

Max-width scale

vel-max-w-xs (20rem)

vel-max-w-sm (24rem)

vel-max-w-md (28rem)

example.html

<div class="vel-flex vel-flex-col vel-gap-3">
  <div class="vel-max-w-xs vel-bg-primary vel-text-white vel-rounded-md" style="padding:10px 16px;font-size:13px">vel-max-w-xs (20rem)</div>
  <div class="vel-max-w-sm vel-bg-success vel-text-white vel-rounded-md" style="padding:10px 16px;font-size:13px">vel-max-w-sm (24rem)</div>
  <div class="vel-max-w-md vel-bg-info vel-text-white vel-rounded-md" style="padding:10px 16px;font-size:13px">vel-max-w-md (28rem)</div>
</div>