Text - Codeblock
Last updated: 9/21/21
A block of code text.
Base
Use the base class pier-codeblock
on a code element.
console.log("Hello World!");
HTML markup
<code class="pier-codeblock">
<pre>console.log("Hello World!");</pre>
</code>
Sizes
Use the modifier classes pier-codeblock--xs
, pier-codeblock--sm
, or pier-codeblock--md
to change the size of the body text.
console.log("Hello World!");
console.log("Hello World!");
console.log("Hello World!");
HTML markup
<code class="pier-codeblock pier-codeblock--xs">
<pre>console.log("Hello World!");</pre></code
><code class="pier-codeblock pier-codeblock--sm">
<pre>console.log("Hello World!");</pre></code
><code class="pier-codeblock pier-codeblock--md">
<pre>console.log("Hello World!");</pre>
</code>
Dark
Use the modifier class pier-codeblock--dark
to change the style of the body text for dark UI themes.
console.log("Hello World!");
HTML markup
<code class="pier-codeblock pier-codeblock--dark">
<pre>console.log("Hello World!");</pre>
</code>
© 2021 Gumgum, Inc.