Common CSS classes for implementation/design

Most text fields support CSS classes and some HTML elements (ex: span). See https://base.bloomcudev.com/kitchen-sink/ to see these examples in use

Assigning Text Colors

The Codyhouse framework has built-in CSS classes for text color.

<span class="color-primary">This text will inherit the primary color from the theme</span>
<span class="color-accent">This text will inherit the secondary color from the theme</span>

Creating buttons in text fields

Buttons can be created in any field that accepts "a" tags (most body copy)

<a href='#' class="btn btn--primary">This is a primary button</a>
<a href='#' class="btn btn--secondary">This is a secondary button</a>
<a href='#' class="btn btn--tertiary">This is a tertiary button</a>

Headings

When adding headings to a text field, always use an h level appropriate for document flow. If you need an h2 to have the styles of an h1, you can add a CSS class, "h1," to make the text accessible while inheriting the styles of an h1.

Note: manually setting heading styles may not work predictably correctly in title fields

<h1 class="h2">This h1 will look like an h2</h1>
<h2 class="h1">This h2 will look like an h1</h2>
<h2 class="h3">This h2 will look like an h3</h2>
<h2 class="h4">This h2 will look like an h4</h2>
<!-- and so on -->

Font size

If you want to make a section of text larger or smaller, you can wrap it in a span with one of the CodyHouse "font-size" classes

This text is normal size <span class="text-lg color-primary"> This text is larger, and in the primary color </span>
This text is normal size <span class="text-sm color-accent"> This text is smaller, and in the accent (secondary) color </span>

Hide/show on different devices
You may want to hide text or elements on different devices. The hide@ and block@ classes can do that.

<div class="hide@md"><p>The text in this box will only show on mobile</p></div>
<div class="hide block@md"><p>The text in this box will only show on desktop</p></div>

Display buttons inline in Text/html block

<div class="text-component margin-bottom-md">
<h2 class="color-primary">Purchase  |  Refinance  | Lease</h2>
What do you want in a car? Whether it's reliability, luxury, or room for sports equipment—we'll help you get the financing to make it possible.
</div>
<div class="flex@md gap-md">
<a class="btn btn--secondary width-100% width-auto@md" href="#">Rates</a>
<a class="btn btn--secondary width-100% width-auto@md" href="#">FAQs</a>
<a class="btn btn--secondary width-100% width-auto@md" href="#">Auto Refinance Calculator</a>
<a class="btn btn--secondary width-100% width-auto@md" href="#">Loan Payment Calculator</a>
</div>