Text Utilities

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Example Classes Snippet

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-muted 
 <p class="text-muted">Your Text.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

.text-primary 
 <p class="text-primary">Your Text.</p>

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

.text-success 
 <p class="text-success">Your Text.</p>

Maecenas sed diam eget risus varius blandit sit amet non magna.

.text-info 
 <p class="text-info">Your Text.</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-warning 
 <p class="text-warning">Your Text.</p>

Donec ullamcorper nulla non metus auctor fringilla.

.text-danger 
 <p class="text-danger">Your Text.</p>

Contextual background

Contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Example Classes Snippet
Nullam id dolor id nibh ultricies vehicula ut id elit. .bg-primary 
    <p class="bg-primary">Your Text.</p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. .bg-success 
    <p class="bg-success">Your Text.</p>
Maecenas sed diam eget risus varius blandit sit amet non magna. .bg-info 
    <p class="bg-info">Your Text.</p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. .bg-warning 
    <p class="bg-warning">Your Text.</p>
Donec ullamcorper nulla non metus auctor fringilla. .bg-danger 
    <p class="bg-danger">Your Text.</p>

Text alignment

Easily realign text to components with text alignment classes.

Example Classes Snippet

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

.text-justify 
    <p class="text-justify">Justified text.</p>

It is a long established fact that a reader.

.text-nowrap 
<p class="text-nowrap">No wrap text.</p>

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

Example Classes Snippet

Left aligned text on all viewport sizes.

.text-left 
    <p class="text-left">Left aligned text on all viewport sizes.</p>

Center aligned text on all viewport sizes.

.text-center 
<p class="text-center">Center aligned text on all viewport sizes.</p>

Right aligned text on all viewport sizes.

.text-right 
<p class="text-right">Right aligned text on all viewport sizes.</p>

Text transform

Transform text in components with text capitalization classes.

Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

Example Classes Snippet

Lowercased text.

.text-lowercase 
<p class="text-lowercase">Lowercased text.</p>

Uppercased text.

.text-uppercase 
<p class="text-uppercase">Uppercased text.</p>

CapiTaliZed text.

.text-capitalize 
<p class="text-capitalize">CapiTaliZed text.</p>

Text option

Font size

Convex Admin provide font large & small sizes variant classes to change font size.

Example Classes Snippet

Large text size.

.font-large-3 
    <p class="font-large-3" >Large text size.</p>

Large text size.

.font-large-2 
    <p class="font-large-2" >Large text size.</p>

Large text size.

.font-large-1 
    <p class="font-large-1" >Large text size.</p>

Medium text size.

.font-medium-3 
    <p class="font-medium-3" >Medium text size.</p>

Medium text size.

.font-medium-2 
    <p class="font-medium-2" >Medium text size.</p>

Medium text size.

.font-medium-1 
    <p class="font-medium-1" >Medium text size.</p>

Normal base text size.

N/A 
    <p>Normal base text size.</p>

Small text size.

.font-small-3 
    <p class="font-small-3" >Small text size.</p>

Small text size.

.font-small-2 
    <p class="font-small-2" >Small text size.</p>

Small text size.

.font-small-1 
    <p class="font-small-1" >Small text size.</p>
Font weight

Convex Admin provide font weight class .text-bold-{weight}, where {weight} value can be 100,200 ... 900.

Example Classes Snippet

Font weight 300

.text-bold-300 
    <p class="text-bold-300">Font weight 300.</p>

Font weight 400

.text-bold-400 
    <p class="text-bold-400">Font weight 400.</p>

Font weight 600

.text-bold-600 
    <p class="text-bold-600">Font weight 600.</p>

Font weight 700

.text-bold-700 
    <p class="text-bold-700">Font weight 700.</p>

Inline text elements

Styling for common inline HTML5 elements.

.mark and .small classes are also available to apply the same styles as <mark> and <small> while avoiding any unwanted semantic implications that the tags would bring.

While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Example Snippet

You can use the mark tag to highlight text. 

    <p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as deleted text. 

    <p><del>This line of text is meant to be treated as deleted text.</del></p>

This line of text is meant to be treated as no longer accurate. 

    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

This line of text is meant to be treated as an addition to the document. 

    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

This line of text will render as underlined 

    <p><u>This line of text will render as underlined.</u></p>

This line of text is meant to be treated as fine print. 

    <p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text. 

    <p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text. 

    <p><em>This line rendered as italicized text.</em></p>

Sample abbreviation 

    <p> Sample <abbr>Abbreviations.</abbr></p>

Sample HTML title. 

    <p> Sample <abbr title="HyperText Markup Language" class="initialism">HTML.</abbr></p>
y = m x + b 
    <p> For indicating variables use the <var> tag.</p>

Edit settings, press ctrl + , 

    <p> Use the <kbd>  to indicate input that is typically entered via keyboard.</p>
This text is meant to be treated as sample output from a computer program. 
    <p> For indicating sample output from a program use the  <samp>  tag. </p>
Inline code snippet 
    <p> Wrap inline snippets of code with <code> tag. </p>