Toggle Index
<nav class="breadcrumbs">
<header>
<a class="back">
<i data-feather="arrow-left"></i>
</a>
</header>
<section>
<span><a href="#">Courses</a></span>
<i data-feather="chevron-right"></i>
<span><a href="#">Mind, Brain, Behavior</a></span>
<i data-feather="chevron-right"></i>
<span>Course Info</span>
</section>
</nav>
Badges will be smaller than other components and will have white text. You will want to supplement the badge class with a background color utility class.
<span class="badge bg-default">New</span>
Use the color gradient classes to adjust the card header gradient, and use feather icons to adjust the icon.
This is where you put exam items...
These are your latest updates...
<section class="card">
<header class="bgGradient-magenta">
<i data-feather="clipboard"></i>
Online Testing
</header>
<main>
<h1>Open Exams</h1>
<p>This is where you put exam items...</p>
</main>
<footer>
<span><a href="#">Online Testing</a></span>
</footer>
</section>
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
<div class="alert danger">
<h1>Danger</h1>
<p>This is a bunch of information you need to know...</p>
</div>
<div class=“toast”>
<div class=“toast-content”>
<i class=‘icon’ icon-name=‘info’></i>
<div class=“message”>
<span class=“text text-1”>Default</span>
<span class=“text text-2”>This is a bunch of information you need to know…</span>
</div>
</div>
<i class=‘close’ icon-name=‘x’></i>
<div class=“progress”></div>
</div>
<div class=“toast small”>
<div class=“toast-content”>
<i class=‘icon’ icon-name=‘info’></i>
<div class=“message”>
<span class=“text text-1”>Default</span>
<span class=“text text-2”>This is a bunch of information you need to know…</span>
</div>
</div>
<i class=‘close’ icon-name=‘x’></i>
<div class=“progress”></div>
</div>
Add success, danger, warning class to .toast to change components
<div class=“toast success”>
<div class=“toast danger”>
<div class=“toast warning”>
Trigger Toast using button or link that triggers toast(className) function. Code is included in nodejs controls.
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
This is a bunch of information you need to know...
<div class="callout danger">
<h3>Danger</h3>
<p>This is a bunch of information you need to know...</p>
</div>
Tab headers are used for mobile display. Use Javascript to change the active tabs name in #active-tab inside the header.
.active class is not visible in mobile dropdown
<div class="tabs">
<header>
<i data-feather="layout"></i>
<span id="active-tab">Current Tab</span>
<i data-feather="chevron-down"></i>
</header>
<section class="list">
<a href="" class="active">Tab 1</a>
<a href="">Tab 2</a>
<a href="">Tab 3</a>
<a href="">Tab 4</a>
<a href="">Tab 5</a>
<a href="">Tab 6</a>
</section>
</div>
You can add the following script to add active tabs name to the .active-tab class
<script>
var active = document.querySelector(".tabs .active").innerHTML;
document.querySelector('.tabs #active-tab').innerHTML = active;
</script>
Options headers are used for mobile display. .right class can be used to justify options menu to the right.
Options menu can be use both <button> or <a class="button"> to create button (see code below).
using <button>
<div class="options right">
<header>
<i data-feather="more-horizontal"></i>
<span>settings</span>
</header>
<section class="option-list">
<button class="default">Default</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
<button class="disabled">Disabled</button>
</section>
</div>
using <a class="button">
<div class="options right">
<header>
<i data-feather="more-horizontal"></i>
<span>settings</span>
</header>
<section class="option-list">
<a class="button default">Default</a>
<a class="button success">Success</a>
<a class="button danger">Danger</a>
<a class="button disabled">Disabled</a>
</section>
</div>
<div class="paging">
<ul data-m-segment="paging">
{{#isNotEq pageIndex "1"}}
<li><a title="First" href="#" data-m-action="first" data-m-url="/Board/CourseBoardList?" data-m-primary="Course:{{course.Code}};BoardID:{{BoardID}};ParentBoardID:{{parentboard}};"><<</a></li>
<li><a title="Previous" href="#" data-m-action="prev" data-m-url="/Board/CourseBoardList?" data-m-primary="Course:{{course.Code}};BoardID:{{BoardID}};ParentBoardID:{{parentboard}};"><</a></li>
{{/isNotEq}}
{{{paging totalCount pageIndex pageSize "/Board/CourseBoardList" ""}}}
{{#needsLastPage totalCount pageIndex pageSize}}
<li><a title="Next" href="#" data-m-action="next" data-m-url="/Board/CourseBoardList?" data-m-primary="Course:{{course.Code}};BoardID:{{BoardID}};ParentBoardID:{{parentboard}};">></a></li>
<li><a title="Last" href="#" data-m-action="last" data-m-url="/Board/CourseBoardList?PageIndex={{lastPage totalCount pageSize}}" data-m-primary="Course:{{course.Code}};BoardID:{{BoardID}};ParentBoardID:{{parentboard}};">>></a></li>
{{/needsLastPage}}
</ul>
</div>