Other Text Styles

bitbucket Report an Issue Slack Join the Slack Discussion

Right-Aligned Text

<p class="right-align">Right-Aligned Text</p>

Left-Aligned Text

<p class="left-align">Left-Aligned Text</p>

Center-Aligned Text

<p class="center-align">Center-Aligned Text</p>

This sentence contains text styled as strong.

<p>This sentence contains text styled as <strong>strong</strong>.</p>

This sentence contains text styled as emphasis

<p>This sentence contains text styled as <em>emphasis</em></p>

This sentence contains text styled as strike

<p>This sentence contains text styled as <del>strike</del></p>

This sentence contains text that has been marked.

<p>This sentence contains text that has been <span class="mark-text">marked</span>.</p>

This sentence contains text that has been inserted.

<p>This sentence contains text that has been <span class="insert-text">inserted.</span></p>

Note: The following blockquote’s styling does not behave as it does when being used. To see an better example, please see the component example here.

Quote copy. A series of senences together which make a paragraph. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus caborundum e pluribus unum.

— First Last Name in Source

<div class="blockquote-wrapper">
  <div class="blockquote">
    <p class="blockquote__quote">Quote copy. A series of senences together which make a paragraph. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus caborundum e pluribus unum.</p>
    <p class="blockquote__citation">&mdash; First Last Name in <em>Source</em></p>
  </div>
</div>

The utility class `.has-background-ucla-blue` has been added so only the row has a modified background color. A second utility class `.has-white-text` has been added to turn the text white.

<div class="ucla campus has-background-ucla-blue has-white-text">
  <div class="col span_1_of_1">
    <p>The utility class `.has-background-ucla-blue` has been added so only the row has a modified background color. A second utility class `.has-white-text` has been added to turn the text white.</p>
  </div>
</div>