Inline text

Codebase has several simple text utility classes. (See also font-stacks.)

Text weights

Note: Your visitor needs to have font-weights 200, 400, 600, 700, and 900 (both normal and italic) in your website’s typeface installed on their device, or added via a CDN (e.g. Google Fonts), or else they may not see these weights.

Bolder • Italic
Bold • Italic
Semibold • Italic
Normal • Italic
Lighter • Italic

• t-bolder (and alias t-heavy)

  Bolder text (default 900)

• t-bold (and alias t-strong)

  Bold text (default 700) (same as <b> and <strong>)

• t-semibold

  Semibold text (default 600)

• t-normal

  Returns text to normal weight (default 400) and removes italicization. Perhaps you may find this useful in some circumstances.

• t-lighter (and alias t-thin)

  Lighter text (default 200)

Italic text

• t-italic (and aliases t-italics, t-em)

  Italic text (same as <i> and <em>)

Text sizes

• t-sm (alias: the <small> HTML tag)

  Small text for when you need small print

  t-sm shrinks text to 0.875em (87.5%) of its inherited size. (So, it is 14px when the default text size is 16px.)

• t-lg

  Big text for making something stand out. t-lg enlarges text to 1.325em of its inherited size.

  Note: t-lg will not do what you want as an inline class on headings or heading utilities. If you want a heading to be bigger, then use t-lg on a block wrapper around the heading (see making text bigger.

• t-para (alias: t-default)

  Overrides text size, resetting it to the default 1rem (which will be dependant on the font size set by a parent element).

Links

Links (also called hyperlinks) in Codebase are blue with an underscore by default, following the old tradition.

Links with and without underlines

Links get an underline by default. But there are situations where you may not want that, such as in menus.

For single links:

• t-no-underline — a link with no underline
• t-underline-hover-only — a link with underline only on hover

Similar to the above, but for groups of links (use one of these on a <nav> or <menu> wrapper):

• links-no-underline
• links-underline-hover-only

Example using links-no-underline:

Menu item 1 Menu item 2 Menu item 3 Menu item 4

<menu class="mb-2 p-cell flex gap-3 bg-gray-100 links-no-underline">
  <menuitem><a href="">Menu item 1</a></menuitem>
  <menuitem><a href="">Menu item 2</a></menuitem>
  <menuitem><a href="">Menu item 3</a></menuitem>
  <menuitem><a href="">Menu item 4</a></menuitem>
</menu>

(You will also want to add a gap between each menu item, so that people can click indivicual links on touch screens — as I have done here using Codebase flexbox utility classes.)

Example using links-underline-hover-only:

<nav class="mb-2 flex flex-column gap-2 links-underline-hover-only">
  <li><a href="">Nav item 1</a></li>
  <li><a href="">Nav item 2</a></li>
  <li><a href="">Nav item 3</a></li>
  <li><a href="">Nav item 4</a></li>
</nav>

But then, if it is not obvious, you may still need to indicate to users who hover over the link that the link is “working”. This can be done in various ways: adding back the underline, or adding a background colour on hover. See Codebase simple menu components.

What if you have a whole panel that needs to be a

Other text utilities

• t-strike

  Strikethrough text

• t-muted

  Muted text (opacity set to 0.4)

• t-uppercase

  Text in uppercase (all capitals)

• t-loose

  For when you need some text to have extra letter-spacing

• t-tight

  For when you need some text to have less letter-spacing

• t-nowrap

  For when you don’t want a portion of text to wrap on to a newline (not demonstrated here).