Card heading
Card content*
*with small content
Based on MVP, but extensively extended, and originally built to be used with AuroraCMS,
it is MIT Licensed and you are free to fork, modify, contribute, or abuse it to your hearts content.
This page is to show Extra Components and styling of them, and their markup.
Area's with this background colour area are documentation area's.
This area is made up of a <header/> block element and a styled list that uses role="menubar" to seperate the list styling from interfering with standard lists.
<nav role="menubar">
<input class="menubar-input" type="checkbox" id="mobile-menu">
<label class="menubar-label" for="mobile-menu" onclick>Menu</label>
<ul>
<li>Menu Item 1</li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Dropdown Menu Item</a>
<ul>
<li><a href="#">Sublink 1</a></li>
<li><a href="#">Sublink 2</a></li>
</ul>
</li>
</ul>
</nav>
Breadcrumbs are styled via a data-content="breadcrumb" data attribute, and data-content="breadcrumb-item" for each item.
<div class="breadcrumb">
<span class="breadcrumb-item"><a href="#">Item 1</a></span>
<span class="breadcrumb-item"><a href="#">Item 2</a></span>
<span class="breadcrumb-item"><a href="#">Item 3</a></span>
<span class="breadcrumb-item active">Active Item</span>
</div>
A Covertron uses class="covertron" on a <section/> using style="background-image:url(image.jpg);" to display an image.
<section class="covertron" style="background-image:url(images.jpg);"></section>
Jumbotrons use a <section/> element with class="jumbotron" data attribute.
This is a modified jumbotron that occupies the entire horizontal space of its parent.
Page Subheading with highlighting
<section class="jumbotron">
<header>
<h1>Jumbotron</h1>
</header>
<h2>Page Heading with <i>Italics</i> and <u>Underline</u></h2>
<p>This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
<p>Page Subheading with <mark>highlighting</mark></p>
<p><a href="#" role="button"><i>Italic Link Button</i></a> <a href="#" role="button"><b>Bold Link Button →</b></a></p>
</section>
<section cLass="slidertron">
<input checked id="slide1" name="slides" type="radio">
<input id="slide2" name="slides" type="radio">
<div class="slider-arrow-nav">
<label class="slider-arrow prev" for="slide1"></label>
<label class="slider-arrow prev" for="slide2"></label>
</div>
<div class="slider-arrow-nav">
<label class="slider-arrow next" for="slide1"></label>
<label class="slider-arrow next" for="slide2"></label>
</div>
<div class="slider-content">
<div class="slider slide1">
<img src="image.jpg" alt="Slide 1">
<div class="slider-caption">
<h2>Slide 1</h2>
Caption for slide 1.
</div>
</div>
<div class="slider slide2">
<img src="image.jpg" alt="Slide 2">
<div class="slider-caption">
<h2>Slide 2</h2>
Caption for slide 2.
</div>
</div>
</div>
</section>
<figure class="avatar extra-large">
<img src="image.png" alt="...">
</figure>
<figure class="avatar large">
<img src="image.png" alt="...">
</figure>
<figure class="avatar">
<img src="image.png" alt="...">
</figure>
<figure class="avatar small">
<img src="image.png" alt="...">
</figure>
<figure class="avatar extra-small">
<img src="image.png" alt="...">
</figure>
Badges are often used as unread number indicators.
Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element.
If there is no data-badge or the attribute is not specified, the badge will appear as a dot.
<span class="badge">
Notifications
</span>
<span class="badge" data-badge="8">
Notifications
</span>
<button class="badge" data-badge="8">
Button
</button>
<figure class="avatar large badge" data-badge="8">
<img src="image.png" alt="...">
</figure>
Section Subheading
Standard un-data'd cards
Card content*
*with small content
Card content
Card content
Card content
<section>
<header>
<h2>Section Heading</h2>
<p>Section Subheading</p>
<p>Standard un-data'd cards</p>
</header>
<article>
<h3>Card heading</h3>
<p>Card content*</p>
<p><small>*with small content</small></p>
</article>
<article>
<h3>Card heading</h3>
<p>Card content</p>
</article>
<article>
<h3>Card heading</h3>
<p>Card content</p>
</article>
<article>
<h3>Card heading</h3>
<p>Card content</p>
</article>
</section>
Section Subheading
data'd cards
Card content*
*with small content
Card content with notification
Card content
<section>
<section class="content-items">
<header>
<h2>Section Heading</h2>
<p>Section Subheading</p>
<p>data'd cards</p>
</header>
<article class="card">
<img src="image.png" alt="Sample">
<h3>Card heading</h3>
<p>Card content*</p>
<p><small>*with small content</small></p>
</article>
<article class="card">
<img src="image.png" alt="Sample">
<h3>Card heading</h3>
<p>Card content <sup>with notification</sup></p>
</article>
<article class="card">
<img src="image.png" alt="Sample">
<h3>Card heading</h3>
<p>Card content</p>
</article>
</section>
<aside class="sidemenu">
Aside Contents
</aside>
</section>
<div class="tabs">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">Tab 1</label>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Tab 2</label>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Tab 3</label>
<input type="radio" name="tabs" id="tab4">
<label for="tab4">Tab 4</label>
<input type="radio" name="tabs" id="tab5">
<label for="tab5">Tab 5</label>
<div class="tab content1">
Tab 1 content
</div>
<div class="tab content2">
Tab 2 content
</div>
<div class="tab content3">
Tab 3 content
</div>
<div class="tab content4">
Tab 4 content
</div>
<div class="tab content5">
Tab 5 content
</div>
</div>
Using the <dialog/> element is done natively in Chrome and via a Polyfill in other Browsers.
For more information visit this repository: https://github.com/GoogleChrome/dialog-polyfill
<dialog>
<header>
<h5>Dialog Heading</h5>
<button type="button" class="close" aria-label="Close" onclick="dialog.close();">
<span
aria-hidden="true">
×
</span>
</button>
</header>
<section>
Dialog Content
</section>
<footer>
<button onclick="dialog.close();">Close</button>
</footer>
</dialog>
<script src="dialog-polyfill.js"></script>
<script>
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
</script>
Alerts provide feedback messages for typical actions and include some contextual styling depending on the type of alert required.
The width of Alerts depend on their parent containers width, unless their width is explicitly changed on the element or in the stylesheet declarations.
<div class="alert">
<h1>This is the default Alert Heading!!!</h1>
This is standard text with a <a href="#">Link</a>.
</div>
<div class="alert alert-info">
<h1>This is an Info Alert Heading!!!</h1>
This is standard text with a <a href="#">Link</a>.
</div>
<div class="alert alert-danger">
<h1>This is a Danger Alert Heading!!!</h1>
This is standard text with a <a href="#">Link</a>.
</div>
<div class="alert alert-success">
<h1>This is a Success Alert Heading!!!</h1>
This is standard text with a <a href="#">Link</a>.
</div>
<div class="alert alert-warning">
<h1>This is a Warning Alert Heading!!!</h1>
This is standard text with a <a href="#">Link</a>.
</div>
360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS.
You will need to use your own product image sprite (all angle of photos in one image) and set the attribute max to the image numbers to use this component.
The default image numbers in CSS are 36. You can edit the stylesheet and add more numbers.
<div class="viewer-360">
<input class="viewer-slider" type="range" min="1" max="36" value="1" oninput="this.setAttribute('value', this.value);">
<figure class="viewer-image" style="background-image:url('image.jpg');"></figure>
</div>
<div class="comparison">
<div class="comparison-slider">
<figure class="comparison-before"><img src="image-1.jpg" alt="...">
<div class="comparison-label">After</div>
</figure>
<figure class="comparison-after"><img src="image-2.jpg" alt="...">
<div class="comparison-label">Before</div>
<textarea class="comparison-resizer" readonly></textarea>
</figure>
</div>
</div>