Skip to main content

Typography v0.1.6+ HelixUI v0.1.6 or later required


100: Roboto Thin

300: Roboto Light

400: Roboto Regular

500: Roboto Medium

700: Roboto Bold

100: Roboto Mono Thin

300: Roboto Mono Light

400: Roboto Mono Regular

500: Roboto Mono Medium

700: Roboto Mono Bold


Heading One

Heading Two

Heading Three

Heading Four

Heading Five
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>

CSS class overrides are available if semantic elements don't match up with expected visual style.

Style Element Class
Heading One <h1> .hxHeading-1
Heading Two <h2> .hxHeading-2
Heading Three <h3> .hxHeading-3
Heading Four <h4> .hxHeading-4
Heading Five <h5> .hxHeading-5


Add the .hxSubdued CSS class to any element to apply a muted appearance.



<div class="hxSubdued">div.hxSubdued</div>

<p class="hxSubdued">p.hxSubdued</p>

<span class="hxSubdued">span.hxSubdued</span>


Apply the Helix "caption" style with any of the following configurations:

  • A <caption> element within a Table
  • A <figcaption> element within a <figure class="hxFigure">
  • Add the .hxCaption CSS class to any element
figure.hxFigure figcaption
table.hxTable caption


<figure class="hxFigure">
  <figcaption>figure.hxFigure figcaption</figcaption>

<table class="hxTable">
  <caption>table.hxTable caption</caption>

<p class="hxCaption">p.hxCaption</p>


Apply the "sub-body" style with any of the following:

  • A <small> element
  • Add the .hxSubBody CSS class to any element



<p class="hxSubBody">p.hxSubBody</p>

Links should be used to refer a user to a resource or location.

Buttons are better suited to initiate in-page actions. Adding the disabled attribute to a link will not prevent user interaction. Consider using a <button> instead.
<a href="#">Normal Link</a>
<a href="#" disabled>"Disabled" Link</a>

Inline Code

Use the <code> element to differentiate descriptive text from code snippets.

Add an event listener with the EventTarget.addEventListener() function.

  Add an event listener with the <code>EventTarget.addEventListener()</code> function.


Use the <kbd> element to differentiate descriptive text from instructional key presses.

Press Ctrl+Z (Command+Z on Mac) to undo the most recent action.

  Press <kbd>Ctrl+Z</kbd> (<kbd>Command+Z</kbd> on Mac)
  to undo the most recent action.

Code Block

[Insert Code Here]
<pre><code>[Insert Code Here]</code></pre>

Error Message

Added: v0.4.0

Error message goes here
<hx-error>Error message goes here</hx-error>

Syntax Highlighting

HelixUI provides a built-in theme for use with the highlight.js library.

Below are some examples of the syntax highlighting in action.

HTML JavaScript CSS diff bash ini markdown
<script type="text/javascript" src="path/to/script.js"></script>
<link rel="stylesheet" href="path/to/style.css" />
<!-- HTML Comment -->
<form method="POST" action="submit.html">
      <label for="txtUsername">Username</label>
      <input type="text" id="txtUsername" name="username" />
      <label for="txtPassword">Password</label>
      <input type="password" id="txtPassword" name="password" />
    <button type="submit">Log In</button>
    <img src="path/to/file.png" alt="pretty picture" />
HTML Syntax Highlighting Example
 * @description Multi-line comment
 * @returns {String}
// Inline Comment
var legacyVariable;
const REGEXP = /h(iy|ell)o*/ig;
const array = [ null, true, false ];
const obj = {
  number: 42,
  integer: 42.0,
  s_string: 'single quotes',
  d_string: "double quotes"
function greet (name: 'World') {
  if (foo !== 'bar') {
    return 'nope';
  } else if (foo || bar) {
    return 'maybe';
  } else if (foo && bar) {
    return 'wut';
  return `Hello ${name}!`;
JavaScript Syntax Highlighting Example
/* CSS Comment */
@import url(',100i,300,300i,400,400i,700,700i');
:root {
  --border-color: #bada55;
html {
  box-sizing: border-box;
*::after {
  box-sizing: inherit;
#navigation {
  border: 1px solid var(--border-color);
  padding: 1em;
  margin: 0;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0,5), white);
input[type="checkbox"]:checked {
  /* ... */
.text-center {
  text-align: center !important;
CSS Syntax Highlighting Example
Index: languages/ini.js
--- languages/ini.js    (revision 199)
+++ languages/ini.js    (revision 200)
@@ -1,8 +1,7 @@
 hljs.LANGUAGES.ini =
   case_insensitive: true,
-  defaultMode:
-  {
+  defaultMode: {
     contains: ['comment', 'title', 'setting'],
     illegal: '[^\\s]'

*** /path/to/original timestamp
--- /path/to/new      timestamp
*** 1,3 ****
--- 1,9 ----
+ This is an important
+ notice! It should
+ therefore be located at
+ the beginning of this
+ document!

! compress the size of the
! changes.

  It is important to spell
diff Syntax Highlighting Example

###### CONFIG

if [ "$UID" -ne 0 ]
  echo "Superuser rights required"
  exit 2

  echo -e "# Host ${HOME_DIR}$1/$2 :"
bash Syntax Highlighting Example
; boilerplate
name = "some_name"
authors = ["Author"]
description = "This is \
a description"

name = ${NAME}
default = True
auto = no
counter = 1_000
.ini Syntax Highlighting Example
# hello world

you can write text [with links]( inline or [link references][1].

* one _thing_ has *em*phasis
* two __things__ are **bold**



hello world

<this_is inline="xml"></this_is>

> markdown is so cool

    so are code segments

1. one thing (yeah!)
2. two thing `i can write code`, and `more` wipee!
Markdown Syntax Highlighting Example

See Also