Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
<div class="tikui-template-page -atomized">
<div class="tikui-template-page--header">
<div class="tikui-template-page--header-container">
<header class="tikui-header">
<div class="tikui-header--slot"><img class="tikui-logo" src="../atom/logo/logo.svg" width="115" height="67" alt="Tikui logo"/>
</div>
<div class="tikui-header--slot -expand">
<nav>
<ul class="tikui-header-navigation">
<li class="tikui-header-navigation--slot">
<button class="tikui-header-item -selected" aria-current="page"><span class="tikui-header-item--text">First</span><span class="tikui-header-item--feedback"></span></button>
</li>
<li class="tikui-header-navigation--slot">
<button class="tikui-header-item"><span class="tikui-header-item--text">Second</span><span class="tikui-header-item--feedback"></span></button>
</li>
<li class="tikui-header-navigation--slot">
<button class="tikui-header-item"><span class="tikui-header-item--text">Third</span><span class="tikui-header-item--feedback"></span></button>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<div class="tikui-template-page--body">
<div class="tikui-template-page--nav">
<div class="tikui-nav-vertical">
<div class="tikui-nav-vertical--item -level-1"><a class="tikui-nav-item -main" href="#">Main link</a>
</div>
<div class="tikui-nav-vertical--item -level-2"><a class="tikui-nav-item -child" href="#">First child link</a>
</div>
<div class="tikui-nav-vertical--item -level-2"><a class="tikui-nav-item -child -selected" href="#">Selected child link</a>
</div>
<div class="tikui-nav-vertical--item -level-3"><a class="tikui-nav-item -child" href="#">Level 3 child link</a>
</div>
</div>
</div>
<div class="tikui-template-page--container">
<div class="tikui-template-page--container-content">
<div class="tikui-vertical-spacing -s100">
<section class="tikui-vertical-spacing--line">
<div class="tikui-vertical-spacing -s64">
<div class="tikui-vertical-spacing--line">
<div class="tikui-vertical-spacing -s16">
<div class="tikui-vertical-spacing--line">
<h1 class="tikui-title-main">Main <span class="tikui-title-main--bordered">title</span>
</h1>
</div>
<div class="tikui-vertical-spacing--line">
<p class="tikui-paragraph">Paragraph
</p>
</div>
<div class="tikui-vertical-spacing--line">
<p class="tikui-paragraph -bold">Bold paragraph
</p>
</div>
</div>
</div>
<div class="tikui-vertical-spacing--line">
<div class="tikui-horizontal-spacing -s32">
<div class="tikui-horizontal-spacing--column">
<button class="tikui-button">Primary
</button>
</div>
<div class="tikui-horizontal-spacing--column">
<button class="tikui-button -secondary">Secondary
</button>
</div>
</div>
</div>
</div>
</section>
<section class="tikui-vertical-spacing--line">
<div class="tikui-vertical-spacing -s16">
<div class="tikui-vertical-spacing--line">
<div class="tikui-title-section">Section title
</div>
</div>
<div class="tikui-vertical-spacing--line">
<p class="tikui-paragraph">Paragraph
</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>.tikui-template-page.-atomized
.tikui-template-page--header
.tikui-template-page--header-container
header.tikui-header
.tikui-header--slot
img.tikui-logo(src="../atom/logo/logo.svg" width="115" height="67" alt="Tikui logo")
.tikui-header--slot.-expand
nav
ul.tikui-header-navigation
li.tikui-header-navigation--slot
button.tikui-header-item.-selected(aria-current="page")
span.tikui-header-item--text First
span.tikui-header-item--feedback
li.tikui-header-navigation--slot
button.tikui-header-item
span.tikui-header-item--text Second
span.tikui-header-item--feedback
li.tikui-header-navigation--slot
button.tikui-header-item
span.tikui-header-item--text Third
span.tikui-header-item--feedback
.tikui-template-page--body
.tikui-template-page--nav
.tikui-nav-vertical
.tikui-nav-vertical--item.-level-1
a.tikui-nav-item.-main(href="#")
| Main link
.tikui-nav-vertical--item.-level-2
a.tikui-nav-item.-child(href="#")
| First child link
.tikui-nav-vertical--item.-level-2
a.tikui-nav-item.-child.-selected(href="#")
| Selected child link
.tikui-nav-vertical--item.-level-3
a.tikui-nav-item.-child(href="#")
| Level 3 child link
.tikui-template-page--container
.tikui-template-page--container-content
.tikui-vertical-spacing.-s100
section.tikui-vertical-spacing--line
.tikui-vertical-spacing.-s64
.tikui-vertical-spacing--line
.tikui-vertical-spacing.-s16
.tikui-vertical-spacing--line
h1.tikui-title-main Main
span.tikui-title-main--bordered title
.tikui-vertical-spacing--line
p.tikui-paragraph Paragraph
.tikui-vertical-spacing--line
p.tikui-paragraph.-bold Bold paragraph
.tikui-vertical-spacing--line
.tikui-horizontal-spacing.-s32
.tikui-horizontal-spacing--column
button.tikui-button Primary
.tikui-horizontal-spacing--column
button.tikui-button.-secondary Secondary
section.tikui-vertical-spacing--line
.tikui-vertical-spacing.-s16
.tikui-vertical-spacing--line
.tikui-title-section Section title
.tikui-vertical-spacing--line
p.tikui-paragraph Paragraph