Skip to main
Skip to component nav
Skip to component nav

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

Font class="text-monospace"

This is a text utility style based on the text-monospace class. 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.

Font class="text-font-family-sans-serif"

This is a text utility style based on the text-font-family-sans-serif class. 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.

Font class="text-font-family-sans-italic"

This is a text utility style based on the text-font-family-sans-italic class. 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.

Font class="text-font-family-sans-medium"

This is a text utility style based on the text-font-family-sans-medium class. 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.

Font class="text-font-family-sans-bold"

This is a text utility style based on the text-font-family-sans-bold class. 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.

Font class="text-font-family-serif"

This is a text utility style based on the text-font-family-serif class. 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.

Font class="text-font-family-serif-bold"

This is a text utility style based on the text-font-family-serif-bold class. 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.

Font class="text-font-family-serif-italic"

This is a text utility style based on the text-font-family-serif-italic class. 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.

Font class="text-font-family-serif-bold-italic"

This is a text utility style based on the text-font-family-serif-bold-italic class. 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.

Font class="text-lowercase"

This is a text utility style based on the text-lowercase class. 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.

Font class="text-uppercase"

This is a text utility style based on the text-uppercase class. 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.

Font class="text-capitalize"

This is a text utility style based on the text-capitalize class. 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.

Font class="text-muted"

This is a text utility style based on the text-muted class. 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

Text Emphasis class="text-yale"

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

Text Emphasis class="text-primary"

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

Text Emphasis class="text-secondary"

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

Text Emphasis class="text-success"

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

Text Emphasis class="text-info"

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

Text Emphasis class="text-warning"

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

Text Emphasis class="text-danger"

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

Text Emphasis class="text-light"

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

Text Emphasis class="text-dark"

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