TODO: show examples once there are container and border patterns.
Utilities for adding space around (outside) an element, using values from our modular scale to promote harmony in compositions:
u-spaceX - Adds space to all dimensions.u-spaceEndsX - Adds space to top and bottom.u-spaceSidesX - Adds space to left and right.u-spaceTopXu-spaceBottomXu-spaceLeftXu-spaceRightXWhere X is replaced with the desired modular scale step. For negative
steps, use a leading zero (01 instead of -1). Omit X to use the
base (0) step.
If you need to reset margins to auto check out our
flex expand utilities.
Same as space utilities, but for adding whitespace within an element.
u-padX - Adds padding to all dimensions.u-padEndsX - Adds padding to top and bottom.u-padSidesX - Adds padding to left and right.u-padTopXu-padBottomXu-padLeftXu-padRightXSame syntax, but applies negative margin. Useful for counteracting whitespace in parent elements or applying visual adjustments to non-rectangles.
u-pullX - Pulls element in all directions.u-pullEndsX - Pulls element from top and bottom.u-pullSidesX - Pulls element from left and right.u-pullTopXu-pullBottomXu-pullLeftXu-pullRightXOftentimes you'll want children of a certain element to space themselves
with consistent rhythm. The u-spaceItems utility accomplishes this by
adding space between adjacent children. It supports the same modular scale
values as the other utilities.
Opizi je ja vowpizuz huhedor rada sigibja lunorih madho tume wul benaug te if oswur epneb rodug ijnirrig.
Hutze fi fovegis mi ajo teppu wef por etolerev gulu jo nul.
Kavo tisamik agoari no lekto esviril me wa luduvke rogatlo lizindok zebi cumo aho san.
<div class="u-spaceItems1">
<p>Eg oh keb sib dizbi heam masonab jirul zuwi eg uzben pejarab ri zurdigev to hezmene.</p>
<p>Dam boano cunub depi laz ifezaseb eh copu uc ociuf darolioza aceriwo dotjo uze.</p>
<p>Riv efoku fodbov odliod umezu madhaw kemco jocabfi hibe movkupi sunwi hiaba te co oglum muctico pufulta onihowuf.</p>
</div>While u-spaceItems is helpful, it can struggle with prose content where
elements of varying size and hierarchy (such as headings and paragraphs) may
appear too close together. u-staggerItems accomplishes the same thing, but
bases the adjacent spacing on modular scale values relative to the items
themselves.
TL;DR: Larger items will have more preceding space than smaller ones.
Di sucu we pufigur jagejas bi ur ij tel apuwalzu fug maew noh bo.
Cola vup zo al sieknoh bupbug pirol visholeg rizidog fo vona du leb adjumkip gu muh. Pik uk peow nep das anuwajmip newim cotubo widabli kinavku sotibji weg keulsem so jojul tir jajbam. Fiujode meigufif hiwapso jophuusi humuni lalofibu pokpabfab le dubi hidmargek lawpon cercap vone fuakauho. Ram socwocej dehulez downag ji heslijiw bofvisob viileta bur miko fez rihilo tidamor nehug hanu vi wat. Kucujuz ijjobgo oroic ma pe pir cizfuc tacedfo ih wonauni puke ij his hol pe bus sarjuj somod. Wug temitli se ajilet ufo hejidsi vugpucsog nifuboru ese ovawa jajil huk mewahe zudale rile gazbipwan.
De do oru icdigi foet tuwgi jog dal se pewan jecirze pinupa ror sesoti maluj bage.
<div class="u-staggerItems1">
<p>Rasawewa bij cum umabo cuef cignos ve esa nen sifi siigowe zegihi pituhi etti wecnidbak bacodke aj usicsuz.</p>
<h2>This is a Heading of Words</h2>
<p>Digokren vubnozi miw go hu sahes fu ik halkom bit vaarujo osozindag ijefe nosef ruunve ri wugde. Tad batar le nimdifev su vedweam jajezir ajjiz komzajej ucujuk hekihu iwnazko teruli ankaw goomuk zuzorni. Ec mipuku ushis ilzikvo jeffakik tit ki kuzjo puzsod wewul woew hum albespod gesti punoho lupevzep. Hadi mo gi janew zen ezzuga emuro ihe paf donwo tewdocic leg rek ura eho. Foj alduuju mocja safrodba ca bit wo higameci livka kowmek hilibad efni zetasce zucicwi wec vesvum. Rihgunka eznuzmec fonuhli me bicoz he kawpisduk zeguvze kafadjog kip daro vuf affew izemra uvdulim.</p>
<p>Fec aw kojote vato azooz hezda diowpug zowwis pinojupup ekava po ubuosroj.</p>
</div>Sometimes even the u-staggerItems* utilities don't quite get the contrast
between sections desired. Use u-staggerHeadings to further differentiate
headings from their preceding content.
Ajnida fo kenu dormoh tiggik ura edvow evo ir ini fuho mo jodu amovolir mozmifre uzarikid rodepjos ona.
Agmoup wuja nupcum nekuece hi buj liblenjuc kudav unva vepic ba idipohej subo acomik ac. Powgate rufku ovdogacu wezres ceh ba ni vurora fashevil osov inveg cun ocozohoj fipa faf jowtikib. Vo zigliv jupeh bekzowok leler puhepiha boku koes mig ju zo de juwuri ulsuaca cihsazip wiw jactac zawomda. Olcu ibnur bahpabec uma rejok up zutmut peg cedub ku zu peza go betmupnu kepu vizagowuh zabi. Lewuguba ro icgi vig tis wossoj pektif je wef ko rem ubhe upegodto ci bec lawrubi dur hec. Zaita jehuwfow la lasziojo elmajkut tu be va wef zacuuja gazoc enuwgo bubduwo.
Sucvoz totefjos nour vujho vo efi nu ned sogeb keom ohnubvo ebialoek wiggi siehe zabpi wuswi.
<div class="u-staggerItems1 u-staggerHeadings4">
<p>Cihca su do rice gifnuzgi muf pedir ronboj laf wihuwju cagwahe bet kuzispa ru he naf sa gamko.</p>
<h2>This is a Heading of Words</h2>
<p>Nitjegbo jep zevdow til buclecju mi ru fe etizeckuz emuegi pobgubdu cu tekopzok vuki edu tidwijun. Wuc gi kisegug vico luraz teusvaz rieja bogurpev hozcorzi ehzomka ciponure ovdatted dilcacku igzem cawidlo. Ja ejbueg jazofzig cifope mekoda ezsevu uzeom ifikulih ikwad miovoku ju hutca iz akijun ezkozep dozelit munid.</p>
<p>Pa weaketar atji cacbozum wojguin nujawev kurbadhe ni ab detpafmo fonajgu kezotdu so wildecfi fulinogu cavmo vume wazownim.</p>
</div>You can remove space and padding entirely from an element by using the
u-despace and u-depad utilities. These support the same directional
variations as the other space utilities, for example u-despaceEnds or
u-depadLeft.