The typography for our marketing pages differs from Primer CSS's core. It is responsive, on a slightly different scale, and headlines are set in the defined marketing font.
Use .h0-mktg
– .h6-mktg
to change an element's font, size, and weight on marketing pages.
<p class="h0-mktg">This is heading 0</p><p class="h1-mktg">This is heading 1</p><p class="h2-mktg">This is heading 2</p><p class="h3-mktg">This is heading 3</p><p class="h4-mktg">This is heading 4</p><p class="h5-mktg">This is heading 5</p><p class="h6-mktg">This is heading 6</p>
Use .f0-mktg
– .f6-mktg
to change an element's body font, size, and weight on marketing pages.
<p class="f0-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p><p class="f1-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p><p class="f2-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p><p class="f3-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p><p class="f4-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p><p class="f5-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p><p class="f6-mktg mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies ante sit amet neque facilisis feugiat. Cras nec lectus et dolor feugiat sodales vel id mi. Quisque diam massa, tempus at auctor vitae, porttitor vel ligula. Donec in tortor volutpat, gravida elit at, faucibus orci.</p>
These utilities are meant to be used in addition to Primer CSS's core utilities.
<p class="pullquote">I'm a pullquote. Someone said these words in real life, and now they're on the internet</p>