Type
Headings
#DoItAnyways
.lwj-heading-1
Build an app by April 14 for a chance to win a MacBook Air
.lwj-heading-2
Participate and win prizes!
.lwj-heading-3
No ragrets
.lwj-heading-4
HTML
<p class="lwj-heading-1">#DoItAnyways</p>
<p class="lwj-heading-2">Build an app by April 14 for a chance to win a MacBook Air</p>
<p class="lwj-heading-3">Participate and win prizes!</p>
<p class="lwj-heading-4">No ragrets</p>Body Text
The only way to get better at a thing is to do the thing. Join Jason in his daily deliberate practice to improve his filmmaking. There are always reasons not to start — if we want to be great, we have to #DoItAnyways.
.lwj-text-body-md
My whole life philosophy sounds kinda silly when I say it out loud.
.lwj-text-body-sm
HTML
<p class="lwj-text-body-md">The only way to get better at a thing is to do the thing. Join Jason in his daily deliberate practice to improve his filmmaking. There are always reasons not to start — if we want to be great, we have to #DoItAnyways.</p>
<p class="lwj-text-body-sm">My whole life philosophy sounds kinda silly when I say it out loud.</p>Eyebrows
Newsletter
.lwj-text-eyebrow-lg
Manage your profile
.lwj-text-eyebrow-sm
HTML
<p class="lwj-text-eyebrow-lg">Newsletter</p>
<p class="lwj-text-eyebrow-sm">Manage your profile</p>Emphasis
Use subdued text to reduce emphasis independent of font size and weight.
.lwj-text-subdued
Use strong text to increase emphasis independent of font size and color.
Use <strong> on body text
HTML
<p class="lwj-text-subdued">Use subdued text to reduce emphasis independent of font size and weight.</p>
<p><strong>Use strong text to increase emphasis independent of font size and color.</strong></p>Centered Text
Use .lwj-text-center to align text to the center of a container.
Example
A block of text with aligned to the center.
Participate and win prizes!
HTML
<p class="lwj-text-center">Participate and win prizes!</p>Columns
Use .lwj-columns to distribute multiple lines of text into two or more columns. Use custom properties to override the value of the number of columns and the column width.
You can override the default values for the number of columns and space between columns using custom properties.
| Custom Property | Default Value | Description |
|---|---|---|
--columns |
2 | Number of columns |
--gap |
60px | Space between columns |
Example
Text divided into columns.
Natalie Davis
Vaibhav Tandon
Brandon Roberts
Erin Mikail Staples
Nick Taylor
Art Rosnovsky
Roger Stringer
Adam
Tiago Couto
Darshak Parikh
Craig Richardson
Bryan Robinson
Michael Nichols
Patrick Whitty-Clarke
Samuel Alvarez
Peter Carlsson
patrick.py
Yannick
It's Charlie.
Acthy
Vinny (MRVDOG)
michaeljolley
Gil Creque
HTML
<p class="lwj-columns" style="--columns: 3; --gap: 30px">
Natalie Davis<br>
Vaibhav Tandon<br>
Brandon Roberts<br>
...
Vinny (MRVDOG)<br>
michaeljolley<br>
Gil Creque
</p>