{div2:class=fl-col-fixed fl-force-left}
{include:FSS text examples navigation}
{div2}
{div2:class=fl-col-flex}
h2. Colours
Note that there are many other colours available. See the [FSS Cheat Sheet] for specifics.
{html}
<p class="fl-text-aqua">This paragraph is "aqua" coloured.</p>
<p class="fl-text-fuchsia">This paragraph is "fuchsia" coloured.</p>
<p class="fl-text-olive">This paragraph is "olive" coloured.</p>
<p class="fl-text-teal">This paragraph is "teal" coloured.</p>
<p class="fl-text-yellow">This paragraph is "yellow" coloured.</p>
{html}
The markup and classes used to produce this example:
{code:html}
<p class="fl-text-aqua">This paragraph is "aqua" coloured.</p>
<p class="fl-text-fuchsia">This paragraph is "fuchsia" coloured.</p>
<p class="fl-text-olive">This paragraph is "olive" coloured.</p>
<p class="fl-text-teal">This paragraph is "teal" coloured.</p>
<p class="fl-text-yellow">This paragraph is "yellow" coloured.</p>
{code}
NOTE: The {{fl-text-*}} classes are applied to the paragraph tags and so apply only that paragraph. The class could be applied to a {{<div>}} surrounding many paragraphs to apply the style to all paragraphs.
h2. Highlight Colours
{html}
<p class="fl-highlight-yellow">This paragraph has "yellow" highlight.</p>
<p class="fl-highlight-green">This paragraph has "green" highlight.</p>
<p class="fl-highlight-blue">This paragraph has "blue" highlight.</p>
{html}
The markup and classes used to produce this example:
{code:html}
<p class="fl-highlight-yellow">This paragraph has "yellow" highlight.</p>
<p class="fl-highlight-green">This paragraph has "green" highlight.</p>
<p class="fl-highlight-blue">This paragraph has "blue" highlight.</p>
{code}
NOTE: The {{fl-highlight-*}} classes are applied to the paragraph tags and so apply only that paragraph. The class could be applied to a {{<div>}} surrounding many paragraphs to apply the style to all paragraphs.
{div2}
|