Header
Utility classes for all typography elements.
Bento uses three font stacks. Use these classes ff-sans-serif, ff-serif and ff-mono to change the font-family
<p className="ff-sans-serif">...</p>
<p className="ff-serif">...</p>
<p className="ff-mono">...</p>Bento's type scale has the following classes to change the font size of an element. Use it in combination with font weight and line height for better harmony.
.fs-1font-size:10px;.fs-2font-size:12px;.fs-3font-size:14px;.fs-4font-size:16px;.fs-5font-size:18px;.fs-6font-size:20px;.fs-7font-size:24px;.fs-8font-size:28px;.fs-9font-size:32px;<p className="fs-9">...</p>
<p className="fs-2">...</p>
. . .
<p className="fs-1">...</p>The available range of weights is 100(Ultra thin) to 900(Black).
Some of the commonly used weights are .fw-400, .fw-500, .fw-600 and .fw-800
<p className="fw-800">...</p>
<p className="fw-600">...</p>
<p className="fw-500">...</p>
<p className="fw-400">...</p>Change the line height density with these classes.
.lh-solidline-height:1;.lh-titleline-height:1.25;.lh-copyline-height:1.5;<p className="lh-solid">...</p>
<p className="lh-title">...</p>
<p className="lh-copy">...</p>Additionally, .lh-none sets the line-height to 0. It's best to not use it unless needed for a specific usecase.
This property allows you to make text appear italicized. By default the font-style is set to normal
.fs-italicfont-style:italic;.fs-normalfont-style:normal;<p className="fs-italic">...</p>
<p className="fs-normal">...</p>Change the appearance of the decorative lines using these classes.
.td-underlinetext-decoration: underline;.td-nonetext-decoration: none;.td-line-throughtext-decoration: line-through;<p className="td-underline">...</p>
<p className="td-none">...</p>
<p className="td-line-through">...</p>Change the alignment of the text using these classes.
.ta-lefttext-align: left;.ta-righttext-align: left;.ta-centertext-align: center;.ta-justifytext-align: justify;<div className="ta-left">...</div>
<div className="ta-right">...</div>
<div className="ta-center">...</div>
<div className="ta-justify">...</div>This property controls the application of anti-aliasing when fonts are rendered.
.fs-antialiasedfont-smoothing: antialiased;<p class="fs-antialiased">...</p>Defines the spacing between the characters of a block of text.
.ls-tightletter-spacing: -1px;.ls-normalletter-spacing: 0px;.ls-wideletter-spacing: 1px;<p className="ls-tight">...</p>
<p className="ls-normal">...</p>
<p className="ls-wide">...</p>The color of the text can be changed by adding the color variables/classes.
.c-primary-500color: #F77728;.c-secondary-500color: #3366CC;.c-tertiary-500color: #37404E;.c-success-500color: #80AA01;.c-error-500color: #FF3C2B;<p className="c-primary-500">...</p>
<p className="c-secondary-500">...</p>
<p className="c-tertiary-500">...</p>
<p className="c-success-500">...</p>
<p className="c-error-500">...</p>Additionally, refer the color page of the utilities to see all possible colors of the palette.
This property specifies how to capitalize an element's text.
.tt-normalcasetext-transform: normal;.tt-uppercasetext-transform: uppercase;.tt-lowercasetext-transform: lowercase;.tt-capitalizetext-transform: capitalize;.tt-unsettext-transform: unset;<p className="tt-normalcase">...</p>
<p className="tt-uppercase">...</p>
<p className="tt-lowercase">...</p>
<p className="tt-capitalize">...</p>
<p className="tt-unset">...</p>Defines how whitespace is handled inside an element.
.ws-normalwhitespace: normal;.ws-nowrapwhitespace: nowrap;<p className="ws-normal">...</p>
<p className="ws-nowrap">...</p>