.. | ||
headings.js | ||
index.js | ||
p.js | ||
Readme.md | ||
small.js | ||
title.js |
Joyent's font is Libre Franklin, which is available to use at Google Fonts.
The font sizes in the toolkit are based on an augmented fourth modular scale, with base font size of 15px.
Headings
Headings are available from h1
through to h4
. If demand is shown for h5
and h6
, these will be included in the toolkit.
To learn more about the correct usage of HTML headings, visit MDN web docs.
Heading 1
const React = require('react');
const H1 = require('/').H1;
<H1>Inspire the lazy</H1>;
Heading 2
const React = require('react');
const H2 = require('/').H2;
<H2>Inspire the lazy</H2>;
Heading 3
const React = require('react');
const H3 = require('/').H3;
<H3>Inspire the lazy</H3>;
Heading 4
const React = require('react');
const H4 = require('/').H4;
<H4>Inspire the lazy</H4>;
Paragraph
const React = require('react');
const P = require('/').P;
<P>
Joyent experts provide 360 degree support for modern application
architectures, including development frameworks, container orchestration
tools, and hybrid cloud infrastructures.
</P>;
Small
If you need to display content that is less important that the main body text,
or where space is more constrained, you can use the <small>
element. This will
reduce the text size to 13px.
const React = require('react');
const Small = require('/').Small;
<Small>
Triton is 100% open source and designed to eliminate cloud provider lock-in.
With support for popular container management tools like Kubernetes, augmented
by our own open source project ContainerPilot, we are working with the
community to deliver simple to operate platform services that are open and
portable.
</Small>;
Label
The <label>
element is used for captions in the user interface and information
labels (i.e. text that is not continuous body text).
Read more about using the <label>
element on the
MDN web docs.
const React = require('react');
const Label = require('/').Label;
<Label>
Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud
native applications
</Label>;