Solid assumes you have two fonts available on your app: Proxima Nova and Caponi. BuzzFeed employees can download these fonts from our Solid fonts repo.
Header sizes are defined from h1 to h6. Additionally, Solid provides responsive prefixed utility classes ranging from .xs-text-1 to .xs-text-6 for sizing blocks of text. For the same font size across devices, use the default .xs-text-n class. Headers and text sizing classes have no margins or padding by default.
h1, .xs-text-1
1.75rem, 28px
h2, .xs-text-2
1.375rem, 22px
h3, .xs-text-3
1.125rem, 18px
h4, .xs-text-4
1rem, 16px
h5, .xs-text-5
0.875rem, 14px
h6, .xs-text-6
0.75rem, 12px
<h1>The quick brown fox jumps over the lazy dog.</h1>
<p class="xs-text-1">The quick brown fox jumps over the lazy dog.</p>
<h2>The quick brown fox jumps over the lazy dog.</h2>
<p class="xs-text-2">The quick brown fox jumps over the lazy dog.</p>
<h3>The quick brown fox jumps over the lazy dog.</h3>
<p class="xs-text-3">The quick brown fox jumps over the lazy dog.</p>
<h4>The quick brown fox jumps over the lazy dog.</h4>
<p class="xs-text-4">The quick brown fox jumps over the lazy dog.</p>
<h5>The quick brown fox jumps over the lazy dog.</h5>
<p class="xs-text-5">The quick brown fox jumps over the lazy dog.</p>
<h6>The quick brown fox jumps over the lazy dog.</h6>
<p class="xs-text-6">The quick brown fox jumps over the lazy dog.</p>.xs-text-6.md-text-5.lg-text-4Resize this window to see responsive text in action.
<p class="xs-text-6 md-text-5 lg-text-4">Resize this window to see responsive text in action.</p>Caponi Slab Semibold is BuzzFeed News' headline typeface (please avoid any other usage). It can be applied to any text element using .slab.
.slab
<h1 class="slab">The quick brown fox jumps over the lazy dog.</h1>
<h2 class="slab">The quick brown fox jumps over the lazy dog.</h2>
<h3 class="slab">The quick brown fox jumps over the lazy dog.</h3>
<h4 class="slab">The quick brown fox jumps over the lazy dog.</h4>
<h5 class="slab">The quick brown fox jumps over the lazy dog.</h5>Use the following html tags and utility classes to add emphasis to blocks of text.
.regular
The quick brown fox jumps over the lazy dog.
<p class="bold"><span class="regular">The quick brown fox</span>jumps over the lazy dog.</p>
strong, .bold
The quick brown fox jumps over the lazy dog.
<strong>The quick brown fox jumps over the lazy dog.</strong>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>em, .italic
The quick brown fox jumps over the lazy dog.
<em>The quick brown fox jumps over the lazy dog.</em>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>.caps
The quick brown fox jumps over the lazy dog.
<p class="caps">The quick brown fox jumps over the lazy dog.</p>Use the following utility classes to prevent blocks of text from wrapping or to truncate them (requires setting a width).
.nowrap
The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.
<p class="nowrap">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>.truncate
The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.
<p class="truncate">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>Use these utility classes to align blocks of text. Requires using Solid's responsive prefixes.
.xs-text-left
The quick brown fox jumps over the lazy dog.
.xs-text-right
The quick brown fox jumps over the lazy dog.
.xs-text-center
The quick brown fox jumps over the lazy dog.
.xs-text-justify
The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.
<p class="xs-text-left">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-center">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-right">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-justify">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>Ordered and unordered lists require no classes by default. To remove all styling from either list, use the .list-unstyled class.
ol
ul
.list-unstyled
<ol>
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ol>
<ul>
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
<ul class="list-unstyled">
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>