<!DOCTYPE html> <html ng-app="cortana"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Layout - Typography</title> <!-- Styleguide CSS --> <link rel="stylesheet" href="./theme-build/css/vendors.css"> <link rel="stylesheet" href="./theme-build/css/cortana.css"> <!-- Source CSS --> <link rel="stylesheet" href="example-vendors/bootstrap.css"> <link rel="stylesheet" href="example-vendors/bootflat.css"> <!--[if lt IE 9]> <script src="theme-build/polyfill/html5shiv.js"></script> <script src="theme-build/polyfill/respond.min.js"></script> <![endif]--> </head> <body class="cortana-body" ng-controller="MainController"> <div class="sb-slidebar sb-left cortana-sidenav sb-style-push"> <nav class="cortana-nav"> <ul> <li><a href="index.html">Home</a></li> </ul> <h3>JavaScript</h3> <ul> <li><a href="javascript_-_collapse.html">Collapse</a></li> <li><a href="javascript_-_alert.html">Alert</a></li> <li><a href="javascript_-_carousel.html">Carousel</a></li> <li><a href="javascript_-_dropdown.html">Dropdown</a></li> <li><a href="javascript_-_modal.html">Modal</a></li> <li><a href="javascript_-_popover.html">Popover</a></li> <li><a href="javascript_-_scrollspy.html">ScrollSpy</a></li> <li><a href="javascript_-_tabs.html">Tabs</a></li> <li><a href="javascript_-_tooltips.html">Tooltips</a></li> <li><a href="javascript_-_buttons_js.html">Buttons JS</a></li> </ul> <h3>Components</h3> <ul> <li><a href="components_-_alerts.html">Alerts</a></li> <li><a href="components_-_badges.html">Badges</a></li> <li><a href="components_-_progress_bar.html">Progress bar</a></li> <li><a href="components_-_breadcrumb.html">Breadcrumb</a></li> <li><a href="components_-_pager.html">Pager</a></li> <li><a href="components_-_pagination.html">Pagination</a></li> <li><a href="components_-_button_groups.html">Button Groups</a></li> <li><a href="components_-_input_groups.html">Input groups</a></li> <li><a href="components_-_jumbotron.html">Jumbotron</a></li> <li><a href="components_-_labels.html">Labels</a></li> <li><a href="components_-_list_group.html">List group</a></li> <li><a href="components_-_media.html">Media</a></li> <li><a href="components_-_navbar.html">Navbar</a></li> <li><a href="components_-_panels.html">Panels</a></li> <li><a href="components_-_thumbnails.html">Thumbnails</a></li> <li><a href="components_-_well.html">Well</a></li> <li><a href="components_-_nav.html">Nav</a></li> </ul> <h3>Layout</h3> <ul> <li><a href="layout_-_tables.html">Tables</a></li> <li><a href="layout_-_buttons.html">Buttons</a></li> <li><a href="layout_-_colors.html">Colors</a></li> <li><a href="layout_-_icons.html">Icons</a></li> <li><a href="layout_-_images.html">Images</a></li> <li><a href="layout_-_code.html">Code</a></li> <li><a href="layout_-_form.html">Form</a></li> <li><a class="active" href="layout_-_typography.html">Typography</a></li> </ul> </nav> </div> <header class="cortana-header sb-slide"> <h1>Typography</h1> <div id="open-left" class="cortana-menu-btn"> <span></span> <span></span> <span></span> </div> <div class="cortana-search-wrapper" ng-controller="TypeaheadCtrl"> <input id="cortana-search" type="text" class="form-control cortana-search" ng-model="customSelected" placeholder="Search" typeahead="data as data.title for data in searchData | filter:{title:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-on-select="onSelect($item, $model, $label)"> </div> </header> <div id="sb-site"> <div class="cortana-container"> <nav id="cortana-inside-nav" class="cortana-inside-nav" bs-affix> <ul bs-scrollspy-list data-offset="-30"> <li><a href="#a-titles">Titles</a></li> <li><a href="#b-lead">Lead</a></li> <li><a href="#c-paragraphs">Paragraphs</a></li> <li><a href="#d-context-color">Contextual color</a></li> <li><a href="#e-context-background">Contextual background</a></li> <li><a href="#f-blockquote">Blockquote</a></li> <li><a href="#g-small">Small</a></li> <li><a href="#h-text-element">Text elements</a></li> <li><a href="#i-address">Address</a></li> <li><a href="#j-list">List</a></li> <li><a href="#k-description">Description</a></li> </ul> </nav> <div class="cortana-content-wrapper"> <div class="cortana-content"> <h1 id="a-titles">Titles</h1> </div><div class="codeExample"><div class="exampleOutput"><h1>My title level 1</h1> <h2>My title level 2</h2> <h3>My title level 3</h3> <h4>My title level 4</h4> <h5>My title level 5</h5> <h6>My title level 6</h6> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><h1></span>My title level 1<span class="nt"></h1></span> <span class="nt"><h2></span>My title level 2<span class="nt"></h2></span> <span class="nt"><h3></span>My title level 3<span class="nt"></h3></span> <span class="nt"><h4></span>My title level 4<span class="nt"></h4></span> <span class="nt"><h5></span>My title level 5<span class="nt"></h5></span> <span class="nt"><h6></span>My title level 6<span class="nt"></h6></span> </pre></div></div></div><div class="cortana-content"> <h1 id="b-lead">Lead</h1> </div><div class="codeExample"><div class="exampleOutput"><p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. </p> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. <span class="nt"></p></span> </pre></div></div></div><div class="cortana-content"> <h1 id="c-paragraphs">Paragraphs</h1> </div><div class="codeExample"><div class="exampleOutput"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. Neque solum ea communia, verum etiam paria esse dixerunt. Sed haec omittamus; Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Duo Reges: constructio interrete. Re mihi non aeque satisfacit, et quidem locis pluribus. </p> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><p></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. Neque solum ea communia, verum etiam paria esse dixerunt. Sed haec omittamus; Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Duo Reges: constructio interrete. Re mihi non aeque satisfacit, et quidem locis pluribus. <span class="nt"></p></span> </pre></div></div></div><div class="cortana-content"> <h1 id="d-context-color">Contextual color</h1> </div><div class="codeExample"><div class="exampleOutput"><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> </pre></div></div></div><div class="cortana-content"> <h1 id="e-context-background">Contextual background</h1> </div><div class="codeExample"><div class="exampleOutput"><p class="bg-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="bg-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="bg-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="bg-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="bg-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><p</span> <span class="na">class=</span><span class="s">"bg-primary"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"bg-success"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"bg-info"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"bg-warning"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"bg-danger"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></p></span> </pre></div></div></div><div class="cortana-content"> <h1 id="f-blockquote">Blockquote</h1> </div><div class="codeExample"><div class="exampleOutput"><blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. </p> <small> Eddard Stark, lord of Winterfel </small> </blockquote> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><blockquote></span> <span class="nt"><p></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. <span class="nt"></p></span> <span class="nt"><small></span> Eddard Stark, lord of Winterfel <span class="nt"></small></span> <span class="nt"></blockquote></span> </pre></div></div></div><div class="cortana-content"> <h2>Inverse</h2> </div><div class="codeExample"><div class="exampleOutput"><blockquote class="blockquote-reverse"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. </p> <small> Eddard Stark, lord of Winterfel </small> </blockquote> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote-reverse"</span><span class="nt">></span> <span class="nt"><p></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. <span class="nt"></p></span> <span class="nt"><small></span> Eddard Stark, lord of Winterfel <span class="nt"></small></span> <span class="nt"></blockquote></span> </pre></div></div></div><div class="cortana-content"> <h1 id="g-small">Small</h1> </div><div class="codeExample"><div class="exampleOutput"><small> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. </small> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><small></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus. <span class="nt"></small></span> </pre></div></div></div><div class="cortana-content"> <h1 id="h-text-element">Text elements</h1> </div><div class="codeExample"><div class="exampleOutput"><p> The <a href="#">link element</a> example<br> The <abbr>abbreviation element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br> The <b>bold element</b> example<br> The <cite>citation element</cite> example<br> The <code>code element</code> example<br> The <del>deleted element</del> example<br> The <dfn>definition element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br> The <em>em element</em> example<br> The <i>italic element</i> example<br> The image element <img src="http://placehold.it/120x25" alt="image description"> example<br> The <ins>insert element</ins> example<br> The <kbd>keyboard element</kbd> example<br> The <mark>marked element</mark> example<br> The <q>quote element <q>inside</q> a q element</q> example<br> The <s>strikethrough element</s> example<br> The <samp>sample element</samp> example<br> The <small>small element</small> example<br> The <span>span element</span> example<br> The <strong>strong element</strong> example<br> The <sub>sub element</sub> example<br> The <sup>sup element</sup> example<br> The <var>variable element</var> example<br> The <u>underline element</u> example </p> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><p></span> The <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>link element<span class="nt"></a></span> example<span class="nt"><br></span> The <span class="nt"><abbr></span>abbreviation element<span class="nt"></abbr></span> and <span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"Title text"</span><span class="nt">></span>abbr element with title<span class="nt"></abbr></span> examples<span class="nt"><br></span> The <span class="nt"><b></span>bold element<span class="nt"></b></span> example<span class="nt"><br></span> The <span class="nt"><cite></span>citation element<span class="nt"></cite></span> example<span class="nt"><br></span> The <span class="nt"><code></span>code element<span class="nt"></code></span> example<span class="nt"><br></span> The <span class="nt"><del></span>deleted element<span class="nt"></del></span> example<span class="nt"><br></span> The <span class="nt"><dfn></span>definition element<span class="nt"></dfn></span> and <span class="nt"><dfn</span> <span class="na">title=</span><span class="s">"Title text"</span><span class="nt">></span>dfn element with title<span class="nt"></dfn></span> examples<span class="nt"><br></span> The <span class="nt"><em></span>em element<span class="nt"></em></span> example<span class="nt"><br></span> The <span class="nt"><i></span>italic element<span class="nt"></i></span> example<span class="nt"><br></span> The image element <span class="nt"><img</span> <span class="na">src=</span><span class="s">"http://placehold.it/120x25"</span> <span class="na">alt=</span><span class="s">"image description"</span><span class="nt">></span> example<span class="nt"><br></span> The <span class="nt"><ins></span>insert element<span class="nt"></ins></span> example<span class="nt"><br></span> The <span class="nt"><kbd></span>keyboard element<span class="nt"></kbd></span> example<span class="nt"><br></span> The <span class="nt"><mark></span>marked element<span class="nt"></mark></span> example<span class="nt"><br></span> The <span class="nt"><q></span>quote element <span class="nt"><q></span>inside<span class="nt"></q></span> a q element<span class="nt"></q></span> example<span class="nt"><br></span> The <span class="nt"><s></span>strikethrough element<span class="nt"></s></span> example<span class="nt"><br></span> The <span class="nt"><samp></span>sample element<span class="nt"></samp></span> example<span class="nt"><br></span> The <span class="nt"><small></span>small element<span class="nt"></small></span> example<span class="nt"><br></span> The <span class="nt"><span></span>span element<span class="nt"></span></span> example<span class="nt"><br></span> The <span class="nt"><strong></span>strong element<span class="nt"></strong></span> example<span class="nt"><br></span> The <span class="nt"><sub></span>sub element<span class="nt"></sub></span> example<span class="nt"><br></span> The <span class="nt"><sup></span>sup element<span class="nt"></sup></span> example<span class="nt"><br></span> The <span class="nt"><var></span>variable element<span class="nt"></var></span> example<span class="nt"><br></span> The <span class="nt"><u></span>underline element<span class="nt"></u></span> example <span class="nt"></p></span> </pre></div></div></div><div class="cortana-content"> <h1 id="i-address">Address</h1> </div><div class="codeExample"><div class="exampleOutput"><address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><address></span> <span class="nt"><strong></span>Twitter, Inc.<span class="nt"></strong><br></span> 795 Folsom Ave, Suite 600<span class="nt"><br></span> San Francisco, CA 94107<span class="nt"><br></span> <span class="nt"><abbr</span> <span class="na">title=</span><span class="s">"Phone"</span><span class="nt">></span>P:<span class="nt"></abbr></span> (123) 456-7890 <span class="nt"></address></span> <span class="nt"><address></span> <span class="nt"><strong></span>Full Name<span class="nt"></strong><br></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"mailto:#"</span><span class="nt">></span>first.last@example.com<span class="nt"></a></span> <span class="nt"></address></span> </pre></div></div></div><div class="cortana-content"> <h1 id="j-list">List</h1> </div><div class="codeExample"><div class="exampleOutput"><ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li> Integer molestie lorem at massa <ul> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> </ul> </li> <li>Vestibulum laoreet porttitor sem</li> </ul> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><ul></span> <span class="nt"><li></span>Lorem ipsum dolor sit amet<span class="nt"></li></span> <span class="nt"><li></span>Consectetur adipiscing elit<span class="nt"></li></span> <span class="nt"><li></span> Integer molestie lorem at massa <span class="nt"><ul></span> <span class="nt"><li></span>Facilisis in pretium nisl aliquet<span class="nt"></li></span> <span class="nt"><li></span>Nulla volutpat aliquam velit<span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li></span>Vestibulum laoreet porttitor sem<span class="nt"></li></span> <span class="nt"></ul></span> </pre></div></div></div><div class="cortana-content"> <h2>Ordered</h2> </div><div class="codeExample"><div class="exampleOutput"><ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li> Integer molestie lorem at massa <ol> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> </ol> </li> <li>Vestibulum laoreet porttitor sem</li> </ol> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><ol></span> <span class="nt"><li></span>Lorem ipsum dolor sit amet<span class="nt"></li></span> <span class="nt"><li></span>Consectetur adipiscing elit<span class="nt"></li></span> <span class="nt"><li></span> Integer molestie lorem at massa <span class="nt"><ol></span> <span class="nt"><li></span>Facilisis in pretium nisl aliquet<span class="nt"></li></span> <span class="nt"><li></span>Nulla volutpat aliquam velit<span class="nt"></li></span> <span class="nt"></ol></span> <span class="nt"></li></span> <span class="nt"><li></span>Vestibulum laoreet porttitor sem<span class="nt"></li></span> <span class="nt"></ol></span> </pre></div></div></div><div class="cortana-content"> <h2>Unstyled</h2> </div><div class="codeExample"><div class="exampleOutput"><ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li> Integer molestie lorem at massa <ul> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit</li> </ul> </li> <li>Vestibulum laoreet porttitor sem</li> </ul> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span> <span class="nt"><li></span>Lorem ipsum dolor sit amet<span class="nt"></li></span> <span class="nt"><li></span>Consectetur adipiscing elit<span class="nt"></li></span> <span class="nt"><li></span> Integer molestie lorem at massa <span class="nt"><ul></span> <span class="nt"><li></span>Facilisis in pretium nisl aliquet<span class="nt"></li></span> <span class="nt"><li></span>Nulla volutpat aliquam velit<span class="nt"></li></span> <span class="nt"></ul></span> <span class="nt"></li></span> <span class="nt"><li></span>Vestibulum laoreet porttitor sem<span class="nt"></li></span> <span class="nt"></ul></span> </pre></div></div></div><div class="cortana-content"> <h2>Inline</h2> </div><div class="codeExample"><div class="exampleOutput"><ul class="list-inline"> <li>Lorem</li> <li>Consectetur</li> <li>Vestibulum</li> </ul> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">></span> <span class="nt"><li></span>Lorem<span class="nt"></li></span> <span class="nt"><li></span>Consectetur<span class="nt"></li></span> <span class="nt"><li></span>Vestibulum<span class="nt"></li></span> <span class="nt"></ul></span> </pre></div></div></div><div class="cortana-content"> <h1 id="k-description">Description</h1> </div><div class="codeExample"><div class="exampleOutput"><dl> <dt>Lorem</dt> <dd>Ipsum dolor sit amet, consectetur adipiscing elit.</dd> </dl> <dl> <dt>Sit sane ista voluptas</dt> <dd>Itaque primos congressus copulationesque.</dd> </dl> <dl> <dt>Praeclare hoc quidem</dt> <dd>Sit sane ista voluptas. Itaque primos congressus copulationesque et consuetudinum.</dd> <dd>Praeclare hoc quidem. Quis enim potest ea, quae probabilia videantur ei.</dd> </dl> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><dl></span> <span class="nt"><dt></span>Lorem<span class="nt"></dt></span> <span class="nt"><dd></span>Ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></dd></span> <span class="nt"></dl></span> <span class="nt"><dl></span> <span class="nt"><dt></span>Sit sane ista voluptas<span class="nt"></dt></span> <span class="nt"><dd></span>Itaque primos congressus copulationesque.<span class="nt"></dd></span> <span class="nt"></dl></span> <span class="nt"><dl></span> <span class="nt"><dt></span>Praeclare hoc quidem<span class="nt"></dt></span> <span class="nt"><dd></span>Sit sane ista voluptas. Itaque primos congressus copulationesque et consuetudinum.<span class="nt"></dd></span> <span class="nt"><dd></span>Praeclare hoc quidem. Quis enim potest ea, quae probabilia videantur ei.<span class="nt"></dd></span> <span class="nt"></dl></span> </pre></div></div></div><div class="cortana-content"> <h2>Horizontal description</h2> </div><div class="codeExample"><div class="exampleOutput"><dl class="dl-horizontal"> <dt>Lorem</dt> <dd>Ipsum dolor sit amet, consectetur adipiscing elit.</dd> </dl> <dl class="dl-horizontal"> <dt>Sit sane ista voluptas</dt> <dd>Itaque primos congressus copulationesque.</dd> </dl> <dl class="dl-horizontal"> <dt>Praeclare hoc quidem</dt> <dd>Sit sane ista voluptas. Itaque primos congressus copulationesque et consuetudinum.</dd> <dd>Praeclare hoc quidem. Quis enim potest ea, quae probabilia videantur ei.</dd> </dl> </div><div class="codeBlock"><div class="highlight"><pre><span class="nt"><dl</span> <span class="na">class=</span><span class="s">"dl-horizontal"</span><span class="nt">></span> <span class="nt"><dt></span>Lorem<span class="nt"></dt></span> <span class="nt"><dd></span>Ipsum dolor sit amet, consectetur adipiscing elit.<span class="nt"></dd></span> <span class="nt"></dl></span> <span class="nt"><dl</span> <span class="na">class=</span><span class="s">"dl-horizontal"</span><span class="nt">></span> <span class="nt"><dt></span>Sit sane ista voluptas<span class="nt"></dt></span> <span class="nt"><dd></span>Itaque primos congressus copulationesque.<span class="nt"></dd></span> <span class="nt"></dl></span> <span class="nt"><dl</span> <span class="na">class=</span><span class="s">"dl-horizontal"</span><span class="nt">></span> <span class="nt"><dt></span>Praeclare hoc quidem<span class="nt"></dt></span> <span class="nt"><dd></span>Sit sane ista voluptas. Itaque primos congressus copulationesque et consuetudinum.<span class="nt"></dd></span> <span class="nt"><dd></span>Praeclare hoc quidem. Quis enim potest ea, quae probabilia videantur ei.<span class="nt"></dd></span> <span class="nt"></dl></span> </pre></div></div></div><div class="cortana-content"> </div> </div> </div> <footer class="cortana-footer"> Build with love using Trulia's <a href="https://github.com/trulia/hologram">Hologram</a> and <a href="https://github.com/Yago31/Cortana">Cortana</a> ! </footer> </div> <script src="theme-build/js/vendors.min.js"></script> <script type="text/javascript"> var jQuery_no_conflict = $.noConflict(true); </script> <script src="theme-build/js/main.js"></script> <script type="text/javascript"> function TypeaheadCtrl($scope) { $scope.selected = undefined; $scope.searchData = [ { "title": "Accordion", "breadcrumb": "JavaScript - Collapse > Accordion", "path": "javascript_-_collapse.html#a-accordion" }, { "title": "Collapse button", "breadcrumb": "JavaScript - Collapse > Collapse button", "path": "javascript_-_collapse.html#b-collapse-button" }, { "title": "Alert message", "breadcrumb": "JavaScript - Alert > Alert message", "path": "javascript_-_alert.html#a-alert-message" }, { "title": "Alerts", "breadcrumb": "Components - Alerts > Alerts", "path": "components_-_alerts.html#a-alerts" }, { "title": "Dismissable alerts", "breadcrumb": "Components - Alerts > Dismissable alerts", "path": "components_-_alerts.html#b-dismissable-alerts" }, { "title": "Default badge", "breadcrumb": "Components - Badges > Default badge", "path": "components_-_badges.html#a-badge" }, { "title": "Nav states", "breadcrumb": "Components - Badges > Nav states", "path": "components_-_badges.html#b-nav-states" }, { "title": "Basic progress bar", "breadcrumb": "Components - Progress bar > Basic progress bar", "path": "components_-_progress_bar.html#a-basic-bar" }, { "title": "With label", "breadcrumb": "Components - Progress bar > With label", "path": "components_-_progress_bar.html#b-with-label" }, { "title": "Contextual", "breadcrumb": "Components - Progress bar > Contextual", "path": "components_-_progress_bar.html#c-contextual" }, { "title": "Striped", "breadcrumb": "Components - Progress bar > Striped", "path": "components_-_progress_bar.html#c-striped" }, { "title": "Animated", "breadcrumb": "Components - Progress bar > Animated", "path": "components_-_progress_bar.html#d-animated" }, { "title": "Stacked", "breadcrumb": "Components - Progress bar > Stacked", "path": "components_-_progress_bar.html#e-stacked" }, { "title": "Basic table", "breadcrumb": "Layout - Tables > Basic table", "path": "layout_-_tables.html#a-basic-table" }, { "title": "Striped table", "breadcrumb": "Layout - Tables > Striped table", "path": "layout_-_tables.html#b-striped-table" }, { "title": "Bordered table", "breadcrumb": "Layout - Tables > Bordered table", "path": "layout_-_tables.html#c-bordered-table" }, { "title": "Hover table", "breadcrumb": "Layout - Tables > Hover table", "path": "layout_-_tables.html#d-hover-table" }, { "title": "Condensed table", "breadcrumb": "Layout - Tables > Condensed table", "path": "layout_-_tables.html#e-condensed-table" }, { "title": "Highlight table", "breadcrumb": "Layout - Tables > Highlight table", "path": "layout_-_tables.html#f-highlight-table" }, { "title": "Breadcrumb", "breadcrumb": "Components - Breadcrumb > Breadcrumb", "path": "components_-_breadcrumb.html#a-breadcrumb" }, { "title": "Buttons", "breadcrumb": "Layout - Buttons > Buttons", "path": "layout_-_buttons.html#a-buttons" }, { "title": "Sizes", "breadcrumb": "Layout - Buttons > Sizes", "path": "layout_-_buttons.html#b-size" }, { "title": "Active / Disabled", "breadcrumb": "Layout - Buttons > Active / Disabled", "path": "layout_-_buttons.html#c-active-disabled" }, { "title": "Carousel", "breadcrumb": "JavaScript - Carousel > Carousel", "path": "javascript_-_carousel.html#a-carousel" }, { "title": "Colors", "breadcrumb": "Layout - Colors > Colors", "path": "layout_-_colors.html#a-colors" }, { "title": "Bootflat colors", "breadcrumb": "Layout - Colors > Bootflat colors", "path": "layout_-_colors.html#b-bootfalt-colors" }, { "title": "Default pager", "breadcrumb": "Components - Pager > Default pager", "path": "components_-_pager.html#a-default-pager" }, { "title": "Align links", "breadcrumb": "Components - Pager > Align links", "path": "components_-_pager.html#b-align-link" }, { "title": "Disabled", "breadcrumb": "Components - Pager > Disabled", "path": "components_-_pager.html#c-disabled" }, { "title": "Default pagination", "breadcrumb": "Components - Pagination > Default pagination", "path": "components_-_pagination.html#a-default-pagination" }, { "title": "Active - Disabled", "breadcrumb": "Components - Pagination > Active - Disabled", "path": "components_-_pagination.html#b-active-disabled" }, { "title": "Sizes", "breadcrumb": "Components - Pagination > Sizes", "path": "components_-_pagination.html#c-sizes" }, { "title": "Dropdown button", "breadcrumb": "JavaScript - Dropdown > Dropdown button", "path": "javascript_-_dropdown.html#a-dropdown-button" }, { "title": "Split dropdown button", "breadcrumb": "JavaScript - Dropdown > Split dropdown button", "path": "javascript_-_dropdown.html#b-split-dropdown-button" }, { "title": "Sizes", "breadcrumb": "JavaScript - Dropdown > Sizes", "path": "javascript_-_dropdown.html#c-size" }, { "title": "Group", "breadcrumb": "Components - Button Groups > Group", "path": "components_-_button_groups.html#a-group" }, { "title": "Icons", "breadcrumb": "Layout - Icons > Icons", "path": "layout_-_icons.html#a-icons" }, { "title": "Images", "breadcrumb": "Layout - Images > Images", "path": "layout_-_images.html#a-images" }, { "title": "Figure", "breadcrumb": "Layout - Images > Figure", "path": "layout_-_images.html#b-figure" }, { "title": "Images shapes", "breadcrumb": "Layout - Images > Images shapes", "path": "layout_-_images.html#c-images-shape" }, { "title": "Inline code", "breadcrumb": "Layout - Code > Inline code", "path": "layout_-_code.html#a-inline-code" }, { "title": "User input", "breadcrumb": "Layout - Code > User input", "path": "layout_-_code.html#b-user-input" }, { "title": "Code block", "breadcrumb": "Layout - Code > Code block", "path": "layout_-_code.html#c-code-block" }, { "title": "Input", "breadcrumb": "Layout - Form > Input", "path": "layout_-_form.html#a-input" }, { "title": "Textarea", "breadcrumb": "Layout - Form > Textarea", "path": "layout_-_form.html#a-textarea" }, { "title": "Checkboxes and radios", "breadcrumb": "Layout - Form > Checkboxes and radios", "path": "layout_-_form.html#b-checkbox-radio" }, { "title": "Inline checkboxes", "breadcrumb": "Layout - Form > Inline checkboxes", "path": "layout_-_form.html#c-inline-checkbox" }, { "title": "Selects", "breadcrumb": "Layout - Form > Selects", "path": "layout_-_form.html#d-select" }, { "title": "Static control", "breadcrumb": "Layout - Form > Static control", "path": "layout_-_form.html#e-static" }, { "title": "Basic form", "breadcrumb": "Layout - Form > Basic form", "path": "layout_-_form.html#i-basic-form" }, { "title": "Inline form", "breadcrumb": "Layout - Form > Inline form", "path": "layout_-_form.html#j-inline-form" }, { "title": "Horizontal form", "breadcrumb": "Layout - Form > Horizontal form", "path": "layout_-_form.html#k-horizontal-form" }, { "title": "Validations", "breadcrumb": "Layout - Form > Validations", "path": "layout_-_form.html#l-validation" }, { "title": "Input groups", "breadcrumb": "Components - Input groups > Input groups", "path": "components_-_input_groups.html#a-input-groups" }, { "title": "Checkbox-Radio addon", "breadcrumb": "Components - Input groups > Checkbox-Radio addon", "path": "components_-_input_groups.html#d-checkbox-addon" }, { "title": "Button addon", "breadcrumb": "Components - Input groups > Button addon", "path": "components_-_input_groups.html#e-button-addon" }, { "title": "Dropdown addon", "breadcrumb": "Components - Input groups > Dropdown addon", "path": "components_-_input_groups.html#f-dropdown-addon" }, { "title": "Jumbotron", "breadcrumb": "Components - Jumbotron > Jumbotron", "path": "components_-_jumbotron.html#a-jumbotron" }, { "title": "Default label", "breadcrumb": "Components - Labels > Default label", "path": "components_-_labels.html#a-labels" }, { "title": "Variations", "breadcrumb": "Components - Labels > Variations", "path": "components_-_labels.html#b-variations" }, { "title": "List group", "breadcrumb": "Components - List group > List group", "path": "components_-_list_group.html#a-list-group" }, { "title": "Badge", "breadcrumb": "Components - List group > Badge", "path": "components_-_list_group.html#b-badge" }, { "title": "Linked items", "breadcrumb": "Components - List group > Linked items", "path": "components_-_list_group.html#c-linked-item" }, { "title": "Custom content", "breadcrumb": "Components - List group > Custom content", "path": "components_-_list_group.html#e-custom-content" }, { "title": "Default media", "breadcrumb": "Components - Media > Default media", "path": "components_-_media.html#a-media" }, { "title": "Media list", "breadcrumb": "Components - Media > Media list", "path": "components_-_media.html#b-media-list" }, { "title": "Modal", "breadcrumb": "JavaScript - Modal > Modal", "path": "javascript_-_modal.html#a-modal" }, { "title": "Sizes", "breadcrumb": "JavaScript - Modal > Sizes", "path": "javascript_-_modal.html#b-sizes" }, { "title": "Navbar", "breadcrumb": "Components - Navbar > Navbar", "path": "components_-_navbar.html#a-navbar" }, { "title": "Inverted navbar", "breadcrumb": "Components - Navbar > Inverted navbar", "path": "components_-_navbar.html#b-inverted-navbar" }, { "title": "Form", "breadcrumb": "Components - Navbar > Form", "path": "components_-_navbar.html#c-form" }, { "title": "Text", "breadcrumb": "Components - Navbar > Text", "path": "components_-_navbar.html#d-text" }, { "title": "Dropdown", "breadcrumb": "Components - Navbar > Dropdown", "path": "components_-_navbar.html#e-dropdown" }, { "title": "Basic panel", "breadcrumb": "Components - Panels > Basic panel", "path": "components_-_panels.html#a-panel" }, { "title": "Panel with heading", "breadcrumb": "Components - Panels > Panel with heading", "path": "components_-_panels.html#b-panel-heading" }, { "title": "Panel with footer", "breadcrumb": "Components - Panels > Panel with footer", "path": "components_-_panels.html#c-panel-footer" }, { "title": "Contextual", "breadcrumb": "Components - Panels > Contextual", "path": "components_-_panels.html#d-contextual" }, { "title": "Panel with table", "breadcrumb": "Components - Panels > Panel with table", "path": "components_-_panels.html#e-panel-table" }, { "title": "Panel with list", "breadcrumb": "Components - Panels > Panel with list", "path": "components_-_panels.html#f-panel-list" }, { "title": "Popover", "breadcrumb": "JavaScript - Popover > Popover", "path": "javascript_-_popover.html#a-popover" }, { "title": "ScrollSpy", "breadcrumb": "JavaScript - ScrollSpy > ScrollSpy", "path": "javascript_-_scrollspy.html#a-scrollspy" }, { "title": "Tabs", "breadcrumb": "JavaScript - Tabs > Tabs", "path": "javascript_-_tabs.html#a-tabs" }, { "title": "Default thumbnail", "breadcrumb": "Components - Thumbnails > Default thumbnail", "path": "components_-_thumbnails.html#a-thumbnail" }, { "title": "Custom content", "breadcrumb": "Components - Thumbnails > Custom content", "path": "components_-_thumbnails.html#b-custom-content" }, { "title": "Titles", "breadcrumb": "Layout - Typography > Titles", "path": "layout_-_typography.html#a-titles" }, { "title": "Lead", "breadcrumb": "Layout - Typography > Lead", "path": "layout_-_typography.html#b-lead" }, { "title": "Paragraphs", "breadcrumb": "Layout - Typography > Paragraphs", "path": "layout_-_typography.html#c-paragraphs" }, { "title": "Contextual color", "breadcrumb": "Layout - Typography > Contextual color", "path": "layout_-_typography.html#d-context-color" }, { "title": "Contextual background", "breadcrumb": "Layout - Typography > Contextual background", "path": "layout_-_typography.html#e-context-background" }, { "title": "Blockquote", "breadcrumb": "Layout - Typography > Blockquote", "path": "layout_-_typography.html#f-blockquote" }, { "title": "Small", "breadcrumb": "Layout - Typography > Small", "path": "layout_-_typography.html#g-small" }, { "title": "Text elements", "breadcrumb": "Layout - Typography > Text elements", "path": "layout_-_typography.html#h-text-element" }, { "title": "Address", "breadcrumb": "Layout - Typography > Address", "path": "layout_-_typography.html#i-address" }, { "title": "List", "breadcrumb": "Layout - Typography > List", "path": "layout_-_typography.html#j-list" }, { "title": "Description", "breadcrumb": "Layout - Typography > Description", "path": "layout_-_typography.html#k-description" }, { "title": "Tooltips", "breadcrumb": "JavaScript - Tooltips > Tooltips", "path": "javascript_-_tooltips.html#a-tooltips" }, { "title": "Default well", "breadcrumb": "Components - Well > Default well", "path": "components_-_well.html#a-well" }, { "title": "Pills", "breadcrumb": "Components - Nav > Pills", "path": "components_-_nav.html#b-pills" }, { "title": "With dropdown", "breadcrumb": "Components - Nav > With dropdown", "path": "components_-_nav.html#c-with-dropdown" }, { "title": "Single toggle", "breadcrumb": "JavaScript - Buttons JS > Single toggle", "path": "javascript_-_buttons_js.html#b-single-toggle" }, { "title": "Checkbox", "breadcrumb": "JavaScript - Buttons JS > Checkbox", "path": "javascript_-_buttons_js.html#c-checkbox" }, { "title": "Radio", "breadcrumb": "JavaScript - Buttons JS > Radio", "path": "javascript_-_buttons_js.html#d-radio" }, {}]; $scope.onSelect = function ($item, $model, $label) { window.location.replace($item.path); }; } </script> <script type="text/ng-template" id="customTemplate.html"> <a href="{{match.model.path}}"> <p class="cortana-search-title">{{match.model.title}}</p> <p class="cortana-search-path">{{match.model.breadcrumb}}</p> </a> </script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="example-vendors/bootstrap.js"></script> </body> </html>