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>
Create grids with an arbitrary number of elements/ breakpoints on devices
We use the Codyhouse grid framework as our CSS framework, it includes tools for 12-column grids with arbitrary column widths
In the css below:
1. The class "grid" creates a grid - by default grids will have 1 column
2. the class gap-mp adds a medium sized gap between elements - This can be altered to various sizes, eg, gap-xs, gap-sm, gap-md, gap-lg
3. To make more than one column, you'll need to add the class col-{size} to each child div, where {size} is a number 1-12
4. for different numbers of elements on larger devices, add one of the size specifiers (e.g. @xs, @sm, @md, @lg, etc)
5. To calculate grid widths, divide 12 by the number of columns you want. column = col-12, 2 columns = col-6, 3 columns = col-4, 4 columns = col-3, etc
In the example below col-6 col-3@sm col-2@lg can be read as "2 columns default, 4 columns on small devices and larger, 6 columns on large devices and larger
<div class="grid gap-md">
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5058 size-thumbnail" src="/wp-content/uploads/2025/01/Troy-Outlook-Icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5054 size-thumbnail" src="/wp-content/uploads/2025/01/Lorena_Moralez_Outlook_Icon-150x150.png" alt="" width="150" height="150" /></div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5050 size-thumbnail" src="/wp-content/uploads/2025/01/Carmen-Outlook-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5053 size-thumbnail" src="/wp-content/uploads/2025/01/Kyle-Outlook-Icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5056 size-thumbnail" src="/wp-content/uploads/2025/01/Melissa-Lobatos_Outlook-Icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5057 size-thumbnail" src="/wp-content/uploads/2025/01/Stephanie-Rios_Outlook-Icon-1-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5051 size-thumbnail" src="/wp-content/uploads/2025/01/David-Lopez-Outlook-icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5059 size-thumbnail" src="/wp-content/uploads/2025/01/Vasti-Toro-Outlook-Icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5048 size-thumbnail" src="/wp-content/uploads/2025/01/Alan-Rojas-Hernandez-Outlook-Icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5049 size-thumbnail" src="/wp-content/uploads/2025/01/Ana-M-outlook-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5052 size-thumbnail" src="/wp-content/uploads/2025/01/Juan-Aguilar-Outlook-Icon-150x150.png" alt="" width="150" height="150" />
</div>
<div class="col-6 col-3@sm col-2@lg">
<img class="alignnone wp-image-5055 size-thumbnail aligncenter" src="/wp-content/uploads/2025/01/Mayra-Outlook-Image-150x150.png" alt="" width="150" height="150" />
</div>
</div>
Comments
Article is closed for comments.