Ghost/core/client/docs/nav-list.html

135 lines
3.9 KiB
HTML
Raw Normal View History

---
layout: default
title: Ghost UI · Making publishing beautiful.
---
<header class="page-header">
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
<h2>Home</h2>
</header>
<section class="page-content">
<h3>Nav List</h3>
<h5><code>ul > li > a</code> structure</h5>
<ul class="nav-list">
<li class="nav-list-item">
<a href="#">
<b>Revision History</b>
<span>12 versions of this post by 3 people.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Advanced Settings</b>
<span>Convert to a page, mark as featured.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Custom App</b>
<span>Registered an advanced setting panel.</span>
</a>
</li>
</ul>
<hr>
<h5>Full width</h5>
<ul class="nav-list nav-list-block">
<li class="nav-list-item">
<a href="#">
<b>Revision History</b>
<span>12 versions of this post by 3 people.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Advanced Settings</b>
<span>Convert to a page, mark as featured.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Custom App</b>
<span>Registered an advanced setting panel.</span>
</a>
</li>
</ul>
<hr>
<h5><code>nav > li > a</code> structure</h5>
<nav class="nav-list">
<li class="nav-list-item">
<a href="#">
<b>Revision History</b>
<span>12 versions of this post by 3 people.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Advanced Settings</b>
<span>Convert to a page, mark as featured.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Custom App</b>
<span>Registered an advanced setting panel.</span>
</a>
</li>
</nav>
<hr>
<h5><code>div > a</code> Structure</h5>
<div class="nav-list">
<a href="#" class="nav-list-item">
<b>Revision History</b>
<span>12 versions of this post by 3 people.</span>
</a>
<a href="#" class="nav-list-item">
<b>Advanced Settings</b>
<span>Convert to a page, mark as featured.</span>
</a>
<a href="#" class="nav-list-item">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</a>
<a href="#" class="nav-list-item">
<b>Multi-line nav list item, checking internationalization</b>
</a>
<a href="#" class="nav-list-item">
<b>Custom App</b>
<span>Registered an advanced setting panel.</span>
</a>
<a href="#" class="nav-list-item">
<b>Single Line</b>
</a>
<a href="#" class="nav-list-item">
<span>Just the description, that's going to split into multiple lines, because testing yo.</span>
</a>
</div>
</section>