Skip to main content
Rivet Design System Indiana University

Width

Set width

Overview #

Use the width utilities to set the width of an element.

Width utility classes are especially useful for form inputs, which should have their widths constrained to match the expected length of the information you’re asking someone to give you.

For example, a form field asking someone for their ZIP code should be much smaller than one asking for their street address.

Examples #


Open in new window
Copy link to example 
<div class="rvt-width-xxs">
  <label class="rvt-label" for="input-1">xxs</label>
  <input class="rvt-text-input" type="text" id="input-1">
</div>

<div class="rvt-width-xs rvt-m-top-lg">
  <label class="rvt-label" for="input-2">xs</label>
  <input class="rvt-text-input" type="text" id="input-2">
</div>

<div class="rvt-width-sm rvt-m-top-lg">
  <label class="rvt-label" for="input-3">sm</label>
  <input class="rvt-text-input" type="text" id="input-3">
</div>

<div class="rvt-width-md rvt-m-top-lg">
  <label class="rvt-label" for="input-4">md</label>
  <input class="rvt-text-input" type="text" id="input-4">
</div>

<div class="rvt-width-lg rvt-m-top-lg">
  <label class="rvt-label" for="input-5">lg</label>
  <input class="rvt-text-input" type="text" id="input-5">
</div>

<div class="rvt-width-xl rvt-m-top-lg">
  <label class="rvt-label" for="input-6">xl</label>
  <input class="rvt-text-input" type="text" id="input-6">
</div>

<div class="rvt-width-xxl rvt-m-top-lg">
  <label class="rvt-label" for="input-7">xxl</label>
  <input class="rvt-text-input" type="text" id="input-7">
</div>

<div class="rvt-width-3-xl rvt-m-top-lg">
  <label class="rvt-label" for="input-8">3-xl</label>
  <input class="rvt-text-input" type="text" id="input-8">
</div>

<div class="rvt-width-4-xl rvt-m-top-lg">
  <label class="rvt-label" for="input-9">4-xl</label>
  <input class="rvt-text-input" type="text" id="input-9">
</div>
Open in new window
Copy link to example 
<div class="rvt-width-xxs-md-up">
  <label class="rvt-label" for="input-8">xxs-md-up</label>
  <input class="rvt-text-input" type="text" id="input-8">
</div>

<div class="rvt-width-xs-md-up rvt-m-top-lg">
  <label class="rvt-label" for="input-9">xs-md-up</label>
  <input class="rvt-text-input" type="text" id="input-9">
</div>

<div class="rvt-width-sm-md-up rvt-m-top-lg">
  <label class="rvt-label" for="input-10">sm-md-up</label>
  <input class="rvt-text-input" type="text" id="input-10">
</div>

<div class="rvt-width-md-lg-up rvt-m-top-lg">
  <label class="rvt-label" for="input-11">md-lg-up</label>
  <input class="rvt-text-input" type="text" id="input-11">
</div>

<div class="rvt-width-lg-md-up rvt-m-top-lg">
  <label class="rvt-label" for="input-12">lg-md-up</label>
  <input class="rvt-text-input" type="text" id="input-12">
</div>

<div class="rvt-width-xl-lg-up rvt-m-top-lg">
  <label class="rvt-label" for="input-13">xl-lg-up</label>
  <input class="rvt-text-input" type="text" id="input-13">
</div>

<div class="rvt-width-xxl-xl-up rvt-m-top-lg">
  <label class="rvt-label" for="input-14">xxl-xl-up</label>
  <input class="rvt-text-input" type="text" id="input-14">
</div>

<div class="rvt-width-3-xl-lg-up rvt-m-top-lg">
  <label class="rvt-label" for="input-15">3-xl-lg-up</label>
  <input class="rvt-text-input" type="text" id="input-15">
</div>

<div class="rvt-width-4-xl-xl-up rvt-m-top-lg">
  <label class="rvt-label" for="input-16">4-xl-xl-up</label>
  <input class="rvt-text-input" type="text" id="input-16">
</div>
Open in new window
Copy link to example 
<div class="rvt-flex">
  <div class="rvt-width-xl rvt-m-right-md">
    <label for="input-8">Flex inputs</label>
    <input class="rvt-text-input" type="text" id="input-8">
  </div>
  
  <div class="rvt-width-sm">
    <label for="input-9">Flex inputs</label>
    <input class="rvt-text-input" type="text" id="input-9">
  </div>
</div>

Usage #

You can constrain the width of a block-level element by applying one of the classes listed below:

CSS class rem px
.rvt-width-xxs 4rem 64px
.rvt-width-xs 8rem 128px
.rvt-width-sm 12rem 192px
.rvt-width-md 16rem 256px
.rvt-width-lg 20rem 320px
.rvt-width-xl 24rem 384px
.rvt-width-xxl 32rem 512px
.rvt-width-3-xl 40rem 640px
.rvt-width-4-xl 48rem 768px

Setting responsive widths #

Each width utility class comes with a set of modifiers that allow you to specify the screen size at which the constrained width should take effect.

<div class="rvt-width-sm-lg-up">
    <!-- markup -->
</div>

In the example above, the div would have a width of 12rem/192px (sm), but only on large screens (1080px wide) and up.

All width utility classes have the following responsive modifiers available to them:

  • -sm-up - screens 480–740px and wider
  • -md-up - screens 740–1080px and wider
  • -lg-up - screens 1080–1260px and wider
  • -xl-up - screens 1260–1400px and wider
  • -xxl-up - screens 1400px and wider