mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 21:03:23 +02:00
Code Issues Releases Wiki Activity

kss - avatars & typography

Browse Source
This commit is contained in:
Luis Sacristán
2017-08-28 22:48:58 +02:00
parent 4706b3c6ee
commit be4827d998
56 changed files with 5147 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

996
doc/styleguide/section-typography.html Normal file
View File

@@ -0,0 +1,996 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>WebSlides</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../../static/css/webslides.css">
</head>
<body id="kss-node" >
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">WebSlides</h1>
</header>
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="./">
<span class="kss-nav__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-avatars.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Avatars</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Base</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-flexblock.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Flexblock</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layout.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Layout</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-slide.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Slide</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Typography</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-columns">
<span class="kss-nav__ref ">6.1</span
><span class="kss-nav__name">Columns</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-context">
<span class="kss-nav__ref ">6.2</span
><span class="kss-nav__name">Context</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-data">
<span class="kss-nav__ref ">6.3</span
><span class="kss-nav__name">Data</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-emoji">
<span class="kss-nav__ref ">6.4</span
><span class="kss-nav__name">Emoji</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-info">
<span class="kss-nav__ref ">6.5</span
><span class="kss-nav__name">Info Messages</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-interviews">
<span class="kss-nav__ref ">6.6</span
><span class="kss-nav__name">Interviews</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-intro">
<span class="kss-nav__ref ">6.7</span
><span class="kss-nav__name">Intro</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-label">
<span class="kss-nav__ref ">6.8</span
><span class="kss-nav__name">Label</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-landings">
<span class="kss-nav__ref ">6.9</span
><span class="kss-nav__name">Landings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-lowercase">
<span class="kss-nav__ref ">6.10</span
><span class="kss-nav__name">Lowercase</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-pull_quote">
<span class="kss-nav__ref ">6.11</span
><span class="kss-nav__name">Pull Quote</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-separator">
<span class="kss-nav__ref ">6.12</span
><span class="kss-nav__name">Separator</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-serif">
<span class="kss-nav__ref ">6.13</span
><span class="kss-nav__name">Serif</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-subtitle">
<span class="kss-nav__ref ">6.14</span
><span class="kss-nav__name">Subtitule</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-symbols">
<span class="kss-nav__ref ">6.15</span
><span class="kss-nav__name">Symbols</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-typography.html#kssref-typography-uppercase">
<span class="kss-nav__ref ">6.16</span
><span class="kss-nav__name">Uppercase</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-typography" class="kss-section kss-section--depth-1 ">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-typography">
<span class="kss-title__ref">
6
<span class="kss-title__permalink-hash">
#Typography
</span>
</span>
Typography
</a>
</h1>
</div>
</div>
<section id="kssref-typography-columns" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-columns">
<span class="kss-title__ref">
6.1
<span class="kss-title__permalink-hash">
#Typography.Columns
</span>
</span>
Columns
</a>
</h2>
<div class="kss-description">
<p>Magazine Two Columns</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;text-cols&quot;&gt;&lt;p&gt;&lt;strong&gt;Column 1&lt;/strong&gt; text&lt;/p&gt;&lt;p&gt;&lt;strong&gt;Column 2&lt;/strong&gt; text&lt;/p&gt;&lt;/div&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 346
</div>
</section>
<section id="kssref-typography-context" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-context">
<span class="kss-title__ref">
6.2
<span class="kss-title__permalink-hash">
#Typography.Context
</span>
</span>
Context
</a>
</h2>
<div class="kss-description">
<p>Heading with border</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-context">Why WebSlides?</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-context&quot;&gt;Why WebSlides?&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 376
</div>
</section>
<section id="kssref-typography-data" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-data">
<span class="kss-title__ref">
6.3
<span class="kss-title__permalink-hash">
#Typography.Data
</span>
</span>
Data
</a>
</h2>
<div class="kss-description">
<p>Numbers (results, sales... )-</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-data">23,478,289</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-data&quot;&gt;23,478,289&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 314
</div>
</section>
<section id="kssref-typography-emoji" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-emoji">
<span class="kss-title__ref">
6.4
<span class="kss-title__permalink-hash">
#Typography.Emoji
</span>
</span>
Emoji
</a>
</h2>
<div class="kss-description">
<p>You&#39;ll love this</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-emoji">😀😁😂😅😉😋😎😍</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-emoji&quot;&gt;😀😁😂😅😉😋😎😍&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 296
</div>
</section>
<section id="kssref-typography-info" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-info">
<span class="kss-title__ref">
6.5
<span class="kss-title__permalink-hash">
#Typography.Info
</span>
</span>
Info Messages
</a>
</h2>
<div class="kss-description">
<p>Error, warning, success...</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-info">Psychiatrists have long debated whether it really exists.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-info&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 546
</div>
</section>
<section id="kssref-typography-interviews" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-interviews">
<span class="kss-title__ref">
6.6
<span class="kss-title__permalink-hash">
#Typography.Interviews
</span>
</span>
Interviews
</a>
</h2>
<div class="kss-description">
<p>Questions &amp; Answers</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<dl class="text-interview">
<dt>Driftwood</dt>
<dd>
<p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
</dd>
<dt>Fiorello</dt>
<dd>
<p>No. It's no good.</p>
</dd>
<dt>Driftwood</dt>
<dd>
<p>What's the matter with it?</p>
</dd>
<dt>Fiorello</dt>
<dd>
<p>I don't know, let's hear it again.</p>
</dd>
</dl>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class&#x3D;&quot;text-interview&quot;&gt;
&lt;dt&gt;Driftwood&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;It says, &quot;The party of the first part shall be known in this contract as the party of the first part.&quot; How do you like that? That&#x27;s pretty neat, eh?&lt;/p&gt;
&lt;/dd&gt;
&lt;dt&gt;Fiorello&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;No. It&#x27;s no good.&lt;/p&gt;
&lt;/dd&gt;
&lt;dt&gt;Driftwood&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;What&#x27;s the matter with it?&lt;/p&gt;
&lt;/dd&gt;
&lt;dt&gt;Fiorello&lt;/dt&gt;
&lt;dd&gt;
&lt;p&gt;I don&#x27;t know, let&#x27;s hear it again.&lt;/p&gt;
&lt;/dd&gt;
&lt;/dl&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 504
</div>
</section>
<section id="kssref-typography-intro" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-intro">
<span class="kss-title__ref">
6.7
<span class="kss-title__permalink-hash">
#Typography.Intro
</span>
</span>
Intro
</a>
</h2>
<div class="kss-description">
<p>Typography Classes = .text-</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-intro">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-intro&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 206
</div>
</section>
<section id="kssref-typography-label" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-label">
<span class="kss-title__ref">
6.8
<span class="kss-title__permalink-hash">
#Typography.Label
</span>
</span>
Label
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;&lt;span class&#x3D;&quot;text-label&quot;&gt;Website:&lt;/span&gt; &lt;a href&#x3D;&quot;#&quot;&gt;http://webslides.tv&lt;/a&gt;&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 333
</div>
</section>
<section id="kssref-typography-landings" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-landings">
<span class="kss-title__ref">
6.9
<span class="kss-title__permalink-hash">
#Typography.Landings
</span>
</span>
Landings
</a>
</h2>
<div class="kss-description">
<p>h1,h2... Promo/Landings</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<h1 class="text-landing">Landings</h1>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class&#x3D;&quot;text-landing&quot;&gt;Landings&lt;/h1&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 233
</div>
</section>
<section id="kssref-typography-lowercase" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-lowercase">
<span class="kss-title__ref">
6.10
<span class="kss-title__permalink-hash">
#Typography.Lowercase
</span>
</span>
Lowercase
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-lowercase">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-lowercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 286
</div>
</section>
<section id="kssref-typography-pull_quote" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-pull_quote">
<span class="kss-title__ref">
6.11
<span class="kss-title__permalink-hash">
#Typography.Pull_Quote
</span>
</span>
Pull Quote
</a>
</h2>
<div class="kss-description">
<p>Pull Quote Right/Left</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
&lt;p class&#x3D;&quot;text-pull-right&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;
&lt;p&gt;Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.&lt;/p&gt;
&lt;p class&#x3D;&quot;text-pull-left&quot;&gt;Psychiatrists have long debated whether it really exists.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 449
</div>
</section>
<section id="kssref-typography-separator" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-separator">
<span class="kss-title__ref">
6.12
<span class="kss-title__permalink-hash">
#Typography.Separator
</span>
</span>
Separator
</a>
</h2>
<div class="kss-description">
<p>Stars <em> </em> *</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-separator">Separator</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-separator&quot;&gt;Separator&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 418
</div>
</section>
<section id="kssref-typography-serif" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-serif">
<span class="kss-title__ref">
6.13
<span class="kss-title__permalink-hash">
#Typography.Serif
</span>
</span>
Serif
</a>
</h2>
<div class="kss-description">
<p>Maitree font</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-serif">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-serif&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 220
</div>
</section>
<section id="kssref-typography-subtitle" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-subtitle">
<span class="kss-title__ref">
6.14
<span class="kss-title__permalink-hash">
#Typography.Subtitle
</span>
</span>
Subtitule
</a>
</h2>
<div class="kss-description">
<p>Subtitle (Before h1, h2)</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-subtitle&quot;&gt;Powered by &lt;a href&#x3D;&quot;#&quot;&gt;#WebSlides&lt;/a&gt; &lt;code&gt;.text-subtitle&lt;/code&gt;&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 250
</div>
</section>
<section id="kssref-typography-symbols" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-symbols">
<span class="kss-title__ref">
6.15
<span class="kss-title__permalink-hash">
#Typography.Symbols
</span>
</span>
Symbols
</a>
</h2>
<div class="kss-description">
<p>Stars <em> </em> *</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-symbols">* * *</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-symbols&quot;&gt;* * *&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 404
</div>
</section>
<section id="kssref-typography-uppercase" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-typography-uppercase">
<span class="kss-title__ref">
6.16
<span class="kss-title__permalink-hash">
#Typography.Uppercase
</span>
</span>
Uppercase
</a>
</h2>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example
</div>
<div class="kss-modifier__example">
<p class="text-uppercase">Create a simple web presence.</p>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class&#x3D;&quot;text-uppercase&quot;&gt;Create a simple web presence.&lt;/p&gt;</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>_typography.scss</code>, line 276
</div>
</section>
</article>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>