Text

Notes on Implementation

There are several differences between Bootstrap’s text utilities and the Yale Component Library’s:

  • We offer additional font family classes:
    • .text-monospace
    • .text-font-family-sans-serif
    • .text-font-family-sans-italic
    • .text-font-family-sans-medium
    • .text-font-family-sans-bold
    • .text-font-family-serif
    • .text-font-family-serif-bold
    • .text-font-family-serif-italic
    • .text-font-family-serif-bold-italic
  • To generate text color variants, we use our own mixin, yale-text-emphasis-variant rather than Bootstrap’s text-emphasis-variant. Our variant tries to ensure sufficient color contrast accessibility.
  • We do not include .text-black-50 or .text-white-50 from Bootstrap.
  • We add .text-base-size, which resets the text’s font size and line height.

Examples

Font Utilities

This is a text utility style based on the text-monospace. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-serif. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-serif. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-serif-bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-serif-italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-serif-bold-italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-lowercase. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-uppercase. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-capitalize. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-muted. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Text Emphasis

<p class="text-yale">

This is text that is styled with the text-yale class and this is an example link to see

<p class="text-primary">

This is text that is styled with the text-primary class and this is an example link to see

<p class="text-secondary">

This is text that is styled with the text-secondary class and this is an example link to see

<p class="text-success">

This is text that is styled with the text-success class and this is an example link to see

<p class="text-info">

This is text that is styled with the text-info class and this is an example link to see

<p class="text-warning">

This is text that is styled with the text-warning class and this is an example link to see

<p class="text-danger">

This is text that is styled with the text-danger class and this is an example link to see

<p class="text-light">

This is text that is styled with the text-light class and this is an example link to see

<p class="text-dark">

This is text that is styled with the text-dark class and this is an example link to see