ember-slimguide/dist/docs/concepts/typography.json

A test for bottled-ember

{"data":{"type":"contents","id":"concepts/typography","attributes":{"html":"<h1 id=\"typography\">Typography</h1>\n<h3 id=\"usage\">Usage</h3>\n<h4 id=\"legibility\">Legibility</h4>\n<p>Text legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.</p>\n<p>Please refer to the <a href=\"colors\">Colors</a> section for more information on color contrast and accessibility.</p>\n<h3 id=\"sizes\">Sizes</h3>\n<p>Disclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the <code>&lt;h1&gt;</code> for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all <code>&lt;h2&gt;</code> on that page need <code>.text-xl</code> to look like <code>&lt;h1&gt;</code> and so on.</p>\n<p>Use <code>.text-sm</code> for small headings or notice paragraphs.</p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-sm\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p>Use <code>.text-base</code> for body text, navigation items or links.</p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-base\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p><code>.text-base</code> is also the default paragraph size.</p>\n<pre><code class=\"html language-html\">&lt;div&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p>Use <code>.text-md</code> for section headings. This is also the default size for the <code>h3</code> element.</p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-md\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p>Use <code>.text-lg</code> for content page headings. This is also the default size for the <code>h2</code> element.</p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-lg\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p>Use <code>.text-xl</code> for landing page headlines. This is also the default size for the <code>h1</code> element.</p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-xl\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p>Use <code>.text-hero-xl</code> for headlines in page headers (heros).</p>\n<pre><code class=\"html language-html\">&lt;h1 class=\"text-hero-xl\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/h1&gt;\n</code></pre>\n<p>Use <code>.text-hero-base</code> for plain text in page headers (heros).</p>\n<pre><code class=\"html language-html\">&lt;p class=\"text-hero-base\"&gt;\n  Ember.js is a productive, battle-tested JavaScript framework for building\n  modern web applications. It includes everything you need to build rich UIs\n  that work on any device.\n&lt;/p&gt;\n</code></pre>\n<h2 id=\"weights\">Weights</h2>\n<p>Use <code>.regular</code></p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-md regular\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>\n<p>Use <code>.bold</code> if you must style something as bold and no semantic information needs to be carried. Prefer using <code>&lt;strong&gt;</code>.</p>\n<pre><code class=\"html language-html\">&lt;div class=\"text-md bold\"&gt;\n  Build with the teams that never stop shipping.\n&lt;/div&gt;\n</code></pre>","content":"# Typography\n\n### Usage\n\n#### Legibility\n\nText legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.\n\nPlease refer to the <a href=\"colors\">Colors</a> section for more information on color contrast and accessibility.\n\n### Sizes\n\nDisclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the `<h1>` for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all `<h2>` on that page need `.text-xl` to look like `<h1>` and so on.\n\nUse `.text-sm` for small headings or notice paragraphs.\n\n```html\n<div class=\"text-sm\">\n  Build with the teams that never stop shipping.\n</div>\n```\n\nUse `.text-base` for body text, navigation items or links.\n\n```html\n<div class=\"text-base\">\n  Build with the teams that never stop shipping.\n</div>\n```\n\n`.text-base` is also the default paragraph size.\n\n```html\n<div>\n  Build with the teams that never stop shipping.\n</div>\n```\n\nUse `.text-md` for section headings. This is also the default size for the `h3` element.\n\n```html\n<div class=\"text-md\">\n  Build with the teams that never stop shipping.\n</div>\n```\n\nUse `.text-lg` for content page headings. This is also the default size for the `h2` element.\n\n```html\n<div class=\"text-lg\">\n  Build with the teams that never stop shipping.\n</div>\n```\n\nUse `.text-xl` for landing page headlines. This is also the default size for the `h1` element.\n\n```html\n<div class=\"text-xl\">\n  Build with the teams that never stop shipping.\n</div>\n```\n\nUse `.text-hero-xl` for headlines in page headers (heros).\n\n```html\n<h1 class=\"text-hero-xl\">\n  Build with the teams that never stop shipping.\n</h1>\n```\n\nUse `.text-hero-base` for plain text in page headers (heros).\n\n```html\n<p class=\"text-hero-base\">\n  Ember.js is a productive, battle-tested JavaScript framework for building\n  modern web applications. It includes everything you need to build rich UIs\n  that work on any device.\n</p>\n```\n\n## Weights\n\nUse `.regular`\n\n```html\n<div class=\"text-md regular\">\n  Build with the teams that never stop shipping.\n</div>\n```\n\nUse `.bold` if you must style something as bold and no semantic information needs to be carried. Prefer using `<strong>`.\n\n```html\n<div class=\"text-md bold\">\n  Build with the teams that never stop shipping.\n</div>\n```"}}}