Typography

Typography

The default Font Type for Cumulocity is Roboto. It's a modern font that renders well in browsers and is readable even in small sizes. On Branded versions defaults to Helvetica Neue.

Type

You see? It's curious. Ted did figure it out - time travel.

And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know?

If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

H1 Heading 1 36px

H2 Heading 2 30px

H3 Heading 3 24px

H4 Heading 4 18px

H5 Heading 5 14px
H6 Heading 6 12px
<h1><strong>H1</strong> Heading 1 <small>36px</small></h1>
<h2><strong>H2</strong> Heading 2 <small>30px</small></h2>
<h3><strong>H3</strong> Heading 3 <small>24px</small></h3>
<h4><strong>H4</strong> Heading 4 <small>18px</small></h4>
<h5><strong>H5</strong> Heading 5 <small>14px</small></h5>
<h6><strong>H6</strong> Heading 6 <small>12px</small></h6>

Body copy

Global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs.

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die.

<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you
  put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. </p>
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless
  they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
  


Make a paragraph stand out by adding .lead.

Well, the way they make shows is, they make one show. That show's called a pilot.

<p class="lead">Well, the way they make shows is, they make one show. That show's called a pilot. </p>


For highlighting a run of text due to its relevance in another context, use the <mark> tag.

She starred in one of the ones that became nothing.

<p>She starred in one of the ones that <mark>became nothing</mark>.</p>


For indicating blocks of text that have been deleted use the <del> tag.

This line of text is meant to be treated as deleted text.

<p><del>This line of text is meant to be treated as deleted text.</del></p>


To underline text use the <u> tag.

This line of text will render as underlined

<p><u>This line of text will render as underlined</u></p>


For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print.

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small></p>
<p class="small">This line of text is meant to be treated as fine print.</p>


For emphasizing a snippet of text with a heavier font-weight.

The following text is rendered as bold text.

<p>The following text is <strong>rendered as bold text</strong>.</p>


For emphasizing a snippet of text with italics.

The following text is rendered as italic text.

<p>The following text is <em>rendered as italic text</em>.</p>

Text alignment and capitalization

Easily realign text to components with text alignment classes or transform text in components with text capitalization classes.

Text align

Left aligned text.

Center aligned text.

Right aligned text.

Capitalization

Lowercased text.

Uppercased text.

Capitalized text.

<p class="legend form-block">Text align</p>
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

<p class="legend form-block">Capitalization</p>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Truncation and wrap

Truncate text or change the word wrap according to your needs.

No wrap text — Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered


Truncate text — Specifies how overflowed content that is not displayed should be signaled to the user by displaying an ellipsis (…).


Break word - To prevent overflow, words may be broken at any point — useful for long strings in table cells for instance (e.g. thisIsVeryLongStringForCumulocityMeasurementsForSourceAndDateAndValueFragmentTypeAndValueFragmentSeriesAndType).


Pre wrap - Whitespace is preserved by the browser, including line breaks.

<p class="text-nowrap">No wrap text — Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered</p>
<p class="text-truncate">Truncate text — Specifies how overflowed content that is not displayed should be signaled to the user by displaying an ellipsis (…).</p>
<p class="text-break-word">Break word - To prevent overflow, words may be broken at any point — useful for long strings in table cells for instance (e.g. thisIsVeryLongStringForCumulocityMeasurementsForSourceAndDateAndValueFragmentTypeAndValueFragmentSeriesAndType).</p>
<p class="text-pre-wrap">Pre wrap - Whitespace is preserved by the browser, 
including line breaks.</p>

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

An abbreviation of the word attribute is attr.

<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Cumulocity GmbH.
Schiessstraße 43
40549 Düsseldorf
Germany
P: (123) 456-7890
Bernd Groß
bernd.gross@cumulocity.com
<address>
  <strong>Cumulocity GmbH.</strong><br>
  Schiessstraße 43<br>
  40549 Düsseldorf<br>
  Germany<br>
  <abbr title="Phone">P:</abbr> <a href="tel:1234567890">(123) 456-7890</a>
</address>
<address>
  <strong>Bernd Groß</strong><br>
  <a href="mailto:#">bernd.gross@cumulocity.com</a>
</address>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>

Variables

For indicating variables use the <var> tag.

y = mx + b

<p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program.

<p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>