Codeblocks

Overview

Code Blocks are defined using the <pre> and <code> elements. Using a <code> element alone will result in an inline code block. Wrapping it in a <pre> block will result in a separated block.

Code blocks have a few built in features:

1. Setting the background and text colors can be done with the fc-bg-{color} and fc-text-{color} classes defined in colors.
2. By adding the class fc-border-left a decorative left border can be added. This border can be colored using the fc-border-{color} class, defined in colors.

<p>
  This <code>code block</code> would be inline
</p>
<pre class="fc-bg-primary-light"><code>
  Whereas this would be it's own block
</code></pre>

Background Colors

All of the default colors are supported. It is important to make sure you manage color contrast with text colors if using darker background colors.

<pre class="fc-bg-primary-light">
  <code>
    This code block has a primary-light background
  </code>
</pre>

<pre class="fc-bg-primary-dark fc-text-white">
  <code>
    This code block has a primary-dark background and white text
  </code>
</pre>

<pre class="fc-bg-warn-light">
  <code>
    This code block has a warn-light background
  </code>
</pre>

<pre class="fc-bg-secondary fc-text-white">
  <code>
    This code block has a secondary background and white text
  </code>
</pre>

Border Colors

With The class fc-border-left a decorative left border will be added to the code block. This can be styled with the fc-border-{color} class, defined in colors. Borders can be combined with background colors, as well as mixed and matched.

<pre class="fc-border-left fc-border-secondary">
  <code>
    This code block has a secondary border and no background set
  </code>
</pre>

<pre class="fc-bg-primary-light fc-border-left fc-border-primary">
  <code>
    This code block has a primary border and primary-light background
  </code>
</pre>

<pre class="fc-bg-warn-light fc-border-left fc-border-error">
  <code>
    This code block has an error border and and warn-light background
  </code>
</pre>