Text
Text size
Text size supports the following sizes: -text--xs
, -text--sm
, -text--md
,
-text--lg
, and -text--xl
. The default size is -text--md
.
Size | Example |
---|---|
-text--xl
| The quick brown fox jumps over the lazy dog. |
-text--lg
| The quick brown fox jumps over the lazy dog. |
-text--md
| The quick brown fox jumps over the lazy dog. |
-text--sm
| The quick brown fox jumps over the lazy dog. |
-text--xs
| The quick brown fox jumps over the lazy dog. |
<p class="-text--xl">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--lg">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--md">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--sm">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--xs">The quick brown fox jumps over the lazy dog.</p>
Text headings
Use classes -text--h1
through -text--h6
to match Chi's default heading sizes.
Size | Example |
---|---|
-text--h1
| The quick brown fox jumps over the lazy dog. |
-text--h2
| The quick brown fox jumps over the lazy dog. |
-text--h3
| The quick brown fox jumps over the lazy dog. |
-text--h4
| The quick brown fox jumps over the lazy dog. |
-text--h5
| The quick brown fox jumps over the lazy dog. |
-text--h6
| The quick brown fox jumps over the lazy dog. |
<p class="-text--h1">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h2">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h3">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h4">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h5">The quick brown fox jumps over the lazy dog.</p>
<p class="-text--h6">The quick brown fox jumps over the lazy dog.</p>
Text line height
Use shorthand utility classes to control an elements line-height. Line height sizes are equal to $base-unit * {size}
and illustrated in green in the example below.
-lh--1
-lh--2
-lh--3
-lh--4
-lh--5
-lh--6
-lh--7
-lh--8
-lh--9
<p class="-text -lh--1">-lh--1</p>
<p class="-text -lh--2">-lh--2</p>
<p class="-text -lh--3">-lh--3</p>
<p class="-text -lh--4">-lh--4</p>
<p class="-text -lh--5">-lh--5</p>
<p class="-text -lh--6">-lh--6</p>
<p class="-text -lh--7">-lh--7</p>
<p class="-text -lh--8">-lh--8</p>
<p class="-text -lh--9">-lh--9</p>
Text alignment
Change text alignment to justified, left, center, or right.
This text will render as justified
This text will render as left aligned
This text will render as center aligned
This text will render as right aligned
<p class="-text--justify">This text will render as justified</p>
<p class="-text--left">This text will render as left aligned</p>
<p class="-text--center">This text will render as center aligned</p>
<p class="-text--right">This text will render as right aligned</p>
Text transform
Change text transform to lowercase, uppercase, or capitalized.
This text will render as lowercase
This text will render as uppercase
This text will render as capitalized
<p class="-text--lowercase">This text will render as lowercase</p>
<p class="-text--uppercase">This text will render as uppercase</p>
<p class="-text--capitalized">This text will render as capitalized</p>
Text weight
Change text weight to thin, normal, bold, or bolder.
This text will render as thin
This text will render as normal
This text will render as bold
This text will render as bolder
<p class="-text--thin">This text will render as thin</p>
<p class="-text--normal">This text will render as normal</p>
<p class="-text--bold">This text will render as bold</p>
<p class="-text--bolder">This text will render as bolder</p>
Text wrapping
Prevent text wrapping with nowrap or control overflow with truncate.
This text will render without wrapping
This text will truncate with an ellipsis
<p class="-text--nowrap">This text will render without wrapping</p>
<p class="-text--truncate">This text will truncate with an ellipsis</p>
Text colors
Change text colors with contextual classes.
Brand
Brand text colors reinforce CenturyLink's brand. Use primary and secondary as accents, and body, grey, and light as neutrals.
-text--body
-text--primary
-text--grey
-text--secondary
-text--light
<!-- For light backgrounds -->
<p class="-text--body">-text--body</p>
<p class="-text--primary">-text--primary</p>
<p class="-text--grey">-text--grey</p>
<!-- For dark backgrounds -->
<p class="-text--secondary">-text--secondary</p>
<p class="-text--light">-text--light</p>
Semantic
Use semantic text colors to communicate meaning to users. Examples include displaying alerts, form field validation, user status, application state and more. Use green (success) for positive, blue (info) for informative, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.
-text--success
-text--info
-text--danger
-text--warning
-text--muted
<p class="-text--success">-text--success</p>
<p class="-text--info">-text--info</p>
<p class="-text--warning">-text--warning</p>
<p class="-text--danger">-text--danger</p>
<p class="-text--muted">-text--muted</p>
Responsiveness
Sizes
Text utility classes can be defined using the format -text[-{breakpoint}]--{size}
.
{breakpoint}
Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.
- blank - leave blank to apply
text
to all breakpoints. sm
- use to applytext
to sm and larger breakpoints.md
- use to applytext
to md and larger breakpoints.lg
- use to applytext
to lg and larger breakpoints.xl
- use to applytext
to xl breakpoints.
{size}
xs
- use to setsmaller
thetext
sm
- use to setsmall
thetext
md
- use to setmedium
thetext
lg
- use to setlarge
thetext
xl
- use to setlarger
thetext
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lacus, dictum quis mauris vel, commodo condimentum odio. Praesent lacus metus, vehicula at orci ac, fringilla mollis mauris.
<p class="-text-md--lg"></p>
<p class="-text-xl--xs"></p>
<p class="-text-lg--xl"></p>
Line heights
Line height sizes can be defined using the format -lh[-{breakpoint}]--{size}
.
{breakpoint}
Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.
- blank - leave blank to apply
text
to all breakpoints. sm
- use to applyline-height
to sm and larger breakpoints.md
- use to applyline-height
to md and larger breakpoints.lg
- use to applyline-height
to lg and larger breakpoints.xl
- use to applyline-height
to xl breakpoints.
{size}
0
- use to setline-height
and set to0
1
- use to setline-height
to$base-unit * 1
2
- use to setline-height
to$base-unit * 2
3
- use to setline-height
to$base-unit * 3
4
- use to setline-height
to$base-unit * 4
5
- use to setline-height
to$base-unit * 5
6
- use to setline-height
to$base-unit * 6
7
- use to setline-height
to$base-unit * 7
8
- use to setline-height
to$base-unit * 8
9
- use to setline-height
to$base-unit * 9
-lh-md--2
-lh-lg--4
-lh-sm--5
-lh-xl--7
<p class="-text -lh-md--2">-lh-md--2</p>
<p class="-text -lh-lg--4">-lh-lg--4</p>
<p class="-text -lh-sm--5">-lh-sm--5</p>
<p class="-text -lh-xl--7">-lh-xl--7</p>
Text alignment
Text utility classes can be align using the format -text[-{breakpoint}]--{alignment}
.
{breakpoint}
Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.
- blank - leave blank to apply
alignment
to all breakpoints. sm
- use to applyalignment
to sm and larger breakpoints.md
- use to applyalignment
to md and larger breakpoints.lg
- use to applyalignment
to lg and larger breakpoints.xl
- use to applyalignment
to xl breakpoints.
{alignment}
justify
- use to setjustify
thetext
center
- use to setcenter
thetext
left
- use to setleft
thetext
right
- use to setright
thetext
This text will render as justified from md and larger breakpoints
This text will render as left aligned from lg and larger breakpoints
This text will render as center aligned from sm and larger breakpoints
This text will render as right aligned from xl and larger breakpoints
<p class="-text-md--justify">This text will render as justified from md and larger breakpoints</p>
<p class="-text-lg--left">This text will render as left aligned from lg and larger breakpoints</p>
<p class="-text-sm--center">This text will render as center aligned from sm and larger breakpoints</p>
<p class="-text-xl--right">This text will render as right aligned from xl and larger breakpoints</p>