Inline text - Codebase

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  and )
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  and )

Text sizes

t-sm (alias: the  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 by 1.25em (125%) of its inherited size.

Note: t-lg doesn’t work 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 also large display text.
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 automatically get an underline. But there are cases where you may not want that, such as in menus: use t-decoration-none.

But then you will 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.

(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.)

<ul class="flex flex-column gap-2">
  <li><a class="t-decoration-none hover:t-decoration-underline" href="">Menu item 1</a></li>
  <li><a class="t-decoration-none hover:t-decoration-underline" href="">Menu item 2</a></li>
  <li><a class="t-decoration-none hover:t-decoration-underline" href="">Menu item 3</a></li>
  <li><a class="t-decoration-none hover:t-decoration-underline" href="">Menu item 4</a></li>
</ul>

Whole-panel links

Q: What if you wanted a whole panel, such as a card, or hero to operate as a link?
A: You can simply use the <a> link tag instead of the outer <div>, and give it a Codebase block class to make it a block instead of an inline element:

<a class="block" href="">
    ...
</a>

Q: But what if you wanted only some of the text in the panel to be styled as the link, but not other accompanying text?
A: Codebase has you covered. Since v.5.0.8, you can put class t-link-inside on the wrapper <a> tag, and t-link on the inner text that you want to be the pseudo link (e.g. on the panel title text).

The t-link-inside class (must be applied to the <a> wrapper) simply removes the traditional link underscore, and resets its link text color to inherit the color of the surrounding/ “parent” panel text. (The surrounding text usually has the default text color, almost black.)
And the t-link class makes its element only look like a link by adding back the underscore, link color, and link hover color.

The link functionality is still handled by the wrapper <a> tag. t-link doesn’t actually make an element operate like a link.

Example:

Card title

Lorem ipsim dolor sit amet ...

<a class="block t-link-inside" href="">
    <p class="h4 t-link">Card title</p>
    <p class="mb-0 t-gray-900">Lorem ipsim dolor sit amet ...</p>
</a>

You need to supply a text color for the accompanying text, else it will inherit the link color (default is hyperlink blue).

You can even combine t-link-inside with t-decoration-none...

Card title

Lorem ipsim dolor sit amet ...

...and with t-decoration-none hover:t-decoration-underline:

Card title

Lorem ipsim dolor sit amet ...

The box shadow on hover in the examples above is supplied by a Codebase box shadow.

<!-- t-decoration-none -->
<a class="block mb-2 b-thin p-2 hover:bs-3 t-link-inside t-decoration-none" href="#/">
    <p class="h4 mb-1 t-link">Card title</p>
    <p class="mb-0 t-gray-900">Lorem ipsim dolor sit amet ...</p>
</a>

<!-- t-decoration-none AND hover:t-decoration-underline -->
<a class="block mb-2 b-thin p-2 hover:bs-3 t-link-inside t-decoration-none hover:t-decoration-underline" href="#/">
    <p class="h4 mb-1 t-link">Card title</p>
    <p class="mb-0 t-gray-900">Lorem ipsim dolor sit amet ...</p>
</a>

A third example: adding in different text colors in base and hover states will require you adding your own CSS (example showing how you can utilize Codebase variables):

Card title

Lorem ipsim dolor sit amet ...

<style>
    .t-link-inside.t-green-500 {
        color: unset;
    }
    .t-link-inside.t-green-500 .t-link {
        color: var(--green-500);
    }

    .t-link-inside.hover\:t-green-600:hover .t-link {
        color: var(--green-600)
    }
</style>

<a class="block mb-2 b-thin p-2 t-link-inside t-decoration-none hover:t-decoration-underline t-green-500 hover:t-green-600 " href="#/">
    <p class="h4 mb-1 t-bold t-link">Card title</p>
    <p class="mb-0">Lorem ipsim dolor sit amet ...</p>
</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).