72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
## Override the default styles_version to the Pattern Library version (version 2)
|
|
<%! main_css = "style-main-v2" %>
|
|
|
|
<%page expression_filter="h"/>
|
|
<%inherit file="/main.html" />
|
|
|
|
<%block name="pagetitle">Course Skeleton</%block>
|
|
|
|
<%block name="bodyclass">pattern-library</%block>
|
|
|
|
<%block name="content">
|
|
<nav class="wrapper-course-material">
|
|
<div class="course-material">
|
|
<ol class="tabs course-tabs">
|
|
<li class="tab">
|
|
<a href="index.html">
|
|
Home
|
|
</a>
|
|
</li>
|
|
|
|
<li class="tab">
|
|
<a href="#">
|
|
Course
|
|
</a>
|
|
</li>
|
|
|
|
<li class="tab">
|
|
<a href="course-skeleton.html" class="active">
|
|
Skeleton
|
|
<span class="sr-only">, current location</span>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
<section class="container">
|
|
<header class="page-header has-secondary">
|
|
<div class="page-header-main">
|
|
<div class="sr-is-focusable" tabindex="-1"></div>
|
|
<h2 class="hd hd-2 page-title">Skeleton Page</h2>
|
|
<p class="page-description">This demonstrates the pieces available to a courseware page.</p>
|
|
</div>
|
|
<div class="page-header-secondary">
|
|
<div class="form-actions">
|
|
<button class="btn-neutral btn-small">Click Me!</button>
|
|
## TODO: note that this search component markup is provisional
|
|
## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
|
|
## - update the Pattern Library's markup to match
|
|
<div class="page-header-search">
|
|
<form class="search-form" role="search">
|
|
<div class="search-box">
|
|
<input class="search-field" type="text" value=""
|
|
aria-label="Search all the things" placeholder="Search all the things">
|
|
<button type="button" class="btn action action-clear" aria-label="Clear search">
|
|
<span class="fa fa-times-circle" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<button type="submit" class="btn-brand action action-search" aria-label="Search items">
|
|
<span class="fa fa-search" aria-hidden="true"></span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="page-content">
|
|
<h3>This is where the page content belongs</h3>
|
|
<p>Useful stuff goes here</p>
|
|
</div>
|
|
</section>
|
|
</%block>
|