Typography v2.0.0+ HelixUI v2.0.0 or later required

This page is updated to the HelixUI-v2.0.0-rc.0 specs for Typography.

Typefaces

100: Open Sans Thin

300: Open Sans Light

400: Open Sans Regular

500: Open Sans Medium

700: Open Sans Bold

100: Open Sans Condensed Thin

300: Open Sans Condensed Light

400: Open Sans Condensed Regular

500: Open Sans Condensed Medium

700: Open Sans Condensed Bold

Headings

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

Subdued

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

div.hxSubdued

p.hxSubdued

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

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

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

Caption

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

p.hxCaption

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

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

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

Sub-Body

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

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

p.hxSubBody

<small>small</small>

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

Hyperlinks (a.k.a., links) should be used to navigate a user to a resource or location.

  • Buttons are better suited to initiate in-page actions.
  • Adding the disabled attribute to a link does not prevent user interaction. 
<a href="#">Link Text</a>

Inline Code

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

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

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

Keyboard

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. 

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

Code Block

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

Error Text

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">
  <fieldset>
    <legend>Login</legend>
    <p>
      <label for="txtUsername">Username</label>
      <input type="text" id="txtUsername" name="username" />
    </p>
    <p>
      <label for="txtPassword">Password</label>
      <input type="password" id="txtPassword" name="password" />
    </p>
  </fieldset>
  <p>
    <button type="submit">Log In</button>
  </p>
  <p>
    <img src="path/to/file.png" alt="pretty picture" />
  </p>
</form>
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("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
:root {
  --border-color: #bada55;
}
html {
  box-sizing: border-box;
}
*,
*::before,
*::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
 
#!/bin/bash

###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

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

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

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

you can write text [with links](http://example.com) inline or [link references][1].

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

[1]: http://example.com

---

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