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
.
<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. Motic no erianhi povsot ak eswa ov vejal ezimejac ucaruzic jul zucim paridi ekbup co ji de bewoceb. Jipdu zegjel bo coupauvi vem vawpu sek je nevwed lom un pu alret rukmem vo reze lag osuvabuh. Cehij nejvujor jot mogaruca rohwoded dubbi ciimo pikumo ku irijuggiv cenkeki uzueba pam mihne me if.
This text will flow into three columns. Conhez menci fi sebopvu wepa owo pubpupit bis nojfa okja jot ha umef diniczu paet cew judzow bem. Uzeup kecpi orki viksoek fenowur fila cudez hamudep suveg egi weruhu uzocimur. Bebo icek hofmaj sogforih oputava pihemuza kotguek umbe vudnegla imril rawvolim munfo licipuwa wennum hufosu. Sisezu sevzi geoh luvag hi nahka riwe eracof he zaoh wimuji ruji zemomdem tuvukik. Ut loc olu oka lezfikem vaeg cu losnuwwol jedzeb tek tejab helsodo. Leci itoerwuh ege kocufu tuvoj jokjahle dinerasi kac lawup bogas lofu ja zir mek womivdi. Ves reznif ewida kuh guwgolwes den ti ujeni etizudri vudafza kigazvim focwow ugiulo ziam hinnel mizce sikpav.
This text may flow into one, two or three columns based on the viewport. Misib hipje ji fijmoab di rafub ekumaj beh miopaeg ubriuwo bi jik tij obtotes wi dow luwsof gasjeipu. Vezuvik abjutneh jiwed ulmebet obugohbu zahper bug big vi cu pimabu ilidobup. Japi ma johewel kofmohe duubono wuvkej kif jeumhub zohnob apoepait sun cecrowi an fat wuwesiv ruem makkitew uwe.
<p class="u-columns2">
<b>This text will flow into two columns.</b> Busvead kodu rabuvwuf
nuuveke hesa ma jose hepkothas zecukew rak henubo kapov luksivme
fovezibin zuvzo ro. Lu jadpatbu kazjebe ehladaf finaw ogeritom
tifkasac iwuzo nin vofapa fed unis ecudi fub gudce hi ka fumoc.
Kohonep dez lira lowzo azise metus mivuha re cusbe wum hosnuon
ti sistopbug petohub. Dife aheteza ejanup sag ar litnic li
ri ofudi ret naz wekamo. Lupno wapehho welin upesop vapidcaf
so bi akhej seliol ijkuig ad romdon ka.
</p>
<p class="u-columns3">
<b>This text will flow into three columns.</b> Idroru foopdog
zojlajwan efijuflu sonupze enaguva le fib fo gizteksar uc zal.
Kegiji boim liojjo upe dumliwsu ruh zaori bebaf uvuoz tuuzsic
sojti zivna tehanvar ilafi bad go jowhonvo co. Aradudez lumwunev
odeli degad tugid ulca hofzo epe zejwures tafvuf dib cehti
orzab rad ti seraj rocfa. Wutzen sekdow jultogov leife vakal
widez fazmelen dojimatu tizajcik zewboeg ewa wer. Nabele go
holhu afna gozafimi fiiv mabjawo kad idgulo ga fevonmoh copvup
lapgaw bu heh. Bukor he nuvo maf hosjar kewomupi faopewo gowu
uckuz no sehakzas zeofkak nuzac bunoh neb.
</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> Guj kuwnakiv cigcu cuviako gaz po soj silwel piwim balpafuw
ufjambiz dusra iluleti vut ep lu mecumi fob. Waabaca jel kieb
nut olo iha cap licovni ebini so upacoiza duv pefsalewo cago
haob fodfizano. Etoge muh hoslu amina obzu pag cisu kiwi urtujho
denpi ne kakfa bi. Ri pas be cuhu zezwuhi vipu sapvu gewgu
famileb rozpok feutomuz vevu kigo zif vancej. Ic dowbehhe sacziiz
ubi zok bizhazut ha wevbaso jorum weohigi nofa mafcunu utahbes
uposuti da ge ka su. Vo uw nohje ca juofuup wiibudu lulfa fietugi
kag ju be mut fa.
</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.<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
Uwtewoc sazeze zofi zeh afo lidbiwup focitma cigerbe ol cihu epemaoz nuv zi to hecose amasirha. Missocci wifon ama fudifha ri jesu limacu uzipas nu vaneba otme apuha.
<div class="u-flex u-flexAlignItemsStretch">
<p class="u-borderMd u-pad1">
Example
</p>
<p class="u-borderMd u-pad1 u-flexGrow1">
Tam eru fiw sodsa ofba jovnukhu gocebu zenbe bevabali ubil ertir
zavonup. Usreem miam gon to ugiuj acco hozzog tepikucu wet
mire hebaci rovud zipot nujtiju mekcis pelsob go.
</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
<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.<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
<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 viewportu-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
<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.
Hav | Ew | Fecsobel | Abzi | Zoewbe | Dugcukoge | Pi | Ebahinev | Zillew | Sojo | Cuvucaf | Dephecum | Fe | Fusedab | Dop |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
wa | jakiluwe | ja | kic | kefbo | milobu | uwmike | gatbic | urebgo | samavme | uvidivis | hu | lifo | pamtupu | fuveplek |
voh | ezidaaco | silzefov | ganbazon | irekos | cac | leuwapu | zakafih | imsag | verikietu | caroz | gu | bahdaez | awnenab | kewlecu |
deeli | zu | di | sumnow | remotse | nak | dir | ofe | mul | jibin | uti | keksaej | uru | wa | bis |
<div class="u-scrollX">
<table class="Table Table--ruled">
<thead>
<tr>
<th>Acasev</th>
<th>Kifenro</th>
<th>Keswizof</th>
<th>Arfi</th>
<th>Ubija</th>
<th>Di</th>
<th>Zimmaluf</th>
<th>Simvowvo</th>
<th>Re</th>
<th>Ututez</th>
<th>Noc</th>
<th>Fe</th>
<th>Rabi</th>
<th>Sadiwiuru</th>
<th>Gigtuw</th>
</tr>
</thead>
<tbody>
<tr>
<td>hon</td>
<td>ezodutem</td>
<td>pi</td>
<td>vu</td>
<td>sad</td>
<td>aktoc</td>
<td>tob</td>
<td>egiledin</td>
<td>ninit</td>
<td>nualawe</td>
<td>bus</td>
<td>widwivfon</td>
<td>agojiz</td>
<td>nu</td>
<td>rivbimmi</td>
</tr>
<tr>
<td>mewdu</td>
<td>vac</td>
<td>umku</td>
<td>ipize</td>
<td>do</td>
<td>ezanto</td>
<td>zosejhiv</td>
<td>sis</td>
<td>dosinnu</td>
<td>ewpew</td>
<td>be</td>
<td>za</td>
<td>eni</td>
<td>wufepsen</td>
<td>isubornu</td>
</tr>
<tr>
<td>zumubtet</td>
<td>mabolfo</td>
<td>viepijip</td>
<td>fe</td>
<td>wa</td>
<td>utuojizu</td>
<td>sek</td>
<td>fer</td>
<td>wumefoz</td>
<td>er</td>
<td>rivvoc</td>
<td>rudo</td>
<td>ta</td>
<td>tilawo</td>
<td>tulat</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.<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-staggerHeadingsX
can be used to apply increased vertical margin
to
headings. Useful for increasing contrast between headings and their preceding content.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*
and u-stagger*
, all of these
utilities support our standard breakpoint abbreviations of sm
, md
and lg
.
<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. Buha ofo saet di hus siwsuvi mitecuri niw pub nasgo nonisjez baiva hutgade cucege zis jupo. Kik pug nahapzid luupaoto ipno nab ifotejra ro sisze megdet debotve nevogu wub robcocip lir.
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. Zawemeh uwfoga somohi zo woigvuw vepo
rohel poh ho guviv ekba wodazol irelu fuvpomvah. Nemidev lifwak
woz tefi ruardak he irmiwoku bur ukbe nojom di kapuis.
</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>