Code

Can be used for displaying code or formuale.

  • Add the class .some-class to the element to format it.
  • 10 + 5 = 15
  • The formula for force is f = ma.
<ul>
  <li>Add the class <code class="code">.some-class</code> to the element to format it.</li>
  <li><code class="code">10 + 5 = 15</code></li>
  <li>The formula for force is <code class="code">f = ma</code>.</li>
</ul>

Monospaced system fonts are used by default for elements with the .code class for better code readibility.

Keyboard input #

The <kbd> element can be used for keyboard inputs or keys.

  • Toggle dark mode by pressing shift + D.
  • Toggle sidebar by pressing shift + S.
  • Filter docs (when sidebar is open) by pressing shift + F.
<ul>
  <li>Toggle dark mode by pressing <kbd>shift</kbd> + <kbd>D</kbd>.</li>
  <li>Toggle sidebar by pressing <kbd>shift</kbd> + <kbd>S</kbd>.</li>
  <li>Filter docs (when sidebar is open) by pressing <kbd>shift</kbd> + <kbd>F</kbd>.</li>
</ul>

Block level code #

For code blocks that require syntax highlighting, we highly recommend libraries such as highlight.js , as these are specifically built to deal with the complex nature of code highlighting and formatting. All the block code containers found on our documentation is using the aforementioned library with a custom theme.


Up next: Image

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.