cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Javier Arce
2016-01-18 11:41:44 +01:00
parent 82f2702da2
commit 0233140edf
6 changed files with 1006 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cartostyles.css
View File

File diff suppressed because one or more lines are too long

BIN
fonts/cartoIcon.eot Normal file
View File

Binary file not shown.

288
fonts/cartoIcon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
fonts/cartoIcon.ttf Normal file
View File

Binary file not shown.

BIN
fonts/cartoIcon.woff Normal file
View File

Binary file not shown.

717
styleguide/index.html
View File

@@ -10101,6 +10101,18 @@ return jQuery;
<div id="styleguide-menu">
<ul>
<li>
<a class="submenulink" href="#" data-section="Colors">Colors</a>
<ul class="submenu" data-submenu="Colors">
<li><a href="#Colors-line">line</a></li>
<li><a href="#Colors-other">other</a></li>
<li><a href="#Colors-structure">structure</a></li>
<li><a href="#Colors-typography">typography</a></li>
</ul>
</li>
<li>
<a class="sectionlink" href="#" data-section="Icon font">Icon font</a>
</li>
<li>
<a class="sectionlink" href="#" data-section="Loader">Loader</a>
</li>
@@ -10115,10 +10127,687 @@ return jQuery;
<li><a href="#Shapes-threePoints">threePoints</a></li>
</ul>
</li>
<li>
<a class="sectionlink" href="#" data-section="Typography">Typography</a>
</li>
</ul>
</div>
<div id="styleguide">
<div class="section" id="Colors-line" data-section="Colors" data-heading="line">
<div class="comment">
<h1>Colors/line</h1>
</div>
<div class="result">
<div class="box Color-Blue"></div>
<div class="box Color-HoverLine"></div>
<div class="box Color-MainLine"></div>
<div class="box Color-SecondaryLine"></div>
</div>
<div class="markup hljs">
<pre>
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Blue"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-HoverLine"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-MainLine"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-SecondaryLine"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
</div>
</div>
<div class="section" id="Colors-other" data-section="Colors" data-heading="other">
<div class="comment">
<h1>Colors/other</h1>
</div>
<div class="result">
<div class="box Color-Higlight"></div>
<div class="box Color-Alert"></div>
<div class="box Color-Public"></div>
<div class="box Color-Link"></div>
<div class="box Color-Password"></div>
<div class="box Color-Error"></div>
</div>
<div class="markup hljs">
<pre>
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Higlight"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Alert"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Public"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Link"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Password"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Error"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
</div>
</div>
<div class="section" id="Colors-structure" data-section="Colors" data-heading="structure">
<div class="comment">
<h1>Colors/structure</h1>
</div>
<div class="result">
<div class="box Color-MainDark"></div>
<div class="box Color-SecondaryDark"></div>
<div class="box Color-Blue"></div>
<div class="box Color-White"></div>
<div class="box Color-SecondaryBackground"></div>
<div class="box Color-ThirdBackground"></div>
</div>
<div class="markup hljs">
<pre>
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-MainDark"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-SecondaryDark"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Blue"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-White"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-SecondaryBackground"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-ThirdBackground"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
</div>
</div>
<div class="section" id="Colors-typography" data-section="Colors" data-heading="typography">
<div class="comment">
<h1>Colors/typography</h1>
</div>
<div class="result">
<div class="box Color-MainDark"></div>
<div class="box Color-Type02"></div>
<div class="box Color-Type03"></div>
<div class="box Color-Type04"></div>
<div class="box Color-White"></div>
<div class="box Color-Blue"></div>
</div>
<div class="markup hljs">
<pre>
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-MainDark"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Type02"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Type03"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Type04"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-White"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
&lt;<span class="hljs-keyword">div</span> <span class="hljs-type">class</span>=<span class="hljs-string">"box Color-Blue"</span>&gt;&lt;/<span class="hljs-keyword">div</span>&gt;
</pre>
</div>
</div>
<div class="section" id="Icon_font-" data-section="Icon font" data-heading="">
<div class="comment">
<h1>Icon font</h1>
</div>
<div class="result">
<h4>Clock</h4>
<i class="IconFont IconFont-Clock"></i>
<h4>Stats</h4>
<i class="IconFont IconFont-Stats"></i>
<h4>Heart--empty</h4>
<i class="IconFont IconFont-Heart--empty"></i>
<h4>Heart--fill</h4>
<i class="IconFont IconFont-Heart--fill"></i>
<h4>Alert</h4>
<i class="IconFont IconFont-Alert"></i>
<h4>Rows</h4>
<i class="IconFont IconFont-Rows"></i>
<h4>Check</h4>
<i class="IconFont IconFont-Check"></i>
<h4>Dribbble</h4>
<i class="IconFont IconFont-Dribbble"></i>
<h4>Twitter</h4>
<i class="IconFont IconFont-Twitter"></i>
<h4>Wizard</h4>
<i class="IconFont IconFont-Wizard"></i>
<h4>Info</h4>
<i class="IconFont IconFont-Info"></i>
<h4>Fork</h4>
<i class="IconFont IconFont-Fork"></i>
<h4>Facebook</h4>
<i class="IconFont IconFont-Facebook"></i>
<h4>Folder</h4>
<i class="IconFont IconFont-Folder"></i>
<h4>Dropbox</h4>
<i class="IconFont IconFont-Dropbox"></i>
<h4>Cloud</h4>
<i class="IconFont IconFont-Cloud"></i>
<h4>Step</h4>
<i class="IconFont IconFont-Step"></i>
<h4>AddDocument</h4>
<i class="IconFont IconFont-AddDocument"></i>
<h4>ArrowNext</h4>
<i class="IconFont IconFont-ArrowNext"></i>
<h4>ArrowPrev</h4>
<i class="IconFont IconFont-ArrowPrev"></i>
<h4>Close</h4>
<i class="IconFont IconFont-Close"></i>
<h4>CartoFante</h4>
<i class="IconFont IconFont-CartoFante"></i>
<h4>Lock</h4>
<i class="IconFont IconFont-Lock"></i>
<h4>CartoDB</h4>
<i class="IconFont IconFont-CartoDB"></i>
<h4>Lens</h4>
<i class="IconFont IconFont-Lens"></i>
<h4>CloseLimits</h4>
<i class="IconFont IconFont-CloseLimits"></i>
<h4>DefaultUser</h4>
<i class="IconFont IconFont-DefaultUser"></i>
<h4>Cockroach</h4>
<i class="IconFont IconFont-Cockroach"></i>
<h4>Floppy</h4>
<i class="IconFont IconFont-Floppy"></i>
<h4>Trash</h4>
<i class="IconFont IconFont-Trash"></i>
<h4>Wifi</h4>
<i class="IconFont IconFont-Wifi"></i>
<h4>Unlock</h4>
<i class="IconFont IconFont-Unlock"></i>
<h4>Unlock--withEllipsis</h4>
<i class="IconFont IconFont-Unlock--withEllipsis"></i>
<h4>Gift</h4>
<i class="IconFont IconFont-Gift"></i>
<h4>People</h4>
<i class="IconFont IconFont-People"></i>
<h4>Play</h4>
<i class="IconFont IconFont-Play"></i>
<h4>Add</h4>
<i class="IconFont IconFont-Add"></i>
<h4>Map</h4>
<i class="IconFont IconFont-Map"></i>
<h4>Anchor</h4>
<i class="IconFont IconFont-Anchor"></i>
<h4>Key</h4>
<i class="IconFont IconFont-Key"></i>
<h4>Calendar</h4>
<i class="IconFont IconFont-Calendar"></i>
<h4>Document</h4>
<i class="IconFont IconFont-Document"></i>
<h4>Eye</h4>
<i class="IconFont IconFont-Eye"></i>
<h4>Marker</h4>
<i class="IconFont IconFont-Marker"></i>
<h4>ProgressBar</h4>
<i class="IconFont IconFont-ProgressBar"></i>
<h4>Book</h4>
<i class="IconFont IconFont-Book"></i>
<h4>Notes</h4>
<i class="IconFont IconFont-Notes"></i>
<h4>Rectangles</h4>
<i class="IconFont IconFont-Rectangles"></i>
<h4>Mountain</h4>
<i class="IconFont IconFont-Mountain"></i>
<h4>Points</h4>
<i class="IconFont IconFont-Points"></i>
<h4>Snake</h4>
<i class="IconFont IconFont-Snake"></i>
<h4>Boss</h4>
<i class="IconFont IconFont-Boss"></i>
<h4>Rocket</h4>
<i class="IconFont IconFont-Rocket"></i>
<h4>Barometer</h4>
<i class="IconFont IconFont-Barometer"></i>
<h4>Dollar</h4>
<i class="IconFont IconFont-Dollar"></i>
<h4>Email</h4>
<i class="IconFont IconFont-Email"></i>
<h4>Label</h4>
<i class="IconFont IconFont-Label"></i>
<h4>Outside</h4>
<i class="IconFont IconFont-Outside"></i>
<h4>Jigsaw</h4>
<i class="IconFont IconFont-Jigsaw"></i>
<h4>Tools</h4>
<i class="IconFont IconFont-Tools"></i>
<h4>Question</h4>
<i class="IconFont IconFont-Question"></i>
<h4>LayerStack</h4>
<i class="IconFont IconFont-LayerStack"></i>
<h4>Alarm</h4>
<i class="IconFont IconFont-Alarm"></i>
<h4>CloudDownArrow</h4>
<i class="IconFont IconFont-CloudDownArrow"></i>
<h4>Pencil</h4>
<i class="IconFont IconFont-Pencil"></i>
<h4>FountainPen</h4>
<i class="IconFont IconFont-FountainPen"></i>
<h4>EmptyDoc</h4>
<i class="IconFont IconFont-EmptyDoc"></i>
<h4>MergeArrow</h4>
<i class="IconFont IconFont-MergeArrow"></i>
<h4>MergeColumns</h4>
<i class="IconFont IconFont-MergeColumns"></i>
<h4>MergeSpatial</h4>
<i class="IconFont IconFont-MergeSpatial"></i>
<h4>Globe</h4>
<i class="IconFont IconFont-Globe"></i>
<h4>ChevronDown</h4>
<i class="IconFont IconFont-ChevronDown"></i>
<h4>Streets</h4>
<i class="IconFont IconFont-Streets"></i>
<h4>Keys</h4>
<i class="IconFont IconFont-Keys"></i>
<h4>FacebookSquare</h4>
<i class="IconFont IconFont-FacebookSquare"></i>
<h4>Fullscreen</h4>
<i class="IconFont IconFont-Fullscreen"></i>
<h4>Rarrow</h4>
<i class="IconFont IconFont-Rarrow"></i>
<h4>Share</h4>
<i class="IconFont IconFont-Share"></i>
<h4>Linkedin</h4>
<i class="IconFont IconFont-Linkedin"></i>
<h4>CalendarBlank</h4>
<i class="IconFont IconFont-CalendarBlank"></i>
<h4>CreativeCommons</h4>
<i class="IconFont IconFont-CreativeCommons"></i>
<h4>Bubble</h4>
<i class="IconFont IconFont-Bubble"></i>
<h4>Bars</h4>
<i class="IconFont IconFont-Bars"></i>
<h4>ArrowMenu</h4>
<i class="IconFont IconFont-ArrowMenu"></i>
<h4>TieFighter</h4>
<i class="IconFont IconFont-TieFighter"></i>
<h4>Ray</h4>
<i class="IconFont IconFont-Ray"></i>
<h4>Markup</h4>
<i class="IconFont IconFont-Markup"></i>
<h4>Table</h4>
<i class="IconFont IconFont-Table"></i>
<h4>Airlock</h4>
<i class="IconFont IconFont-Airlock"></i>
<h4>Pin</h4>
<i class="IconFont IconFont-Pin"></i>
<h4>Attache</h4>
<i class="IconFont IconFont-Attache"></i>
<h4>Download</h4>
<i class="IconFont IconFont-Download"></i>
</div>
<div class="markup hljs">
<pre>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Clock<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Clock"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Stats<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Stats"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Heart--empty<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Heart--empty"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Heart--fill<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Heart--fill"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Alert<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Alert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Rows<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Rows"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Check<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Check"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Dribbble<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Dribbble"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Twitter<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Twitter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Wizard<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Wizard"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Info<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Info"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Fork<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Fork"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Facebook<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Facebook"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Folder<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Folder"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Dropbox<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Dropbox"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Cloud<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Cloud"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Step<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Step"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>AddDocument<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-AddDocument"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>ArrowNext<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-ArrowNext"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>ArrowPrev<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-ArrowPrev"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Close"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>CartoFante<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-CartoFante"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Lock<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Lock"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>CartoDB<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-CartoDB"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Lens<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Lens"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>CloseLimits<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-CloseLimits"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>DefaultUser<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-DefaultUser"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Cockroach<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Cockroach"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Floppy<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Floppy"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Trash<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Trash"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Wifi<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Wifi"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Unlock<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Unlock"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Unlock--withEllipsis<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Unlock--withEllipsis"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Gift<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Gift"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>People<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-People"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Play<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Play"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Add<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Add"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Map<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Map"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Anchor<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Anchor"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Key<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Key"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Calendar<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Calendar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Document"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Eye<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Eye"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Marker<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Marker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>ProgressBar<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-ProgressBar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Book<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Book"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Notes<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Notes"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Rectangles<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Rectangles"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Mountain<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Mountain"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Points<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Points"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Snake<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Snake"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Boss<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Boss"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Rocket<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Rocket"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Barometer<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Barometer"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Dollar<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Dollar"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Email<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Email"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Label<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Label"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Outside<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Outside"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Jigsaw<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Jigsaw"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Tools<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Tools"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Question<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Question"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>LayerStack<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-LayerStack"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Alarm<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Alarm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>CloudDownArrow<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-CloudDownArrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Pencil<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Pencil"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>FountainPen<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-FountainPen"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>EmptyDoc<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-EmptyDoc"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>MergeArrow<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-MergeArrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>MergeColumns<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-MergeColumns"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>MergeSpatial<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-MergeSpatial"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Globe<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Globe"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>ChevronDown<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-ChevronDown"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Streets<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Streets"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Keys<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Keys"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>FacebookSquare<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-FacebookSquare"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Fullscreen<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Fullscreen"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Rarrow<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Rarrow"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Share<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Share"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Linkedin<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Linkedin"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>CalendarBlank<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-CalendarBlank"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>CreativeCommons<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-CreativeCommons"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Bubble<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Bubble"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Bars<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Bars"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>ArrowMenu<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-ArrowMenu"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>TieFighter<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-TieFighter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Ray<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Ray"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Markup<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Markup"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Table<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Table"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Airlock<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Airlock"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Pin<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Pin"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Attache<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Attache"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>Download<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"IconFont IconFont-Download"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">i</span>&gt;</span>
</pre>
</div>
</div>
<div class="section" id="Loader-" data-section="Loader" data-heading="">
<div class="comment">
@@ -10247,5 +10936,33 @@ There is only one state &apos;is-visible&apos;, in order to make it visible.</p>
</pre>
</div>
</div>
<div class="section" id="Typography-" data-section="Typography" data-heading="">
<div class="comment">
<h1>Typography</h1>
</div>
<div class="result">
<p class="Text Size-huge">Open Sans 26/34 Regular</p>
<p class="Text Size-large">Open Sans 16/22 Regular</p>
<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
<p class="Text Size-small">Open Sans 10/14 Regular</p>
</div>
<div class="markup hljs">
<pre>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Text Size-huge"</span>&gt;</span>Open Sans 26/34 Regular<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Text Size-large"</span>&gt;</span>Open Sans 16/22 Regular<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Text is-semibold Size-medium"</span>&gt;</span>Open Sans 12/16 Semibold<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Text Size-medium"</span>&gt;</span>Open Sans 12/16 Semibold<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Text is-semibold Size-small"</span>&gt;</span>Open Sans 10/14 Semibold<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Text Size-small"</span>&gt;</span>Open Sans 10/14 Regular<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
</pre>
</div>
</div>
</div>