Utilities

  • u-bgWhite makes the background color white.
  • u-bgGray makes the background color gray.
  • u-bgGrayTarget makes the background color gray when the element is the :target (when its ID matches the current hash)

Gray container.

White container.

<div class="u-bgGray u-pad1 u-spaceItems1">
  <p>Gray container.</p>
  <div class="u-bgWhite u-pad1">
    <p>White container.</p>
  </div>
</div>

Add, remove or apply radii to borders.

  • u-borderNone removes all borders.
  • u-borderSm applies a thin border to all sides.
  • u-borderMd applies a thick border to all sides.
  • u-borderWidthSm applies a thin border-width but does not set its color.
  • u-borderWidthMd applies a thick border-width but does not set its color.

Any of the above utilities can also be applied to specific edges by including Top, Bottom, Left or Right before the thickness. For example:

  • u-borderTopNone removes any top border.
  • u-borderBottomSm applies a thin border to the bottom edge.
  • u-borderLeftMd applies a thick border to the left edge.
  • u-borderRightWidthSm makes the element's right edge border thin.

There is also a u-sm-borderRadius utility to round corners starting from the --sm-viewport breakpoint. It is particularly useful in combination with Thumbnail.

Thick border
Thin border
  • Top
  • Bottom
  • Left
  • Right
<div class="u-borderMd u-pad1">
  Thick border
</div>

<div class="u-borderSm u-pad1">
  Thin border
</div>

<ul class="u-listInline">
  <li class="u-borderTopMd u-pad1">Top</li>
  <li class="u-borderBottomMd u-pad1">Bottom</li>
  <li class="u-borderLeftMd u-pad1">Left</li>
  <li class="u-borderRightMd u-pad1">Right</li>
</ul>
  • u-columns2 divides content into two columns.
  • u-columns3 divides content into three columns.
  • u-sm-columns2 divides content into two columns starting at the --sm-viewport breakpoint.
  • u-lg-columns3 divides content into three columns starting at the --lg-viewport breakpoint.

This text will flow into two columns. Rufbo wozcazel sinanmej gufna gos nolerun fiodi raheked ramugjoz ivote vimopad jiehuepu sam avesa taw owwik donan kicac. Fifejahi pevuad narhozor mi uliceum iheas ogtuka olbiwwab gimsihi rawi sunaf su ziwek huc up lad voz. Kumi ikeig lu dabzov vaune ivofoc vu re tamne oderuici mirpu meg todli hocatow luwkeh rihibti do durdu. Lepedpi boztenu ira uwu vomag jugriw eglud liho le irobuw mi me ted. Fuahufet puzdephig wi buc vu metofpud kutumro mokjo genebi gipunvar ki uweafa pobhugaz romahzu acedejlo odpe po. Aluku fazu uj nemas dakzu ke mo hupfo ugpu finzek ja tel pin kufjis mi kudje tunnuuv ta. Oluborud cion dagnuwnap ivmob cava meju ihu hoses ibucoh diw fov lop hesak kedonfom goneso bemvu.

This text will flow into three columns. Zowaw ohide jirtig vawceli gugluceru nip soji hughal liawuso vinwo is viag. Pomrevduf em evu fam zuni cogod wamfoza norseiha jacowmew bo socjom loopodel ekguneku osu uliogone si hoha jorwij. Dezosnur gufij uwinuhi gacenfar muve fuwo il ronuhehok tiode gocuik ofrigo ijfocur bece kojakmat. Tetodi ka mutcib obeikbaz kin noksok tijiwuroc zive nimnin dugzuv bomomjo pefper rozkiskob. Co vatipi kafugga kilroam az lomizilan hoc pidispa fusnod koguc tav nopvaroh ela coj va fihpama hejbec ce.

This text may flow into one, two or three columns based on the viewport. Oci bopuco ar fici edi jucvaap edugu ki habboiw cepol wiaj oherukeg. Tokji epmebhet mis detjus daun usvazad kibovi ako fusu arogefruv tejahsav kalze sa avu doajmow pokar apeafehi. Vonucreh ogefame tijehoz takdo mik me huhamiz ifovol pecihsub nu sirik kaid wa. Uzu zu rih kar ebves iknur sasravud fabne tasavhe itdo ketul omipinu ke seihja. Mi punotmu oje isunodajo luckiw zeen ge bup va ut des unepto ajepe edu ugerobe ziloce uwzek. Udrab bipjitwe ca on vujirisu le jufitu osoac og ud ado woruj.

<p class="u-columns2">
  <b>This text will flow into two columns.</b> Lurev kipada kawnez
  cop vew mucemkir ik fa bowsa dizjiroj amaavop macdemop ugdadkon
  feb. Ned ferukut bakebal masso johfe leshukag kis ra kof sitalu
  id niwu topipu. Avfo du dugus ehezaba oba acdo sopzi zazotre
  bolten sukba roihme asaduha fidil kun sap. Hijotu zo zaji wout
  saena le isacu wagbe hicegpi ebkijeh ime jup fum kuzese kolojzo
  ovazo gupu. Jujcauze ufefi isonewu suf renkephiv coatjol teojove
  kafohim awjapceb jej suad faojsu ofnoj zoh. Le pemofow pa dowjoj
  kovfen ar nuh uhsab kojurzi pap oja jeverub nat piagtiw. Ebo
  kerkojo ak ce pefapa me ri deftipa mifak jilipli tiiga cunawieje
  huzeoho.
</p>

<p class="u-columns3">
  <b>This text will flow into three columns.</b> Fo jit pom zuhgaad
  si cekpu ratu doslovo kinoj tapruhmo pavcapsu or wep. Regfor
  kudtubej booz zeszu lu pivolur fugzimgu gawbetdit zuve zovgot
  atzopcug pi ja apkiwre. Moliaw puhsog kekuv favibo suwacka
  zolewew avlu du ehbuj miimi li zabne lo tizvepur oja wom ewi
  wakhefo. Lomcita vetjoclu belujsev vir dovhe wagan manahbon
  da mi ga dof wokcerfi. Ovanefje zepfes gu ku tarevro tirbe
  inkoup udihisnew tiflekud zoh derfevfeb daid lan laweli. Uwo
  mem fuw lafumiaz cudbis gamebi cip vara ru nidiji utitne toukuwe
  jikuhud. Ruosu op jozoc ijluz nilef dirbobub luc mazeaku nuhtiji
  binwaego rihewa gaturos can senam hasoftop jobjiwiv dupdulroh
  ravdaofo.
</p>

<p class="u-sm-columns2 u-lg-columns3">
  <b>This text may flow into one, two or three columns based on the viewport.</b>  Kekadab rezsizin limewo ne juupo palupo ekuhafdeh mapahur hobo
  gulwedi nun calos igeaf. Togwe fokatat laog efodulet ivjo gibjimiv
  sohkijo wi onaj huswuc doelcek tu josjovvo dik keprebov. Juhgeak
  ca te bohi iladze acikozdi mo buthe os essorzo lojsol cogotaj
  tofof uhakub vog hecka. Negu evuri jedsasbi sucga heknekel
  vogo itemo puwitah wel ceraf upiep lapkevi tin. Kael vag ricfo
  ezli misurmop zocuvni goc umcutemo nuzoffif fuzic row udvoto
  itcan. Wuljovguk fivurheb ejokeoh aniface dulamaj okpudwel
  rorusodub ara uhobazfi upu mokajeb lulam fumhooj so lava edovo
  utigilpu ur.
</p>

Includes the standard SUIT CSS display utilities:

  • u-block sets display to block.
  • u-hidden sets display to none.
  • u-hiddenVisually visually hides element in an accessible way.
  • u-inline sets display to inline.
  • u-inlineBlock sets display to inline-block.
  • u-table sets display to table.
  • u-tableCell sets display to table-cell.
  • u-tableRow sets display to table-row.

Also includes responsive versions of u-hidden, u-block and u-inlineBlock, as well as a responsive utility that counteracts previous application of u-hiddenVisually. Examples:

  • u-sm-block sets display to block starting at --sm-viewport.
  • u-md-inlineBlock sets display to inline-block starting at --md-viewport.
  • u-lg-hidden sets display to none starting at --lg-viewport.
  • u-lg-showVisually sets all the properties from u-visuallyHidden back to initial to restore the element's visual appearance.

Also includes two original utilities:

  • u-hiddenTillFocus works like u-hiddenVisually, except the element is displayed if it receives keyboard focus.
  • u-testBlock makes an element's dimensions inspectable by JavaScript without displaying it visually.
Block Span
Inline Block Div
<span class="u-block u-borderMd u-pad1">
  Block Span
  <div class="u-inlineBlock u-borderMd u-pad1">
    Inline Block Div
  </div>
</span>

Includes all SUIT CSS flexbox utilities (too numerous to list here), with one custom addition:

  • u-flexShrink0 prevents element from shrinking below its natural width.

Example

Sugwumem se gikipta vafim zih gedpudsaj wih ha jejuv kemgulzu cetkemvu avine vakofsad iga eduwodcu wobnevzig hufzetezi vawihvof. Ha du are fi lavwur dujkek ut ewuuku ijras ji eba zuretib egecew rize.

<div class="u-flex u-flexAlignItemsStretch">
  <p class="u-borderMd u-pad1">
    Example
  </p>
  <p class="u-borderMd u-pad1 u-flexGrow1">
    Egi weisuf cowkimo jojezak boj nasezwal gehaomo rellasod miwnelhiw
    dois opdapnez lizmafoz wapepuma ticjirsop je uv cevesohas
    vuhaj. Bon inakod kuca faz jedgeg de uruka ceocjil rupkoset
    rurku nuib libo si icivdu unbigco bifhe.
  </p>
</div>

Includes the standard SUIT CSS layout utilities:

  • u-cf contain floats (micro clearfix).
  • u-nbfc creates a new block formatting context.
  • u-nbfcAlt creates a new block formatting context (alternative technique).
  • u-floatLeft floats left.
  • u-floatRight floats right.

Also includes responsive versions of the float utilities:

  • u-sm-floatLeft
  • u-md-floatLeft
  • u-lg-floatLeft
  • u-sm-floatRight
  • u-md-floatRight
  • u-lg-floatRight
Responsive, contained float
<div class="u-cf u-borderMd u-pad1">
  <div class="u-borderMd u-pad1 u-floatRight u-sm-floatLeft u-md-floatRight u-lg-floatLeft">
    Responsive, contained float
  </div>
</div>

Includes the standard SUIT CSS link utilities:

  • u-linkBlock makes link block-level with no text-decoration for any state.
  • u-linkClean removes text-decoration for any state.
  • u-linkComplex limits a link's interactive text-decoration underline to a sub-section of the link text.

Also includes additional utilities for revealing links on interaction:

  • u-linkEnter colors the element on focus or hover.
  • u-linkTarget reapplies the link color regardless of parent utility.
<p>
  <a class="u-linkClean" href="#">Clean link</a>
</p>

<a href="#" class="u-linkBlock u-pad1 u-borderMd">
  Block link
</a>

<p>
  <a href="#" class="u-linkEnter">
    Link style on hover/focus
  </a>
</p>

Utilities for styling ordered or unordered lists.

  • u-listUnstyled removes list item indicators and default whitespace.
  • u-listInline arranges items in a wrapping inline list with gaps in-between.
  • u-listColumns allows list style to be combined with column utilities.
  • Unstyled item 1
  • Unstyled item 2
  • Unstyled item 3
  • Inline item 1
  • Inline item 2
  • Inline item 3
  • Column item 1
  • Column item 2
  • Column item 3
  • Column item 4
  • Column item 5
  • Column item 6
<ul class="u-listUnstyled">
  <li>Unstyled item 1</li>
  <li>Unstyled item 2</li>
  <li>Unstyled item 3</li>
</ul>

<ul class="u-listInline">
  <li>Inline item 1</li>
  <li>Inline item 2</li>
  <li>Inline item 3</li>
</ul>

<ul class="u-listColumns u-columns3">
  <li>Column item 1</li>
  <li>Column item 2</li>
  <li>Column item 3</li>
  <li>Column item 4</li>
  <li>Column item 5</li>
  <li>Column item 6</li>
</ul>

Includes the standard SUIT CSS proportional offset utilities:

  • u-beforeXofY specifies the proportional offset before an object.
  • u-afterXofY specifies the proportional offset before an object.

Also includes special negative variations of these same classes:

  • u-beforeNXofY pulls the object this much left.
  • u-afterNXofY pulls the object this much right.

X must be an integer less than Y.

Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

These can be limited to specific breakpoints. For example:

  • u-sm-beforeXofY
  • u-md-afterXofY
  • u-lg-beforeNXofY
1/4 before
1/2 before
3/4 before
3/4 after
1/2 after
1/4 after
<div class="u-before1of4 u-borderMd u-pad06">
  1/4 before
</div>
<div class="u-before1of2 u-borderMd u-pad06">
  1/2 before
</div>
<div class="u-before3of4 u-borderMd u-pad06">
  3/4 before
</div>
<div class="u-after3of4 u-borderMd u-pad06">
  3/4 after
</div>
<div class="u-after1of2 u-borderMd u-pad06">
  1/2 after
</div>
<div class="u-after1of4 u-borderMd u-pad06">
  1/4 after
</div>

Includes all standard SUIT CSS position utilities:

  • u-posAbsolute absolutely positions an element.
  • u-posAbsoluteCenter absolutely positions and centers an element.
  • u-posFit fits an element to the dimensions of its parent.
  • u-posFullScreen fixes an element over the viewport.
  • u-posFixed fixed positions an element.
  • u-posFixedCenter fixes an element in the center of the viewport
  • u-posRelative relatively positions an element.
  • u-posStatic static positions an element.

Also includes additional utilities that extend the standard ones:

  • u-posAbsoluteTopCenter
  • u-posAbsoluteTopLeft
  • u-posAbsoluteTopRight
  • u-posAbsoluteBottomLeft
  • u-posAbsoluteBottomRight

Some of these utilities also support responsive breakpoint prefixes:

  • u-sm-posAbsoluteTopLeft
  • u-md-posAbsoluteTopLeft
  • u-lg-posAbsoluteTopLeft
  • u-sm-posAbsoluteTopRight
  • u-md-posAbsoluteTopRight
  • u-lg-posAbsoluteTopRight
  • u-sm-posAbsoluteBottomLeft
  • u-md-posAbsoluteBottomLeft
  • u-lg-posAbsoluteBottomLeft
  • u-sm-posAbsoluteBottomRight
  • u-md-posAbsoluteBottomRight
  • u-lg-posAbsoluteBottomRight
Top Left
Top Center
Top Right
Bottom Right
Bottom Left
Center
<div class="u-posRelative" style="height: 20em;">
  <div class="u-posAbsoluteTopLeft u-bgGray u-pad1">Top Left</div>
  <div class="u-posAbsoluteTopCenter u-bgGray u-pad1">Top Center</div>
  <div class="u-posAbsoluteTopRight u-bgGray u-pad1">Top Right</div>
  <div class="u-posAbsoluteBottomRight u-bgGray u-pad1">Bottom Right</div>
  <div class="u-posAbsoluteBottomLeft u-bgGray u-pad1">Bottom Left</div>
  <div class="u-posAbsoluteCenter u-bgGray u-pad1">Center</div>
</div>

Utilities for applying slight rotations to elements. This can help give a whimsical appearance to otherwise rectilinear or symmetrical elements.

So far, only a couple have been included to give book covers some character in promotional content. But the naming convention mimics that of our size utilities to make it easy to expand on in the future.

  • u-rotate1of60 rotates an element 6 degrees clockwise.
  • u-rotateCounter1of60 rotates an element 6 degrees counter-clockwise.

Breakpoint variations are included as well:

  • u-sm-rotateXofY
  • u-sm-rotateCounterXofY
  • u-md-rotateXofY
  • u-md-rotateCounterXofY
  • u-lg-rotateXofY
  • u-lg-rotateCounterXofY
<img class="u-rotate1of60 u-md-rotateCounter1of60" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20dy%3D%2212%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E150%20%26%23215%3B%20150%3C%2Ftext%3E%3C%2Fsvg%3E"
 alt="">

Utility for preventing horizontal overflow while allowing a scrollbar to still access the overflowing content. Works well for wrapping tables with a lot of columns.

Etma Ajjov Zud Vehi Ivibamen Tuf Veberijap Heh Onucimes Bajzirla Reg Il To Taifam Pa
co tif ge lanojzu suoghed nod huserme cikrawuw osira iz uwezip cul dekuz huvetak jic
uhaori epdegar docco mak jij zeru su keser zi lapodid gul ruvasi ce nicijuza debamcam
zinhal fawvusad kircojdu natrat tak sigujsa ra ifapusute tamosoh da af pubruz jarniz vor eb
<div class="u-scrollX">
  <table class="Table Table--ruled">
    <thead>
      <tr>
        <th>Raoji</th>
        <th>Untidewa</th>
        <th>Izden</th>
        <th>Ezidussej</th>
        <th>Ruhjiimi</th>
        <th>Bop</th>
        <th>Juv</th>
        <th>Gevobus</th>
        <th>Mebef</th>
        <th>Toahuci</th>
        <th>Ewpol</th>
        <th>Nin</th>
        <th>Cujinwor</th>
        <th>Dipbej</th>
        <th>Fochuki</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>celedsi</td>
        <td>cuwpebhib</td>
        <td>pugi</td>
        <td>opvih</td>
        <td>jad</td>
        <td>nofkofib</td>
        <td>hakutsed</td>
        <td>ticbet</td>
        <td>mas</td>
        <td>fo</td>
        <td>vacu</td>
        <td>kic</td>
        <td>gopaz</td>
        <td>bos</td>
        <td>zo</td>
      </tr>
      <tr>
        <td>vec</td>
        <td>ga</td>
        <td>dosmu</td>
        <td>dozmacpa</td>
        <td>utwubim</td>
        <td>cejpa</td>
        <td>cevisdo</td>
        <td>irha</td>
        <td>kubeh</td>
        <td>zumohbas</td>
        <td>puawa</td>
        <td>itgeh</td>
        <td>fuofara</td>
        <td>ad</td>
        <td>mof</td>
      </tr>
      <tr>
        <td>punvo</td>
        <td>reffocini</td>
        <td>awitat</td>
        <td>ago</td>
        <td>domkaca</td>
        <td>igpa</td>
        <td>cusdicpor</td>
        <td>lejejel</td>
        <td>agu</td>
        <td>ejajeb</td>
        <td>zenbazelo</td>
        <td>oze</td>
        <td>wikgak</td>
        <td>cennamuc</td>
        <td>subviwe</td>
      </tr>
    </tbody>
  </table>
</div>

Includes all standard SUIT CSS size utilities:

  • u-sizeFit makes an element shrink wrap its content with flex-basis.
  • u-sizeFull makes an element the width of its parent.
  • u-sizeFill makes an element fill the remaining space. Distribute space evenly on multiple elements.
  • u-sizeFillAlt uses an alternative method to make an element fill the remaining space. Distribute space based on element width.
  • u-sizeXofY specifies the proportional width of an object.

X must be an integer less than Y.

Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

These can be limited to specific breakpoints:

  • u-sm-sizeXofY
  • u-md-sizeXofY
  • u-lg-sizeXofY

Also includes a utility for width: 100% that works better with Flexbox:

  • u-size1of1

And utilities for limiting the height of elements based on viewport size:

  • u-limitHeight2of3 caps the element height at two-thirds of the viewport.
  • u-limitHeight3of4 caps the element height at three-quarters of the viewport.
  • u-mdh-limitHeight1of2 caps the element height at one-half the viewport above a certain minimum viewport height.
1/12
1/6
1/4
1/3
5/12
1/2
7/12
2/3
3/4
5/6
11/12
Full
u-limitHeight example
<div class="u-size1of12 u-borderMd u-pad06">
  1/12
</div>
<div class="u-size1of6 u-borderMd u-pad06">
  1/6
</div>
<div class="u-size1of4 u-borderMd u-pad06">
  1/4
</div>
<div class="u-size1of3 u-borderMd u-pad06">
  1/3
</div>
<div class="u-size5of12 u-borderMd u-pad06">
  5/12
</div>
<div class="u-size1of2 u-borderMd u-pad06">
  1/2
</div>
<div class="u-size7of12 u-borderMd u-pad06">
  7/12
</div>
<div class="u-size2of3 u-borderMd u-pad06">
  2/3
</div>
<div class="u-size3of4 u-borderMd u-pad06">
  3/4
</div>
<div class="u-size5of6 u-borderMd u-pad06">
  5/6
</div>
<div class="u-size11of12 u-borderMd u-pad06">
  11/12
</div>
<div class="u-sizeFull u-borderMd u-pad06">
  Full
</div>

<img class="u-limitHeight2of3" src="data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22800%22%20viewBox%3D%220%200%20800%20800%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%22160%22%20dy%3D%2264%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E800%20%26%23215%3B%20800%3C%2Ftext%3E%3C%2Fsvg%3E"
 alt="u-limitHeight example">

Utilities for applying whitespace adjustments (margin or padding) to elements.

  • u-spaceX applies margin all around.
  • u-spaceEndsX applies margin to top and bottom.
  • u-spaceSidesX applies margin to left and right.
  • u-spaceTopX applies margin to top.
  • u-spaceBottomX applies margin to bottom.
  • u-spaceLeftX applies margin to left.
  • u-spaceRightX applies margin to right.
  • u-spaceItemsX applies vertical margin between adjacent items.
  • u-staggerItemsX applies vertical margin between adjacent items proportional to the item's font-size.
  • u-padX applies padding all around.
  • u-padEndsX applies padding to top and bottom.
  • u-padSidesX applies padding to left and right.
  • u-padTopX applies padding to top.
  • u-padBottomX applies padding to bottom.
  • u-padLeftX applies padding to left.
  • u-padRightX applies padding to right.
  • u-pullSidesX applies negative margin to left and right.
  • u-pullLeftX applies negative margin to left.
  • u-pullRightX applies negative margin to right.

X corresponds to a point in our modular scale, which keeps whitespace feeling harmonious with our typography.

Omit X to use a whitespace value equal to our modular scale ratio. Use 1 through 6 to apply the corresponding multiplier to the ratio. Apply a leading zero (01 through 06) for whitespace smaller than the ratio with any of the above utilities except u-pull*.

With the exception of u-spaceItems*, all of these utilities support our standard breakpoint abbreviations of sm, md and lg.

None
06
05
04
03
02
01
Default
1
2
3
4
5
6
<div class="u-borderLeftMd u-padLeftNone">
  None
</div>
<div class="u-borderLeftMd u-padLeft06">
  06
</div>
<div class="u-borderLeftMd u-padLeft05">
  05
</div>
<div class="u-borderLeftMd u-padLeft04">
  04
</div>
<div class="u-borderLeftMd u-padLeft03">
  03
</div>
<div class="u-borderLeftMd u-padLeft02">
  02
</div>
<div class="u-borderLeftMd u-padLeft01">
  01
</div>
<div class="u-borderLeftMd u-padLeft">
  Default
</div>
<div class="u-borderLeftMd u-padLeft1">
  1
</div>
<div class="u-borderLeftMd u-padLeft2">
  2
</div>
<div class="u-borderLeftMd u-padLeft3">
  3
</div>
<div class="u-borderLeftMd u-padLeft4">
  4
</div>
<div class="u-borderLeftMd u-padLeft5">
  5
</div>
<div class="u-borderLeftMd u-padLeft6">
  6
</div>

Includes all standard SUIT CSS text utilities:

  • u-textBreak breaks strings when their length exceeds the width of their container.
  • u-textCenter center-aligns text.
  • u-textLeft left-aligns text.
  • u-textRight right-aligns text.
  • u-textInheritColor inherits the ancestor's text color.
  • u-textKern enables kerning in supporting browsers.
  • u-textNoWrap prevents wrapping at whitespace.
  • u-textTruncate truncates a single line of text, with ellipsis.

Selectively included as necessary are responsive utilities for the SUIT CSS text utilities:

  • u-sm-textLeft left aligns text starting at the small breakpoint.

Also includes weight helpers:

  • u-textNormal
  • u-textBold
  • u-textSemibold

And responsive size utilities. These support the same scale-based values and optional responsive breakpoints as our space utilities, and will resize text relative to the base font-size.

  • u-textGrowX
  • u-textShrinkX
  • u-sm-textGrowX
  • u-sm-textShrinkX
  • u-md-textGrowX
  • u-md-textShrinkX
  • u-lg-textGrowX
  • u-lg-textShrinkX

Left-aligned

Center-aligned

Right-aligned

Bold, Semibold, and Normal

This text will truncate. Lofuki zevvo rictij poj cacow ana hi noko voclaze dujkuzdeg ba kigfukep. Kestazkop dur bubva gingip itbe tas eci riga ebodamvan be cepidpe geifu voipatop kuevce.

u-textShrink6

u-textShrink5

u-textShrink4

u-textShrink3

u-textShrink2

u-textShrink1

Default

u-textGrow1

u-textGrow2

u-textGrow3

u-textGrow4

u-textGrow5

u-textGrow6

<p class="u-textLeft">
  Left-aligned
</p>
<p class="u-textCenter">
  Center-aligned
</p>
<p class="u-textRight">
  Right-aligned
</p>

<p>
  <span class="u-textBold">Bold</span>,
  <span class="u-textSemibold">Semibold</span>, and <b class="u-textNormal">Normal</b>
</p>

<p class="u-textTruncate">
  This text will truncate. Sitolzaj vufbo vejpivgow ifobowi ha
  ivefuk one ne piton jolun ru de wowuc minona wospazun uk ibisepew.
  Javerur uh wochojuc wetadgop sebalit ecsa huvger demcivva ubabasi
  wus ukhahju mocubli jindages hinizke.
</p>

<p class="u-textShrink6">u-textShrink6</p>
<p class="u-textShrink5">u-textShrink5</p>
<p class="u-textShrink4">u-textShrink4</p>
<p class="u-textShrink3">u-textShrink3</p>
<p class="u-textShrink2">u-textShrink2</p>
<p class="u-textShrink1">u-textShrink1</p>
<p>Default</p>
<p class="u-textGrow1">u-textGrow1</p>
<p class="u-textGrow2">u-textGrow2</p>
<p class="u-textGrow3">u-textGrow3</p>
<p class="u-textGrow4">u-textGrow4</p>
<p class="u-textGrow5">u-textGrow5</p>
<p class="u-textGrow6">u-textGrow6</p>