Font Family

This attribute allows you to assign a specific font-family to an element. Font family arguments can be customized using the variables found in the themeing section of the documentation.

Usage:

<div data-c-font="STYLE"></div>

Practical Example:

<p data-c-font="serif"></p>

Available Arguments

# STYLE

sans
serif
script
mono / monospace

Scale & Line Height

Clone provides a built in means of controlling a typography scale based on a ratio. The system sets the base font to the user's default browser setting to begin with. By default, Clone uses a 1.333 scale for determining the size of the typography. This can be changed by modifying the $clone-font-scale variable. This scale appears as follows:

Heading 01

Heading 02

Heading 03

Heading 04

Heading 05

Paragraph Copy

Captions & Labels

Please note that this scale is not automatically applied to the heading elements and must be applied manually using the data-c-font-size="SIZE" property. Headings can also be modified using the data-c-heading="HEADING" attribute described below.

# SIZE

h1
h2
h3
h4
h5
normal / regular
small

Line height defaults to 1.5, but can manually changed using the $clone-line-height variable.

Headings

This attribute allows you to assign consistent styles to an element that represents a heading. This attribute is designed in a way that it can be applied to any text element, but generally, it should be used to consistently style the headings in your project to ensure typographic consistency.

Usage:

<h1 data-c-heading="HEADING"></h1>

Practical Example:

<h2 data-c-heading="h2"></h2>

Available Arguments

# HEADING

h1
h2
h3
h4
h5

Theme Variables

The following variables allow you to customize the way headings are displayed project wide. These variables are available for headings 1 through 5, but the example below only shows heading level 1 (replace the number) for brevity.

# THEME VARIABLES

$clone-heading-1-border-color
$clone-heading-1-border-style
$clone-heading-1-border-width
$clone-heading-1-color
$clone-heading-1-font
$clone-heading-1-font-size
$clone-heading-1-font-weight

Font Color

This attribute allows you to assign a font color to an element and all of its children.

Usage:

<div data-c-color="COLOR"></div>

Practical Example:

<p data-c-color="c1"></p>

Available Arguments

# COLOR

white
gray
black
c1 (Theme Color 01)
c2 (Theme Color 02)
c3 (Theme Color 03)
c4 (Theme Color 04)
c5 (Theme Color 05)
stop
slow
go

Font Style

This attribute allows you to reset or assign a text style to an element. You can use data-c-font-weight="bold" (found below) to bold items instead.

Usage:

<div data-c-font-style="STYLE"></div>

Practical Example:

<p data-c-font-style="underline"></p>

Available Arguments

# STYLE

reset
italic
underline

Font Weight

This attribute allows you to assign a font weight to an element.

Usage:

<div data-c-font-weight="WEIGHT"></div>

Practical Example:

<p data-c-font-weight="bold"></p>

Available Arguments

# WEIGHT

100
200
300
400 / normal
500
600
700 / bold
800
900

Changelog

Version 2.4.17

• Added a reset option for data-c-font-style.

Version 2.4.11

• Added support for styleguide style heading theme variables to help users ensure consistent styles for 5 levels of heading.
  • A new heading section was added to the typography page to explain how headings work.
  • The whole documentation site was updated to reflect these changes.

Version 2.3.9

• Fixes quite a few inheritance bugs for colour, font, weight, etc.

Version 2.3.8

• Adds monospace alternative to mono for data-c-font.

Version 2.3.6

• Fixes a bug with data-c-font-style not working with the underline value.

Version 2.3.4

• Fixes font scale to use custom variable.

Version 2.3.1

• Added a regular utility argument for font size.