Badges
A badge component describes status of other UI elements. It is commonly used to highlight new or unread items.
<span class="c-badge c-badge--primary">5</span>
<span class="c-badge c-badge--secondary">5</span>
<span class="c-badge c-badge--primary">new</span>
<span class="c-badge c-badge--secondary">new</span>
<span class="c-badge c-badge--round c-badge--round--primary">1</span>
<span class="c-badge c-badge--round c-badge--round--secondary">72</span>
<span class="c-badge c-badge--square c-badge--square--primary">4 new</span>
<span class="c-badge c-badge--square c-badge--square--secondary">4 new</span>
<span class="c-badge c-badge--square c-badge--square--primary">free</span>
<span class="c-badge c-badge--square c-badge--square--primary">info</span>
<span class="c-badge c-badge--square c-badge--square--secondary">default</span>
Demo
TO DO
Basic
The breadcrumb navigation component simplifies navigation for the user. Breadcrumbs reduce the number of actions for users to take to reach other pages, while indicating the current location in a website's navigational hierarchy.
<ul class="c-breadcrumb" role="menubar" aria-label="breadcrumb">
<li class="c-breadcrumb__li" role="menuitem"><a href="#" class="c-breadcrumb__a">Home</a></li>
<li class="c-breadcrumb__li" role="menuitem"><a href="#" class="c-breadcrumb__a">aliceblue</a></li>
<li class="c-breadcrumb__li" role="menuitem"><a href="#" class="c-breadcrumb__a">burlywood</a></li>
<li class="c-breadcrumb__li" role="menuitem" class="active"><a href="#" class="c-breadcrumb__a">chartreuse</a></li>
</ul>
Ribbon
This optional breadcrumb navigation component is designed as a ribbon. Append --rbn at the end of the classes c-breadcrumb__li and c-breadcrumb__a.
<ul class="c-breadcrumb" role="menubar" aria-label="breadcrumb">
<li class="c-breadcrumb__li--rbn" role="menuitem"><a href="#" class="c-breadcrumb__a--rbn">Home</a></li>
<li class="c-breadcrumb__li--rbn" role="menuitem"><a href="#" class="c-breadcrumb__a--rbn">aliceblue</a></li>
<li class="c-breadcrumb__li--rbn" role="menuitem"><a href="#" class="c-breadcrumb__a--rbn">burlywood</a></li>
<li class="c-breadcrumb__li--rbn" role="menuitem" class="active"><a href="#" class="c-breadcrumb__a--rbn">chartreuse</a></li>
</ul>
Ribbon - Duo-Color
To achieve the two-tone style, apply the class c-breadcrumb--var-col to the desired <a> tag.
<ul class="c-breadcrumb" role="menubar" aria-label="breadcrumb">
<li class="c-breadcrumb__li--rbn" role="menuitem"><a href="#" class="c-breadcrumb__a--rbn c-breadcrumb--var-col">Home</a></li>
<li class="c-breadcrumb__li--rbn" role="menuitem"><a href="#" class="c-breadcrumb__a--rbn">aliceblue</a></li>
<li class="c-breadcrumb__li--rbn" role="menuitem"><a href="#" class="c-breadcrumb__a--rbn c-breadcrumb--var-col">burlywood</a></li>
<li class="c-breadcrumb__li--rbn" role="menuitem" class="active"><a href="#" class="c-breadcrumb__a--rbn">chartreuse</a></li>
</ul>
Basic Buttons
To use the button components, include the c-btn class in addition to the differentiating primary and secondary styling, which are applied with either classes: c-btn--primary or c-btn--secondary.
<!-- Primary buttons -->
<button class="c-btn--primary c-btn" type="button" name="button">Primary</button>
<!-- Secondary buttons -->
<button class="c-btn--secondary c-btn" type="button" name="button">Secondary</button>
<!-- Anchor tag styled as a primary button -->
<a class="c-btn--primary c-btn" href="#">Link Button</a>
<!-- Button with fontawesome.io icon -->
<button class="c-btn--primary c-btn" type="button" name="button">
<span class="c-btn__btn-icon">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</span>
Send
</button>
<!-- Disabled button using the disabled attribute. -->
<button class="c-btn--primary c-btn" type="button" name="button" disabled>
<span class="c-btn__btn-icon">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
Disabled
</button>
Rounded Buttons
To achieve the rounded effect, append --rounded to the primary or secondary class names.
<!-- Primary buttons -->
<button class="c-btn--primary--rounded c-btn" type="button" name="button">Primary</button>
<!-- Secondary buttons -->
<button class="c-btn--secondary--rounded c-btn" type="button" name="button">Secondary</button>
<!-- Anchor tag styled as a primary button -->
<a class="c-btn--primary--rounded c-btn" href="#">Link Button</a>
<!-- Button with fontawesome.io icon -->
<button class="c-btn--primary--rounded c-btn" type="button" name="button">
<span class="c-btn__btn-icon">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</span>
Send
</button>
<!-- Disabled button using the disabled attribute. -->
<button class="c-btn--primary--rounded c-btn" type="button" name="button" disabled>
<span class="c-btn__btn-icon">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
Disabled
</button>
Button Groups
Group buttons together by utilizing the c-btn-i class. For alternative colors on specific buttons, include c-btn-i--diff.
<ul class="c-btn-gp">
<li><button class="c-btn c-btn-i" type="button" name="button">Button 1</button></li>
<li><button class="c-btn c-btn-i c-btn-i--diff" type="button" name="button">Button 2</button></li>
<li><button class="c-btn c-btn-i" type="button" name="button">Button 3</button></li>
<li><button class="c-btn c-btn-i c-btn-i--diff" type="button" name="button">Button 4</button></li>
</ul>
<ul class="c-btn-gp">
<li><a class="c-btn c-btn-i" href="#">Link 1</a></li>
<li><a class="c-btn c-btn-i c-btn-i--diff" href="#">Link 2</a></li>
<li><a class="c-btn c-btn-i" href="#">Link 3</a></li>
<li><a class="c-btn c-btn-i c-btn-i--diff" href="#">Link 4</a></li>
</ul>
<ul class="c-btn-gp">
<li><button class="c-btn c-btn-i c-btn-i--rd-l" type="button" name="button">Button 1</button></li>
<li><button class="c-btn c-btn-i c-btn-i--diff" type="button" name="button">Button 2</button></li>
<li><button class="c-btn c-btn-i" type="button" name="button">Button 3</button></li>
<li><button class="c-btn c-btn-i c-btn-i--diff c-btn-i--rd-r" type="button" name="button">Button 4</button></li>
</ul>
Cards
Cards are a convenient way to display related bits of information.
Article Preview
Used to display a preview of an article or post.
April 3, 2017
Europe on $50 a Day
<div class="c-card">
<div class="c-card__head">
<img class="c-card__img" src="path/to/image">
<span class="c-card__category">Travel</span>
</div>
<div class="c-card__body">
<p class="c-card__date">April 3, 2017</p>
<h3 class="c-card__title">Europe on $50 a Day</h3>
<div class="c-separator u-separator--primary"></div>
<div class="c-card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, repudiandae velit! Ad aperiam, blanditiis delectus repudiandae velit?
</div>
<button class="c-btn--primary c-btn pull-right" type="button" name="button">Read More</button>
</div>
</div>
Contact Card
Card showing contact information.
Jenny Jones
<div class="c-card">
<div class="c-card__head">
<img class="c-card__img" src="path/to/image">
<img class="c-card__profile-pic" src="../images/girl-2.png">
</div>
<div class="c-card__body">
<h3 class="c-card__profile-name u-text-center">Jenny Jones</h3>
<div class="c-card__text u-text-center">
Senior Backend Developer
</div>
<div class="c-separator u-separator--primary"></div>
<div class="c-card__social-profiles u-text-center">
<a class="c-card__social-icon" href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
<a class="c-card__social-icon" href="#"><i class="fa fa-github-alt" aria-hidden="true"></i></a>
<a class="c-card__social-icon" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
Call to Action
This card brings some information to the user's attention and requires their input.
Take Our Survey
<div class="c-card">
<div class="c-card__head u-bg-primary">
<span class="c-card__head-icon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
</div>
<div class="c-card__body">
<h3 class="c-card__title">Take Our Survey</h3>
<div class="c-card__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. repudiandae velit?
</div>
<button class="c-btn--secondary c-btn pull-left" type="button" name="button">Nope!</button>
<button class="c-btn--primary c-btn pull-right" type="button" name="button">Okay</button>
</div>
</div>
Chips
Chips are small blocks that contain complex elements, such as text, images, and icons. They can represent contact information and various categories.
Basic Chip
<div class="c-chip--filled">
Basic chip
</div>
<div class="c-chip--outlined">
Basic chip
</div>
Avatar Chips - Initial
<div class="c-chip--filled">
<span class="c-chip__media--f">A</span>
Avatar chip - initial
</div>
<div class="c-chip--outlined">
<span class="c-chip__media--o">A</span>
Avatar chip - initial
</div>
Avatar Chips - Icon
<div class="c-chip--filled">
<span class="c-chip__media--f"><i class="fa fa-user-o c-chip__icon" aria-hidden="true"></i></span>
Avatar chip - icon
</div>
<div class="c-chip--outlined">
<span class="c-chip__media--o"><i class="fa fa-user-o c-chip__icon" aria-hidden="true"></i></span>
Avatar chip - icon
</div>
Avatar Chips - Image
Avatar chip - image
Avatar chip - image
<div class="c-chip--filled">
<span class="c-chip__media--f"><img src="" alt="contact people" class="c-chip__img"></span>
Avatar chip - image
</div>
<div class="c-chip--outlined">
<span class="c-chip__media--f c-chip__media--f--img"><img src="" alt="contact people" class="c-chip__img"></span>
Avatar chip - image
</div>
Deletable Chips
.jpg)
Avatar chip - image
Avatar chip - image
<div class="c-chip--filled c-chip--deletable">
Basic chip
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--outlined c-chip--deletable">
Basic chip
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--filled c-chip--deletable">
<span class="c-chip__media--f">D</span> Avatar chip - initial
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--outlined c-chip--deletable">
<span class="c-chip__media--o">D</span> Avatar chip - initial
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--filled c-chip--deletable">
<span class="c-chip__media--f"><i class="fa fa-user-o c-chip__icon" aria-hidden="true"></i></span>
Avatar chip - icon
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--outlined c-chip--deletable">
<span class="c-chip__media--o"><i class="fa fa-user-o c-chip__icon" aria-hidden="true"></i></span>
Avatar chip - icon
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--filled c-chip--deletable">
<span class="c-chip__media--f"><img src="" alt="contact people" class="c-chip__img"></span>
Avatar chip - image
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
<div class="c-chip--outlined c-chip--deletable">
<span class="c-chip__media--f c-chip__media--f--img"><img src="" alt="contact people" class="c-chip__img"></span>
Avatar chip - image
<span class="c-chip__delete"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
Normal-Size Checkbox Inputs
Add c-input and c-input-checkbox classes to the input. You must also use the c-label class for the required labels.
<div class="c-checkbox">
<input class="c-input c-input-checkbox" id="example1" type="checkbox" name="aliceblue" value="aliceblue">
<label class="c-label" for="example1">aliceblue</label>
</div>
<div class="c-checkbox">
<input class="c-input c-input-checkbox" id="example2" type="checkbox" name="burlywood" value="burlywood">
<label class="c-label" for="example2">burlywood</label>
</div>
<div class="c-checkbox">
<input class="c-input c-input-checkbox" id="example3" type="checkbox" name="chartreuse" value="chartreuse">
<label class="c-label" for="example3">chartreuse</label>
</div>
Large-Size Checkbox Inputs
Add c-input and c-input-checkbox--lg classes to the input. You must also use the c-label class for the required labels.
<div class="c-checkbox">
<input class="c-input c-input-checkbox--lg" id="example4" type="checkbox" name="aliceblue" value="aliceblue">
<label class="c-label" for="example4">aliceblue</label>
</div>
<div class="c-checkbox">
<input class="c-input c-input-checkbox--lg" id="example5" type="checkbox" name="burlywood" value="burlywood">
<label class="c-label" for="example5">burlywood</label>
</div>
<div class="c-checkbox">
<input class="c-input c-input-checkbox--lg" id="example6" type="checkbox" name="chartreuse" value="chartreuse">
<label class="c-label" for="example6">chartreuse</label>
</div>
Radio Button Inputs
Nest the radio buttons within the <radiogroup> tag. Only one radio button can be selected at a time.
Apply the c-radiogroup class to the <radiogroup> tag. All radio buttons require the c-input class and their respective label.
<radiogroup class="c-radiogroup">
<div class="c-radio">
<input class="c-input c-input-radio" id="example7" type="radio" name="chromecolor" value="aliceblue">
<label class="c-label" for="example7">aliceblue</label>
</div>
<div class="c-radio">
<input class="c-input c-input-radio" id="example8" type="radio" name="chromecolor" value="burlywood">
<label class="c-label" for="example8">burlywood</label>
</div>
<div class="c-radio">
<input class="c-input c-input-radio" id="example9" type="radio" name="chromecolor" value="chartreuse">
<label class="c-label" for="example9">chartreuse</label>
</div>
</radiogroup>
Toggle Switch Using Checkbox Input
For square toggle switches, remove the class c-switch--rd from both the label and slider div.
<div class="c-switch">
<input class="c-input c-input-switch" id="c-input-switch" type="checkbox" name="c-input-switch">
<label class="c-switch__body c-switch--rd" for="c-input-switch"></label>
<div class="c-switch__slider c-switch--rd"></div>
</div>
List
Lists are used to group related content, including text, images and more complex components. They consist of multiple items displayed vertically or horizontally.
Basic Ordered List
- Course 1
- Course 2
- Chapter 1
- Chapter 2
- Chapter 3
- Section 1
- Section 2
- Course 3
<ol class="c-list c-list--ol">
<li class="c-list__item c-list--ol__item">Course 1</li>
<li class="c-list__item c-list--ol__item">Course 2
<ol class="c-list c-list--ol c-list__sublist">
<li class="c-list__item c-list--ol__item">Chapter 1</li>
<li class="c-list__item c-list--ol__item">Chapter 2</li>
<li class="c-list__item c-list--ol__item">Chapter 3
<ol class="c-list c-list--ol c-list__sublist">
<li class="c-list__item c-list--ol__item">Section 1</li>
<li class="c-list__item c-list--ol__item">Section 2</li>
</ol>
</li>
</ol>
</li>
<li class="c-list__item c-list--ol__item">Course 3</li>
</ol>
<ol class="c-list c-list--ol">
<li class="c-list__item c-list--ol__item">
<a href="#">Course 1</a>
</li>
<li class="c-list__item c-list--ol__item">
<a href="#">Course 2</a>
<ol class="c-list c-list--ol c-list__sublist">
<li class="c-list__item c-list--ol__item">
<a href="#">Chapter 1</a>
</li>
<li class="c-list__item c-list--ol__item">
<a href="#">Chapter 2</a>
</li>
<li class="c-list__item c-list--ol__item">
<a href="#">Chapter 3</a>
<ol class="c-list c-list--ol c-list__sublist">
<li class="c-list__item c-list--ol__item">
<a href="#">Section 1</a>
</li>
<li class="c-list__item c-list--ol__item">
<a href="#">Section 2</a>
</li>
</ol>
</li>
</ol>
</li>
<li class="c-list__item c-list--ol__item">
<a href="#">Course 3</a>
</li>
</ol>
Basic Unordered List
- Course 1
- Course 2
- Chapter 1 - link
- Chapter 2
- Chapter 3
- Section 1
- Section 2 - link
- Course 3
<ul class="c-list c-list--ul">
<li class="c-list__item c-list--ul__item">Course 1</li>
<li class="c-list__item c-list--ul__item">Course 2
<ul class="c-list c-list--ul c-list__sublist">
<li class="c-list__item c-list--ul__item">
< href="#">Chapter 1 - link</a>
</li>
<li class="c-list__item c-list--ul__item">Chapter 2</li>
<li class="c-list__item c-list--ul__item">Chapter 3
<ul class="c-list c-list--ul c-list__sublist">
<li class="c-list__item c-list--ul__item">Section 1</li>
<li class="c-list__item c-list--ul__item">
<a href="#">Section 2 - link</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="c-list__item c-list--ul__item">
<a href="#">Course 3</a>
</li>
</ul>
Bulleted Unordered List
- Course 1
- Course 2
- Chapter 1 - link
- Chapter 2
- Chapter 3
- Section 1
- Section 2 - link
- Course 3
<ul class="c-list c-list--ul-bt">
<li class="c-list__item c-list--ul__item">Course 1</li>
<li class="c-list__item c-list--ul__item">Course 2
<ul class="c-list c-list__sublist c-list--ul-bt__sublist">
<li class="c-list__item c-list--ul__item">
<a href="#">Chapter 1 - link</a>
</li>
<li class="c-list__item c-list--ul__item">Chapter 2</li>
<li class="c-list__item c-list--ul__item">Chapter 3
<ul class="c-list c-list__sublist c-list--ul-bt__sublist">
<li class="c-list__item c-list--ul__item">Section 1</li>
<li class="c-list__item c-list--ul__item">
<a href="#">Section 2 - link</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="c-list__item c-list--ul__item">Course 3</li>
</ul>
Unordered List - Icon
- John Doe
- New York, NY
- john.doe@example.com
- johndoe.com
<ul class="c-list c-list--ul">
<li class="c-list__item c-list--ul__item">
<i class="fa fa-user c-list__icon" aria-hidden="true"></i> John Doe
</li>
<li class="c-list__item c-list--ul__item">
<i class="fa fa-map-marker c-list__icon" aria-hidden="true"></i> New York, NY
</li>
<li class="c-list__item c-list--ul__item">
<i class="fa fa-envelope c-list__icon" aria-hidden="true"></i>
<a href="#">john.doe@example.com</a>
</li>
<li class="c-list__item c-list--ul__item">
<i class="fa fa-globe c-list__icon" aria-hidden="true"></i>
<a href="#">johndoe.com</a>
</li>
</ul>
Unordered List - Image
-
John
-
Amy
-
Chris
-
Daniel
<ul class="c-list c-list--ul">
<li class="c-list__item c-list__item--media">
<img src="" class="c-list__img"> John
</li>
<li class="c-list__item c-list__item--media">
<img src="" class="c-list__img"> Amy
</li>
<li class="c-list__item c-list__item--media">
<img src="" class="c-list__img">
<a href="#">Chris</a>
</li>
<li class="c-list__item c-list__item--media">
<img src="" class="c-list__img"> Daniel
</li>
</ul>
Horizontal List
-
John
-
Amy
-
Chris
-
Daniel
<ul class="c-list c-list--ul c-list--hz">
<li class="c-list__item c-list__item--media c-list__item--hz">
<img src="" class="c-list__img"> John
</li>
<li class="c-list__item c-list__item--media c-list__item--hz">
<img src="" class="c-list__img"> Amy
</li>
<li class="c-list__item c-list__item--media c-list__item--hz">
<img src=" class="c-list__img">
<a href="#">Chris</a>
</li>
<li class="c-list__item c-list__item--media c-list__item--hz">
<img src="" class="c-list__img"> Daniel
</li>
</ul>
Pagination
Pagination lists can be used for supplementary navigation
<ol class="c-pagination">
<li class="c-pagination__nav--prev"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
<li class="c-pagination__item"><a href="#">1</a></li>
<li class="c-pagination__item"><a href="#"><i class="fa fa-ellipsis-h"></i></a></li>
<li class="c-pagination__item"><a href="#">14</a></li>
<li class="c-pagination__item--current"><a href="#">15</a></li>
<li class="c-pagination__item"><a href="#">16</a></li>
<li class="c-pagination__item"><a href="#"><i class="fa fa-ellipsis-h"></i></a></li>
<li class="c-pagination__item"><a href="#">32</a></li>
<li class="c-pagination__nav--next"><a href="#"><i class="fa fa-chevron-right"></i></a></li>
</ol>
Select Box
Eureka Button with Options
<select class="eureka-select">
<option class="eureka-select-option1">Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
Tables
Tables offer a way to present a lot of information to the end user at one time. Table requires the HTML5 standard of thead as well as tbody.
Regular Table
Add a class of "c-table" to your tables. Tables don't have borders by default.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| One | Two | Three | Four |
| One | Two | Three | Four |
| One | Two | Three | Four |
<table class="c-table">
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__head-column">Column 1</th>
<th class="c-table__head-column">Column 2</th>
<th class="c-table__head-column">Column 3</th>
<th class="c-table__head-column">Column 4</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
</tbody>
</table>
Bordered Table
Add class "c-table--bordered" to add borders to the table.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| One | Two | Three | Four |
| One | Two | Three | Four |
| One | Two | Three | Four |
<table class="c-table c-table--bordered">
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__head-column">Column 1</th>
<th class="c-table__head-column">Column 2</th>
<th class="c-table__head-column">Column 3</th>
<th class="c-table__head-column">Column 4</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
</tbody>
</table>
Striped Table
Add class "c-table--striped" to add stripes to every odd row of the table.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| One | Two | Three | Four |
| One | Two | Three | Four |
| One | Two | Three | Four |
| One | Two | Three | Four |
<table class="c-table c-table--bordered c-table--striped">
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__head-column">Column 1</th>
<th class="c-table__head-column">Column 2</th>
<th class="c-table__head-column">Column 3</th>
<th class="c-table__head-column">Column 4</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
</tbody>
</table>
Highlighted Table
Add class "c-table--highlight" to add a highlight hover effect of the table rows.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| One | Two | Three | Four |
| One | Two | Three | Four |
| One | Two | Three | Four |
| One | Two | Three | Four |
<table class="c-table c-table--bordered c-table--highlight">
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__head-column">Column 1</th>
<th class="c-table__head-column">Column 2</th>
<th class="c-table__head-column">Column 3</th>
<th class="c-table__head-column">Column 4</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
<tr class="c-table__row">
<td class="c-table__column">One</td>
<td class="c-table__column">Two</td>
<td class="c-table__column">Three</td>
<td class="c-table__column">Four</td>
</tr>
</tbody>
</table>
Typography
Eureka uses the Roboto Google font.
Headings
We use the 1.333 Perfect Fourth Scale to build the various headings.
This is a Heading 1
This is a Heading 2
This is a Heading 3
This is a Heading 4
This is a Heading 5
This is a Heading 6
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>
Blockquotes
Blockquotes are highlighted with a primary left border.
This is a famous quote.
<blockquote>This is a famous quote.</blockquote>
Accordion
Dynamic accordion functionality to cycle through different areas of content
Accordion (Dark Version)
Accordion with dark headings.
-
This is the content for accordion one This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
-
This is the content for accordion two This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
-
This is the content for accordion two This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
<ul class="accordion">
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state" id="accordion-one">
<label class="accordion__title accordion__title--dark" for="accordion-one">
Section One
<i class="fa fa-angle-down accordion__icon pull-right" aria-hidden="true"></i>
</label>
<div class="accordion__content">This is the content for accordion one This is the content for accordion one
This is the content for accordion one This is the content for accordion two This is the content for
accordion one This is the content for accordion one</div>
</li>
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state" id="accordion-two">
<label class="accordion__title accordion__title--dark" for="accordion-two">
Section Two
<i class="fa fa-angle-down accordion__icon pull-right" aria-hidden="true"></i>
</label>
<div class="accordion__content">This is the content for accordion two This is the
content for accordion one This is the content for accordion one This is the content for accordion two
This is the content for accordion one This is the content for accordion one</div>
</li>
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state" id="accordion-three">
<label class="accordion__title accordion__title--dark" for="accordion-three">
Section Three
<i class="fa fa-angle-down accordion__icon pull-right" aria-hidden="true"></i>
</label>
<div class="accordion__content">This is the content for accordion two This is
the content for accordion one This is the content for accordion one This is the content for
accordion two This is the content for accordion one This is the content for accordion one</div>
</li>
</ul>
Accordion (Light Version)
Accordion with light headings.
-
This is the content for accordion one This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
-
This is the content for accordion two This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
-
This is the content for accordion two This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
<ul class="accordion">
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state-one" id="accordion-four">
<label class="accordion__title accordion__title--light" for="accordion-four">
Section One
<i class="fa fa-angle-down accordion__icon" aria-hidden="true"></i>
</label>
<div class="accordion__content">This is the content for accordion one This is the
content for accordion one This is the content for accordion one This is the content for accordion two
This is the content for accordion one This is the content for accordion one</div>
</li>
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state-one" id="accordion-five">
<label class="accordion__title accordion__title--light" for="accordion-five">
Section Two
<i class="fa fa-angle-down accordion__icon" aria-hidden="true"></i>
</label>
<div class="accordion__content">This is the content for accordion two This is
the content for accordion one This is the content for accordion one This is the content for accordion
two This is the content for accordion one This is the content for accordion one</div>
</li>
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state-one" id="accordion-six">
<label class="accordion__title accordion__title--light" for="accordion-six">
Section Three
<i class="fa fa-angle-down accordion__icon" aria-hidden="true"></i>
</label>
<div class="accordion__content">This is the content for accordion two This is
the content for accordion one This is the content for accordion one This is the content for accordion
two This is the content for accordion one This is the content for accordion one</div>
</li>
</ul>
Accordion (Mixed Version)
Accordion with light headings and dark content areas. This version also includes an icon to the right side of the heading.
-
This is the content for accordion one This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
-
This is the content for accordion two This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
-
This is the content for accordion two This is the content for accordion one This is the content for accordion one This is the content for accordion two This is the content for accordion one This is the content for accordion one
<ul class="accordion">
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state-two" id="accordion-seven">
<label class="accordion__title accordion__title--light" for="accordion-seven">
Section One
<span class="icon-circle">
<i class="fa fa-angle-down accordion__icon" aria-hidden="true"></i>
</span>
</label>
<div class="accordion__content accordion__content--dark">This is the content for accordion one
This is the content for accordion one This is the content for accordion one This is the content for accordion
two This is the content for accordion one This is the content for accordion one</div>
</li>
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state-two" id="accordion-eight">
<label class="accordion__title accordion__title--light" for="accordion-eight">
Section Two
<span class="icon-circle">
<i class="fa fa-angle-down accordion__icon" aria-hidden="true"></i>
</span>
</label>
<div class="accordion__content accordion__content--dark">This is the content for accordion two
This is the content for accordion one This is the content for accordion one This is the content for accordion
two This is the content for accordion one This is the content for accordion one</div>
</li>
<li class="accordion__item">
<input type="radio" class="accordion__state" name="accordion-state-two" id="accordion-nine">
<label class="accordion__title accordion__title--light" for="accordion-nine">
Section Three
<span class="icon-circle">
<i class="fa fa-angle-down accordion__icon" aria-hidden="true"></i>
</span>
</label>
<div class="accordion__content accordion__content--dark">This is the content for accordion two
This is the content for accordion one This is the content for accordion one This is the content for
accordion two This is the content for accordion one This is the content for accordion one</div>
</li>
</ul>
Alert
Alerts offer a way to send a quick message to the user. Alerts can contain any HTML, are dismissable, and come in a few different preconfigured colors
Basic alert - default
This is a basic alert. You can get rid of it by clicking on the close icon.
Basic alert - primary
This is a primary alert. You can get rid of it by clicking on the close icon.
Basic alert - success
This is a success alert. You can get rid of it by clicking on the close icon.
Basic alert - caution
This is a caution alert. You can get rid of it by clicking on the close icon.
Basic alert - warning
This is a warning alert. You can get rid of it by clicking on the close icon.
Alert w/ button - primary
Alerts can also be set to be dismissed by clicking on any element within the alert. Just add
a data-close-alert="true" attribute to the element.
You can have a header!
This is a warning alert. You can get rid of it by clicking on the close icon.
Or you could dismiss it with this button:
<!-- default -->
<div class="c-alert">
<p>This is a basic alert. You can get rid of it by clicking on the close icon.</p>
<span class="c-alert__close-alert">
<i class="fa fa-times"></i>
</span>
</div>
<!-- primary -->
<div class="c-alert--primary">
<p>This is a primary alert. You can get rid of it by clicking on the close icon.</p>
<span class="c-alert__close-alert">
<i class="fa fa-times"></i>
</span>
</div>
<!-- success -->
<div class="c-alert--success">
<p>This is a success alert. You can get rid of it by clicking on the close icon.</p>
<span class="c-alert__close-alert">
<i class="fa fa-times"></i>
</span>
</div>
<!-- caution -->
<div class="c-alert--caution">
<p>This is a caution alert. You can get rid of it by clicking on the close icon.</p>
<span class="c-alert__close-alert">
<i class="fa fa-times"></i>
</span>
</div>
<!-- warning -->
<div class="c-alert--warning">
<p>This is a warning alert. You can get rid of it by clicking on the close icon.</p>
<span class="c-alert__close-alert">
<i class="fa fa-times"></i>
</span>
</div>
<!-- alert with button -->
<div class="c-alert--primary">
<h4>You can have a header!</h4>
<p>This is a warning alert. You can get rid of it by clicking on the close icon.</p>
<p>Or you could dismiss it with this button:</p>
<button class="c-btn--primary c-btn c-btn--primary--rounded" type="button" name="button" data-close-alert="true">Get it outta here!</button>
<span class="c-alert__close-alert">
<i class="fa fa-times"></i>
</span>
</div>
Bar Graphs
You can create bar graphs to show data. The bar graphs come with cool animation effect.
<div class="bar-graph-container">
<div class="bar-graph">
<h3 class="bar-graph__heading">Heading 01</h3>
<div class="bar-graph__legend">
<div class="bar-graph__legend-value">Expert</div>
<div class="bar-graph__legend-value">Proficient</div>
<div class="bar-graph__legend-value">Competent</div>
<div class="bar-graph__legend-value">Learning</div>
</div>
<div class="bar-graph__bars">
<div class="bar-graph__bar" data-level="90"><p class="bar-graph__bar-title">Title01</p></div>
<div class="bar-graph__bar" data-level="80"><p class="bar-graph__bar-title">Title02</p></div>
<div class="bar-graph__bar" data-level="10"><p class="bar-graph__bar-title">Title03</p></div>
<div class="bar-graph__bar" data-level="60"><p class="bar-graph__bar-title">Title04</p></div>
<div class="bar-graph__bar" data-level="50"><p class="bar-graph__bar-title">Title05</p></div>
</div>
</div>
<div class="bar-graph">
<h3 class="bar-graph__heading">Heading 02</h3>
<div class="bar-graph__legend">
<div class="bar-graph__legend-value">Expert</div>
<div class="bar-graph__legend-value">Proficient</div>
<div class="bar-graph__legend-value">Competent</div>
<div class="bar-graph__legend-value">Learning</div>
</div>
<div class="bar-graph__bars">
<div class="bar-graph__bar" data-level="20"><p class="bar-graph__bar-title">Title01</p></div>
<div class="bar-graph__bar" data-level="70"><p class="bar-graph__bar-title">Title02</p></div>
<div class="bar-graph__bar" data-level="90"><p class="bar-graph__bar-title">Title03</p></div>
<div class="bar-graph__bar" data-level="60"><p class="bar-graph__bar-title">Title04</p></div>
<div class="bar-graph__bar" data-level="10"><p class="bar-graph__bar-title">Title05</p></div>
</div>
</div>
<div class="bar-graph">
<h3 class="bar-graph__heading">Heading 03</h3>
<div class="bar-graph__legend">
<div class="bar-graph__legend-value">Expert</div>
<div class="bar-graph__legend-value">Proficient</div>
<div class="bar-graph__legend-value">Competent</div>
<div class="bar-graph__legend-value">Learning</div>
</div>
<div class="bar-graph__bars">
<div class="bar-graph__bar" data-level="60"><p class="bar-graph__bar-title">Title01</p></div>
<div class="bar-graph__bar" data-level="40"><p class="bar-graph__bar-title">Title02</p></div>
<div class="bar-graph__bar" data-level="30"><p class="bar-graph__bar-title">Title03</p></div>
<div class="bar-graph__bar" data-level="80"><p class="bar-graph__bar-title">Title04</p></div>
<div class="bar-graph__bar" data-level="20"><p class="bar-graph__bar-title">Title05</p></div>
</div>
</div>
</div>
Collapse
A collapse can be used to show and hide content by clicking on a toggle anchor. Collapses are especially useful for code examples and supplementary information.
Basic collapse
A basic collapse component with minimal styling.
I am the content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore voluptatem ducimus nostrum alias, quasi optio, deleniti laboriosam autem, ullam impedit rerum odit debitis doloribus quo cupiditate consequuntur quibusdam! Sapiente, maxime!
Code well styles
Collapse come with both light and dark basic styling for displaying markup.
For the light version add <div
class="c-collapse__content-container c-collapse__content-container--light"> to the
content container div.
For the dark version add <div
class="c-collapse__content-container c-collapse__content-container--dark"> to the
content container div.
Fixed height option
By default collapse components will expand to the full height of their content. To set a
fixed height and enable scrolling, just add a data-fixed-height
attribute with the fixed height value to the outer component div.
For example for a fixed height of 500px: <div class="c-collapse"
data-fixed-height="500">...</div>
<!--collapse component - basic -->
<div class="c-collapse">
<a class="c-collapse__toggle">toggle content</a>
<div class="c-collapse__content-container">
<div class="c-collapse__content">
<h3>I am the content.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
</div>
</div>
<!-- collapse component - code-well (light) -->
<div class="c-collapse" data-fixed-height="300">
<div class="c-collapse__controls-container--justified-text">
<i class="fa fa-code fa-lg" aria-hidden="true"></i>
<a class="c-collapse__toggle">toggle markup</a>
</div>
<div class="c-collapse__content-container c-collapse__content-container--light">
<div class="c-collapse__content">
<pre class="u-pre--wrap">
<code class="u-example-code">
<!-- escaped code here -->
</code>
</pre>
</div>
</div>
</div>
<!-- collapse component - code-well (dark) -->
<div class="c-collapse">
<div class="c-collapse__controls-container--justified-text">
<i class="fa fa-code fa-lg" aria-hidden="true"></i>
<a class="c-collapse__toggle">toggle markup</a>
</div>
<div class="c-collapse__content-container c-collapse__content-container--dark">
<div class="c-collapse__content">
<pre class="u-pre--wrap">
<code class="u-example-code">
<!-- escaped code here -->
</code>
</pre>
</div>
</div>
</div>
Carousel
Carousels can be used with either a fade transition or a slide transition. They can contain bullet navigation, arrow navigation, thumbnail navigation. Arrow navigation can be combined with both bullet and thumbnails
<div class="c-carousel__wrapper">
<div class="c-carousel c-carousel--fader-type" data-bullet-nav>
<!-- bullet navigation -->
<ol class="c-carousel__bullet-nav">
<li class="c-carousel__bullet-nav-item c-carousel__bullet-nav-item--is-active" data-slide-index="0"></li>
<li class="c-carousel__bullet-nav-item" data-slide-index="1"></li>
<li class="c-carousel__bullet-nav-item" data-slide-index="2"></li>
</ol>
<!-- carousel slide container -->
<div class="c-carousel__slides-container">
<!-- carousel slide -->
<div class="c-carousel__slide c-carousel__slide--is-selected">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel arrow navigation -->
<a href="" class="c-carousel__arrow-nav c-carousel__arrow-nav--left" data-slide-nav="prev">
<i class="fa fa-chevron-circle-left fa-2x"></i>
</a>
<a href="" class="c-carousel__arrow-nav c-carousel__arrow-nav--right" data-slide-nav="next">
<i class="fa fa-chevron-circle-right fa-2x"></i>
</a>
</div>
</div>
</div>
<div class="c-carousel__wrapper">
<div class="c-carousel c-carousel--slider-type" data-bullet-nav>
<!-- bullet navigation -->
<ol class="c-carousel__bullet-nav">
<li class="c-carousel__bullet-nav-item c-carousel__bullet-nav-item--is-active" data-slide-index="0"></li>
<li class="c-carousel__bullet-nav-item" data-slide-index="1"></li>
<li class="c-carousel__bullet-nav-item" data-slide-index="2"></li>
<li class="c-carousel__bullet-nav-item" data-slide-index="3"></li>
</ol>
<!-- carousel slide container -->
<div class="c-carousel__slides-container">
<!-- carousel slide -->
<div class="c-carousel__slide c-carousel__slide--is-selected">
<div class="c-carousel__slide--multi-image-container">
<div class="c-carousel__slide--multi-image-container__image-wrapper">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<div class="c-carousel__slide--multi-image-container__image-wrapper">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<div class="c-carousel__slide--multi-image-container__image-wrapper">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
</div>
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel arrow navigation -->
<a href="" class="c-carousel__arrow-nav c-carousel__arrow-nav--left" data-slide-nav="prev">
<i class="fa fa-chevron-circle-left fa-2x"></i>
</a>
<a href="" class="c-carousel__arrow-nav c-carousel__arrow-nav--right" data-slide-nav="next">
<i class="fa fa-chevron-circle-right fa-2x"></i>
</a>
</div>
</div>
</div>
<div class="c-carousel__wrapper">
<div class="c-carousel c-carousel--slider-type" data-thumbnail-nav> <!-- carousel slide container -->
<div class="c-carousel__slides-container">
<!-- carousel slide -->
<div class="c-carousel__slide c-carousel__slide--is-selected">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel slide -->
<div class="c-carousel__slide">
<img class="c-carousel__image" src="path/to/image" alt="">
</div>
<!-- carousel arrow navigation -->
<a href="" class="c-carousel__arrow-nav c-carousel__arrow-nav--left" data-slide-nav="prev">
<i class="fa fa-chevron-circle-left fa-2x"></i>
</a>
<a href="" class="c-carousel__arrow-nav c-carousel__arrow-nav--right" data-slide-nav="next">
<i class="fa fa-chevron-circle-right fa-2x"></i>
</a>
</div>
<!-- thumb navigation -->
<ol class="c-carousel__thumb-nav">
<li class="c-carousel__thumb-nav-item c-carousel__thumb-nav-item--is-active" data-slide-index="0">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
<li class="c-carousel__thumb-nav-item" data-slide-index="1">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
<li class="c-carousel__thumb-nav-item" data-slide-index="2">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
<li class="c-carousel__thumb-nav-item" data-slide-index="3">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
<li class="c-carousel__thumb-nav-item" data-slide-index="4">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
<li class="c-carousel__thumb-nav-item" data-slide-index="5">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
<li class="c-carousel__thumb-nav-item" data-slide-index="6">
<img class="c-carousel__thumb-image" src="path/to/thumbnail" alt="">
</li>
</ol>
</div>
</div>
Dropdown
Dropdowns can be added to any anchor tag. The drop down list will take the width of the anchor it is associated with.
Dropdown - default
Dropdown- Item One
- Item Two
- Item Three
- Item Four
Dropdown - centered list text
Use class "c-dropdown__list--centered-list" on the dropdown list tag
Dropdown centered- Item One
- Item Two
- Item Three
- Item Four
<!-- dropdown anchor -->
<a class="c-dropdown__link" data-drop-controls="list-1">Dropdown</a>
<!-- dropdown list -->
<ul class="c-dropdown__list" data-drop-id="list-1">
<li class="c-dropdown__list-item">Item One</li>
<li class="c-dropdown__list-item">Item Two</li>
<li class="c-dropdown__list-item">Item Three</li>
<li class="c-dropdown__list-item">Item Four</li>
</ul>
Flexbox Grid
Grids allow for the effective layout of content ona web page. We use the properties of flexbox to achieve the layouts
Flexible amount of columns
Any number of cells will automatically take their required space in the grid. Add the class "o-grid-gutters" to make space between and below the grid row.
<div class="o-grid o-grid--gutters">
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
</div>
<div class="o-grid o-grid--gutters">
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
</div>
<div class="o-grid o-grid--gutters">
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
</div>
Responsive Grid
At different breakpoints we can change the width of the rows. We add the class "o-medium-grid--full" to make the columns full width on medium screens and smaller. Resize screen below to see this in action.
<div class="o-grid o-grid--gutters o-medium-grid--full">
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
<div class="o-grid__cell">
<div style="padding:20px; background-color: #ddd;"></div>
</div>
</div>
Gallery with Full-Screen Viewer
Modify the thumbnail's width and height in CSS. The viewer reveals the image as a full-page background.
<div class="c-gallery-main">
<div class="c-thumbnails-row o-grid c-gallery">
<div class="c-thumbnail c-gallery--clickable"></div>
<div class="c-thumbnail c-gallery--clickable"></div>
<div class="c-thumbnail c-gallery--clickable"></div>
<div class="c-thumbnail c-gallery--clickable"></div>
<div class="c-thumbnail c-gallery--clickable"></div>
</div>
<div class="c-gallery-viewer"></div>
</div>
Loader
Use a loader within any space to display loading in progress. It can be to show loading anything, an image, some data, etc.
Toggle Loader HereUsage
Include the following code within any block element and the loader will overlay the entire width and height of its container.
Note: Add
loader-overlay--full-pageclass to make it span the entire width of the page and also be available at any scroll length. For example, a site-wide loader.- Also Include Script
loader.json your page. - Initialize the loader using
loader.init(id);. The id should match the loader's id. - Use the following methods:
- You can show the loader using
loader.show(id); - You can hide the loader using
loader.hide(id); - You can toggle the state of the loader using
loader.toggle(id);
- You can show the loader using
<!-- Container level loader -->
<div id="myLoader" class="loader loader-overlay">
<div class="loader__load-box"></div>
</div>
<!-- Site wide loader -->
<div id="myLoader" class="loader loader-overlay loader-overlay--full-page">
<div class="loader__load-box"></div>
</div>Login Form
Eureka Login Form.
Note for the checkbox only Blink/Webkit support certain properties needed to stylize. However, checkbox will fallback "gracefully" and other browsers will display the default, unstylized version.
Login
<div class="login-container">
<h2 class="login-header">Login</h2>
<form class="login-form">
<span class="login-span-input"><label>Email</label><input class="login-email-password" type="email" required></span>
<span class="login-span-input"><label>Password</label><input class="login-email-password" type="password"></span>
<span class="login-keep-login-span"><label for="checkbox">Keep me logged in<input type="checkbox" class="eureka-checkbox login-keep-checkbox" id="checkbox"></label></span>
<a class="login-forgot-password" href="#">Forget Password?</a>
<span class="login-form-buttons-span">
<button type="button" class="c-btn login-form-register-button"><a class="login-register-link" href="#">Register</a></button>
<button type="submit" class="c-btn login-form-login-button">Login</button>
</span>
</form>
</div>
Modals
Modal components display content blocks, such as confirmation, dialog boxes, and search results. When a modal is triggered, interactions with the main page are temporarily blocked.
Basic modal
Basic Modal<div id="modal1" class="c-modal c-modal--basic">
<div class="c-modal__content">
<h3 class="c-modal__header">Basic Modal</h3>
<p class="c-modal__body">Modal content</p>
</div>
<div class="c-modal__footer">
<a href="#!" class="c-modal__close">close</a>
</div>
</div>
Full-screen modal
Full-screen Modal<div id="modal2" class="c-modal c-modal--full">
<div class="c-modal__content">
<h3 class="c-modal__header">Full-screen Modal</h3>
<p class="c-modal__body">Modal content</p>
</div>
<div class="c-modal__footer">
<a href="#!" class="c-modal__close">close</a>
</div>
</div>
Modal with fixed header and footer
Fixed Header and Footer Modal<div id="modal3" class="c-modal c-modal--fixed">
<div class="c-modal__content">
<h3 class="c-modal__header">Fixed Modal</h3>
<p class="c-modal__body">Modal content/p>
<div class="c-modal__footer">
<a href="#!" class="c-modal__close">close</a>
</div>
</div>
</div>
Dialog modal
Dialog Modal<div id="modal4" class="c-modal c-modal--dialog">
<div class="c-modal__content">
<p class="c-modal__body">Modal content</p>
</div>
<div class="c-modal__footer">
<a href="#!" class="c-modal__cancel c-modal__close">cancel</a>
<a href="#!" class="c-modal__ok c-modal__close">okay</a>
</div>
</div>
Basic Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.
Full-screen Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.
Fixed Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta. Curabitur tristique quam eu est porttitor, id tincidunt arcu molestie. Morbi volutpat est orci, eget iaculis est rhoncus id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta. Curabitur tristique quam eu est porttitor, id tincidunt arcu molestie. Morbi volutpat est orci, eget iaculis est rhoncus id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend dolor diam, nec viverra ipsum semper nec. Curabitur accumsan neque eget leo auctor egestas. Proin posuere sem ut mauris commodo, ac maximus urna commodo. Quisque eget risus eget urna efficitur elementum dignissim at tellus. Ut feugiat bibendum porta.
Basic Progress Bar
Progress bars are useful to represent the completion of a task.
<div class="c-progress">
<div class="c-progressbar__meter" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Rounded
For a rounded progress bar, include the class c-progress--rounded.
<div class="c-progress c-progress--rounded">
<div class="c-progressbar__meter" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Progress Bar with Label
Nest the progress bar within the c-progress-label div. The label is achieved by the <span> tag.
<div class="c-progress-label">
<div class="c-progress">
<div class="c-progressbar__meter" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
<span class="c-progress__label">50%</span>
</div>
</div>
</div>
Stacked Progress Bar
For a stacked effect, use the class c-progressbar__meter--stack.
<div class="c-progress c-progress--rounded">
<div class="c-progressbar__meter--stack" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="c-progressbar__meter--stack" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
<div class="c-progressbar__meter--stack" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Stacked Progress Bar with Label
The stacked progress bar may also be combined with labels by using the <span> tag.
<div class="c-progress c-progress--rounded">
<div class="c-progress-label">
<div class="c-progressbar__meter--stack" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<span class="c-progress__label">30%</span>
</div>
</div>
<div class="c-progress-label">
<div class="c-progressbar__meter--stack" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span class="c-progress__label">40%</span>
</div>
</div>
<div class="c-progress-label">
<div class="c-progressbar__meter--stack" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<span class="c-progress__label">10%</span>
</div>
</div>
</div>
Animated Progress
The animated progress bar is animated when the class .progress-animate is added via JavaScript. The class activates the @keyframes on the .c-progressbar__meter div.
<div class="c-progress-label">
<div class="c-progress c-progress--rounded">
<div class="c-progressbar__meter" data-animProgress="false" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
<span class="c-progress__label">45%</span>
</div>
</div>
</div>
Reveal
A reveal component hides a previous visible content and shows the content below when activated.
Fade out
<div class="c-reveal c-reveal--fade">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--fade">
<div class="c-reveal__visible">
<img src="" class="c-reveal__img-visible">
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
Slide away
<div class="c-reveal c-reveal--slide left">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--slide right">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--slide top">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--slide bottom">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--slide bottom outside">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--slide right outside">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
Rotate reveal
<div class="c-reveal c-reveal--rotate left-bottom">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
<div class="c-reveal c-reveal--rotate right outside">
<div class="c-reveal__visible">
<span class="c-reveal__msg">Hover on me</span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
Open-door reveal
<div class="c-reveal c-reveal--open">
<div class="c-reveal__visible">
<span class="c-reveal__door-left"></span>
<span class="c-reveal__door-right"></span>
</div>
<div class="c-reveal__hidden">
<img class="c-reveal__img-hidden" src="">
</div>
</div>
Search Bars
Eureka provides two search bar options for easy integration into your Eureka design site.
The color of the search magnify glass icon is accomplished adding a mixed-blend-mode to near-black icon.
If you change your color scheme, the icon color will change to match.
Supported in most modern browsers, but unsupported browsers will fall back to a pure black icon.
Searchbar 1
<form class="search-form">
<input class="search-input" type="text" placeholder="Search" required>
<button class="search-button" type="submit"><i class="fa fa-search search-icon"></i></button>
</form>
Search Bar 2
<form class="search-form-second">
<input class="search-input-second" type="text" placeholder="Search" required>
<button class="search-button-second" type="submit"><i class="fa fa-search search-icon-second"></i></button>
</form>
Features and considerations
Linked codebase
If you plan to change the style of the Search Bars, the second bar is intentionally linked to the first in the SCSS codebase.
This is to create some parity in the styles. Please keep this in mind if you plan to make any adjustments.
.search-button {
background-color: $primary-dark-color;
border-radius: 0.375rem;
border: transparent;
box-shadow: -0.3125rem 0 0.1875rem -0.25rem $generic-black-color;
flex-basis: 18%;
isolation: isolate;
margin-left: (-0.1875rem * $search-size-multiplier);
cursor: pointer;
&:hover {
background-color: $secondary-dark-color;
isolation: isolate;
& .search-icon {
color: $primary-dark-color;
}
}
&:active {
border: 0.125rem solid transparentize($generic-white-color, .3);
}
}
//second user clickable button
.search-button-second {
@extend .search-button;
background-color: lighten($body-bg-color, 12.5%);
border-radius: 0;
flex-basis: 16%;
margin-left: (-0.1875rem * $search-second-size-multiplier);
&:hover {
background-color: $body-bg-color;
}
}
Simple Size Change
All size calculations on the search bar are done is SCSS by using an appropriate algorithm with a single, universal variable.
This allows simple manipulation of the search bar size while maintaining aspect ratio.
If you're using SCSS and would like to change the size of either search bar, you can do this by changing:
//default for search bar 1: 1.5
$search-size-multiplier: 1.5;
//default for search bar 2: .7;
$search-second-size-multiplier: .7;
Tabs
Use Tabs to make it easy to switch between different views.
Horizontal Tabs
- Tab 1
- Tab 2
- Tab 3
- Tab 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="tabs tabs--horizontal">
<ul class="tabs__tab-container">
<li class="tabs__tab tabs__tab--active">Tab 1</li>
<li class="tabs__tab">Tab 2</li>
<li class="tabs__tab">Tab 3</li>
<li class="tabs__tab">Tab 4</li>
</ul>
<div class="tabs__pane-container">
<div class="tabs__pane tabs__pane--active"><strong>Content 1</strong></div>
<div class="tabs__pane"><strong>Content 2</strong></div>
<div class="tabs__pane"><strong>Content 3</strong></div>
<div class="tabs__pane"><strong>Content 4</strong></div>
</div>
</div>
Vertical Tabs
- Tab 1
- Tab 2
- Tab 3
- Tab 4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="tabs tabs--vertical">
<ul class="tabs__tab-container">
<li class="tabs__tab tabs__tab--active">Tab 1</li>
<li class="tabs__tab">Tab 2</li>
<li class="tabs__tab">Tab 3</li>
<li class="tabs__tab">Tab 4</li>
</ul>
<div class="tabs__pane-container">
<div class="tabs__pane tabs__pane--active"><strong>Content 1</strong></div>
<div class="tabs__pane"><strong>Content 2</strong></div>
<div class="tabs__pane"><strong>Content 3</strong></div>
<div class="tabs__pane"><strong>Content 4</strong></div>
</div>
</div>
Basic thumbnails
<div class="c-thumbnails-row o-grid">
<div class="c-thumbnail">
<img class="c-thumbnail__img" src="someImgURL" alt="">
</div>
....
</div>
The Trio
The Trio is ideal for grouping two images that are each half the height of the main image.
<div class="c-thumbnails-row o-grid">
<div class="c-thumbnail">
<img class="c-thumbnail__img" src="someImgURL" alt="">
</div>
<div class="c-thumbnail-duo">
<div class="c-thumbnail">
<img class="c-thumbnail__img" src="someImgURL" alt="">
</div>
<div class="c-thumbnail">
<img class="c-thumbnail__img" src="someImgURL" alt="">
</div>
</div>
</div>
Thumbnail with Description
Modify the align-items property or modify specific items with align-self to suit your needs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
<div class="c-thumbnails-row--desc o-grid">
<div class="c-thumbnail c-thumbnail-detail">
<div class="c-thumbnail__desc">
<img class="c-thumbnail__img" src="https://img.clipartfest.com/f64bae705abb25168c49c202263f8ed8_2014-clipartpanda-com-about-elephant-clipart-silhouette_700-494.jpeg" alt="">
<p class="c-thumbnail__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
</p>
</div>
</div>
<div class="c-thumbnail c-thumbnail-detail">
...
</div>
</div>
Tooltip
Eureka Styled Tooltip
<div class="tooltip-this-element">Hover over me
<span class="tooltip-text">Tooltip text</span>
</div>
(Innovative) Bookmarklet
Using Bookmarklet
To use bookmarklet, highlight some text (this section is the demo!). If the text is able to be bookmarked a small dialogue will pop up, giving you the option to bookmark or not. Users can also use the keyboard shortcut Shift+Control+L+M. Currently you can only bookmark text that is inside of a single HTML tag. In other words you may not select text that belongs to two different paragraphs or splits any other node like a span or header. The component will warn you if you split nodes or try and activate the bookmark without selecting any text.
Once a bookmark has been created it will show up in the small widget on the right-hand side of the screen. Each bookmark can be clicked on to quickly navigate the page to that place in the text. In addition there is a convenient "Google this bookmark" button for each list item which will initiate a Google search with the query pre-filled by the bookmark text. You may clear individual bookmarks by clicking on the close icon, or clear all current bookmarks by clicking the "Clear all" button at the bottom of the bookmark list.
Including Bookmarklet
To include Bookmarklet on a page simply add the markup contained in the codewell below somewhere in the body tag of your page and include bookmarklet.js before the closing body tag. If you don't like the default yellow, a custom highlight color can be specified by adding a valid color name or hex color value to the data-highlight-color attribute. For example: <div class="c-bookmarklet" data-highlight-color="#ff00ff">.
You can limit the scope of the bookmarklet's highlighting and bookmark creation by adding data-limit-bookmarklet to any element and the bookmarking will only be active for that element and it's children (this demo <section> tag has this added.
Bookmark this selection?
<!-- bookmarklet list here -->
<div class="c-bookmarklet" data-highlight-color="">
<i class="fa fa-bookmark fa-lg c-bookmarklet__teaser" aria-hidden="true"></i>
<h1>Bookmarks</h1>
<ol class="c-bookmaklet__bookmark-list">
</ol>
<a class="c-btn c-btn--secondary c-bookmarklet__clear-all">clear all</a>
</div>
<!-- button pop-up -->
<div class="c-bookmarklet__pop-up">
<p>Bookmark this selection?</p>
<span class="c-bookmarklet__pop-up-button--yes"><i class="fa fa-check fa-lg" aria-hidden="true"></i> Yes!</span>
<span class="c-bookmarklet__pop-up-button--no"><i class="fa fa-times fa-lg" aria-hidden="true"></i> No.</span>
<span class="c-bookmarklet__pop-up-pip"></span>
</div>
Herald Component
Inspired by the heralds of yore who conveyed a monarch's proclamation, the main attraction of The Herald is the unfurling border and the dropped message with a banner. The component features an image with a width and height of 2:1 and a place for textual content. Ideally, The Herald is useful for small listings, although any message size will fit inside The Herald component because the message length is evaluated dynamically.
To use:
Copy the markup below, then place announcements inside the c-herald__message tag beneath the image. Each unique announcement must be placed within <p> tags. Next, add the number of announcements inside c-chip__media--o. Inputting the number of announcements is recommended in case users have disabled JavaScript. Note: The number of announcements in c-chip__media--o are based on the number of <p> tags. This number is updated dynamically in the event the number of announcements was not inputted.
Include an image with the ideal size of 2:1 or a size that is near that ratio. The component's width is fluid and should scale up and down.
Accessibility: In the event a user disables JavaScript, The Herald and all content inside it will still be shown to users. There will be no animation and dynamic counting of a message's <p> tag. This is due to the nature of how the component resizes based on a unique message's offsetHeight value.
<div class="c-herald__trigger c-chip--outlined" id="c-herald__trigger">
<span class="c-chip__media--o c-herald-c-chip__media--o">5</span>
Announcements
</div>
<div class="c-herald no-js" id="c-herald">
<div class="c-herald__furled-border" id="c-herald__furled-border"></div>
<div class="c-herald__ribbon" id="c-herald__ribbon"></div>
<div class="c-herald__content" id="c-herald__content">
<div class="c-herald__message">
<div class="c-herald__img"></div>
<p>Text<a class="c-herald__anchors" href="#"></a></p>
<p>Text<a class="c-herald__anchors" href="#"></a></p>
...
</div>
</div>
</div>
(Innovative) Persona
Create a persona around your team member/page author cards.
You can add as many persona-container(s) and as many
persona(s) within them.
Try hovering over them!
<div class="persona-container">
<div class="persona">
<img class="persona__image" src="../images/guy-1.jpg">
<p class="persona__name">Virgil Hammond</p>
<p class="persona__title">Front End Developer</p>
<div class="persona__links"> <!-- Contains a single button -->
<button type="button" class="c-btn c-btn--primary persona__link">
<span class="c-btn__btn-icon persona__icon">
<i class="fa fa-globe" aria-hidden="true"></i>
</span> Portfolio
</button>
</div>
</div>
<div class="persona">
<img class="persona__image" src="../images/girl-1.png">
<p class="persona__name">Sonya Mcmakin</p>
<p class="persona__title">Full Stack Developer</p>
<ul class="persona__links"> <!-- Contains multiple icon links -->
<li class="persona__link">
<a class="persona__icon" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
</li>
<li class="persona__link">
<a class="persona__icon" href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a>
</li>
<li class="persona__link">
<a class="persona__icon" href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
(Innovative) Scrollspy
You can make a navigation list a scrollspy navigation list which will highlight the section you are at.
Any navigation list, horizontal or vertical, can be made into a scrollspy.
You can see a vertical scrollspy working here on the showcase website.
Usage
In order to make a navigation list into a scrollspy, you need to mandatorily add the following attributes to it.
- Add
data-scrollspyto let the system know that the nav list will be a scrollspy, - Add
data-nav-type="sticky"to the nav list so that it sticks within the viewport. (You may use other Sticky Nav data attributes as well, see Navigation. - Include Script
sticky-nav.js - Include Script
scrollspy-nav.js
<!-- Scrollspy Navigation -->
<nav data-scrollspy data-nav-type="sticky">
<ul class="nav">
<li class="nav__item nav__item--active"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item "><a class="nav__link" href="#">About</a></li>
<li class="nav__item "><a class="nav__link" href="#">Projects</a></li>
<li class="nav__item "><a class="nav__link" href="#">Contact</a></li>
</ul>
</nav>(Innovative) Scrollspy (Progress Style)
Create a Progress type Scrollspy on top of your page. It will tell you how much of the page has been seen through and how much is left.
This can be very useful especially for blogs where, there are long articles, as this will tell how much the article has already been read.
To see a working progress type scrollspy, click here.
Usage
In order to make create a progress type scrollspy, you need to mandatorily add the following attributes to it.
- Include the following code given below within your HTML markup. You should ideally have it
placed as the
first child of your
<body>tag. - Add
data-spy-on="main-content"to let the system know the main content ID - Wrap your entire content area inside
<div id="main-content">(note the ID, it should match the value ofdata-spy-onattribute in step 2), and - Include Script
scrollspy-progress.js
<!-- Progress Style Scrollspy -->
<div class="scrollspy c-progress c-progress--rounded" data-spy-on="main">
<div class="c-progressbar__meter progress-animate" data-animprogress="true"
role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<span class="c-progress__label"></span>
</div>
</div>
(Innovative) Single-Input Form
This single-input form shows one input field each time. Once an input is filled out correctly, click the right arrow button. The current input fades out, the next one reveals and the indicator changes. The progress indicator rolls over to the right and fades out. To go back to the previous input field, click the gray left arrow. The submission message the on the last page is customizable.
<form class="c-sif">
<div class="c-sif__input-wrap c-sif__input-wrap--last">
<span class="c-sif__submission-msg">Thank you</span>
</div>
<div class="c-sif__input-wrap c-sif-color--2">
<span class="c-sif__indicator">3/3</span>
<input class="c-sif__input" type="text" name="city" id="sif-input-city" required formnovalidate>
<label class="c-sif__label" for="sif-input-city">
<i class="fa fa-globe c-sif__icon-label" aria-hidden="true"></i> City you live in
</label>
<button type="button" class="c-sif__btn--prev">
<i class="fa fa-arrow-left c-sif__icon-prev" aria-hidden="true"></i>
</button>
<button type="submit" class="c-sif__btn--next">
<i class="fa fa-paper-plane c-sif__icon-next" aria-hidden="true"></i>
</button>
</div>
<div class="c-sif__input-wrap c-sif-color--1">
<span class="c-sif__indicator">2/3</span>
<input class="c-sif__input" type="email" name="email" id="sif-input-email" required formnovalidate>
<label class="c-sif__label" for="sif-input-email">
<i class="fa fa-envelope c-sif__icon-label" aria-hidden="true"></i> Email
</label>
<button type="button" class="c-sif__btn--prev">
<i class="fa fa-arrow-left c-sif__icon-prev" aria-hidden="true"></i>
</button>
<button type="button" class="c-sif__btn--next">
<i class="fa fa-arrow-right fa-lg c-sif__icon-next" aria-hidden="true"></i>
</button>
</div>
<div class="c-sif__input-wrap c-sif-active c-sif-color--0">
<span class="c-sif__indicator">1/3</span>
<input class="c-sif__input" type="text" name="username" id="sif-input-nm" required formnovalidate>
<label class="c-sif__label" for="sif-input-nm">
<i class="fa fa-user c-sif__icon-label" aria-hidden="true"></i> User Name
</label>
<button type="button" class="c-sif__btn--next">
<i class="fa fa-arrow-right fa-lg c-sif__icon-next" aria-hidden="true"></i>
</button>
</div>
</form>
(Innovative) Demo Component
Use this component to showcase the features of a website. Demo tooltip blocks can be added to any section of a website along with a message telling the user what that section is used for. It also allows you to set the order of the message so that they can be cycled.
<div class="c-demo">
<div class="c-tooltip-help block1" help-order="help1">
<span class="c-tooltip-help__message is-hidden">
This is the first message
<ul class="c-tooltip-help__controls">
<li><button class="c-tooltip-help__controls-prev c-tooltip-help__button u-bg-primary" title="Previous Tip"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__button u-bg-disabled" title="Close Tip"><i class="fa fa-times" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__controls-next c-tooltip-help__button u-bg-primary" title="Next Tip"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button></li>
</ul>
</span>
</div>
<div class="c-tooltip-help block3" help-order="help3">
<span class="c-tooltip-help__message is-hidden">
This is the third message
<ul class="c-tooltip-help__controls">
<li><button class="c-tooltip-help__controls-prev c-tooltip-help__button u-bg-primary" title="Previous Tip"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__button u-bg-disabled" title="Close Tip"><i class="fa fa-times" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__controls-next c-tooltip-help__button u-bg-primary" title="Next Tip"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button></li>
</ul>
</span>
</div>
<div class="c-tooltip-help block2" help-order="help2">
<span class="c-tooltip-help__message is-hidden">
This is the second message
<ul class="c-tooltip-help__controls">
<li><button class="c-tooltip-help__controls-prev c-tooltip-help__button u-bg-primary" title="Previous Tip"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__button u-bg-disabled" title="Close Tip"><i class="fa fa-times" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__controls-next c-tooltip-help__button u-bg-primary" title="Next Tip"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button></li>
</ul>
</span>
</div>
<div class="c-tooltip-help block4" help-order="help4">
<span class="c-tooltip-help__message is-hidden">
This is the fourth message This is the fourth message
<ul class="c-tooltip-help__controls">
<li><button class="c-tooltip-help__controls-prev c-tooltip-help__button u-bg-primary" title="Previous Tip"><i class="fa fa-angle-double-left" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__button u-bg-disabled" title="Close Tip"><i class="fa fa-times" aria-hidden="true"></i></button></li>
<li><button class="c-tooltip-help__controls-next c-tooltip-help__button u-bg-primary" title="Next Tip"><i class="fa fa-angle-double-right" aria-hidden="true"></i></button></li>
</ul>
</span>
</div>
</div>
(Innovative) The WTFDTM? Component
Do you know words? Do you have the best words? If you have the best words and your magnanimous personality compels you to teach your inferiors better words, then WTF Does That Mean? is for you. Don't lose your users to the sesquipedalian expressions and flourishes of your common and daily vernacular. Share your phenomenal vocabulary that you extracted from the pages of the Merriam-Webster dictionary!
To use, simply double-click on any word within text wrapped inside wtf-text-container and a tab will open up to the Merriam-Webster website. Add the markup contained in the codewell anywhere on your page and link to the wtfdtm.js file. To view your previously searched big words, hover on the book icon at the bottom of your page!
Sample Text (Double-click on any one word)
Beyond a bare, weather-worn wall, about a hundred paces from the spot where the two friends sat looking and listening as they drank their wine, was the village of the Catalans. Long ago this mysterious colony quitted Spain, and settled on the tongue of land on which it is to this day. Whence it came no one knew, and it spoke an unknown tongue. One of its chiefs, who understood Provencal, begged the commune of Marseilles to give them this bare and barren promontory, where, like the sailors of old, they had run their boats ashore. The request was granted; and three months afterwards, around the twelve or fifteen small vessels which had brought these gypsies of the sea, a small village sprang up. This village, constructed in a singular and picturesque manner, half Moorish, half Spanish, still remains, and is inhabited by descendants of the first comers, who speak the language of their fathers. For three or four centuries they have remained upon this small promontory, on which they had settled like a flight of seabirds, without mixing with the Marseillaise population, intermarrying, and preserving their original customs and the costume of their mother-country as they have preserved its language.
Our readers will follow us along the only street of this little village, and enter with us one of the houses, which is sunburned to the beautiful dead-leaf color peculiar to the buildings of the country, and within coated with whitewash, like a Spanish posada. A young and beautiful girl, with hair as black as jet, her eyes as velvety as the gazelle's, was leaning with her back against the wainscot, rubbing in her slender delicately moulded fingers a bunch of heath blossoms, the flowers of which she was picking off and strewing on the floor; her arms, bare to the elbow, brown, and modelled after those of the Arlesian Venus, moved with a kind of restless impatience, and she tapped the earth with her arched and supple foot, so as to display the pure and full shape of her well-turned leg, in its red cotton, gray and blue clocked, stocking.
<!-- To limit WTFDTM? to within a specific text block, add the following class to the container -->
<div class="wtf-text-container">
<p class="wtf-text">Text here</p>
<p class="wtf-text">Text here</p>
</div>
<div class="c-wtf">
<div class="teaser">
<i class="fa fa-book" aria-hidden="true"></i>
</div>
<h1 class="c-wtf-h1">WTF Does That Mean?</h1>
<h4>Today's Big Words</h4>
<ol class="c-wtf__list">
</ol>
<a class="c-btn c-btn--secondary c-wtf__clear-all">clear all</a>
</div>
(Innovative) Inline Note Taking
This component is created to add inline note while reading. All notes can be opened in a separate page for printing or saving.
Wrap all contents that you want to add note to in the c-inline-note class. To create a new note, select some text and use keyboard shortcut Shift+Control+0. The selected text will be underlined in blue and a note area will pop out. To close a note, click the selected text or the window other than the note area. To reopen a note, click the selected text. To delete one single note, open the note first, then click the "remove" button. Click "Clear All Notes" button to remove all. Click "Print Note" button to open all notes on a separate page.
NOTE: for now you can only add note to text that is inside of a single HTML tag. If selected text is in different tags, a warning will pop out.
Sample Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius magna mi. Mauris a tempor metus. Sed vel nisl justo. Integer ac orci tincidunt, ornare massa eu, suscipit mauris. Vestibulum ac eleifend massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras at egestas est, congue scelerisque libero. Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras venenatis lacinia est. Sed commodo, purus volutpat euismod consequat, ante sem euismod turpis, sit amet ultricies nulla sapien sed massa.
Vivamus scelerisque, arcu sollicitudin lacinia volutpat, diam urna sollicitudin mi, non imperdiet tellus dui quis urna. Nam ultricies enim id purus suscipit laoreet. Vivamus vel efficitur ex. Curabitur et maximus est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ultrices efficitur massa eget suscipit. Nunc lacinia dolor ut semper malesuada. Aliquam tellus ante, aliquam et dolor et, mollis imperdiet erat. Sed turpis nisi, lacinia nec bibendum et, porta non massa. In imperdiet molestie massa at posuere. Pellentesque ac turpis massa. Curabitur malesuada felis et lectus blandit, sit amet finibus nunc gravida. Nunc volutpat venenatis faucibus. Donec non cursus elit. Aenean bibendum ut sem eget bibendum.
Nam est massa, facilisis nec nisi in, vehicula sollicitudin nisl. Ut vitae felis in tellus pharetra ultricies at quis ante. Mauris at eros erat. Nullam aliquam libero quis sapien vehicula interdum. Nunc non dictum ex. Pellentesque arcu nunc, iaculis sed consectetur nec, suscipit eu nunc. Donec ut felis quis ante molestie maximus. Nam suscipit pretium massa hendrerit euismod. Suspendisse viverra elementum orci.
Sed ac lacus ullamcorper, porttitor purus ut, placerat ipsum. Ut hendrerit tortor sit amet lectus dictum, in luctus est posuere. Pellentesque semper magna eget nibh feugiat lobortis. Vivamus tincidunt placerat orci, non sodales est pharetra id. Suspendisse fringilla odio id feugiat semper. Nunc vulputate ligula augue. Cras mattis, est at euismod varius, tortor tellus rutrum est, sit amet congue dolor mauris eu sem. Aliquam mi quam, condimentum eu odio non, placerat efficitur diam. Quisque laoreet sollicitudin velit, vitae interdum magna. Curabitur luctus auctor mauris nec suscipit.
<!--Example code of a note-->
<span class="c-inline-note__highlight" id="hl0">
selected text
<span class="c-inline-note__note-wrap" id="nWrap0">
<textarea id="note0"></textarea>
<span class="c-inline-note__remove-btn">remove</span>
</span>
</span>
<!--Print note button-->
<button class="c-btn--primary c-btn c-inline-note__print-btn" type="button" name="button">Print Note</button>
<!--Clear all notes button-->
<button class="c-btn--primary c-btn c-inline-note__clear-btn" type="button" name="button">Clear All Notes</button>
<!--All notes are printed out in an order list-->
<div class="c-inline-note__all-notes">
<ol class="c-list c-list--ol c-inline-note__list">
<!--Notes-->
<li class="c-list__item c-list--ol__item">
<span class="c-inline-note__list-selected-txt">Selected Text</span>
: Note content
</li>
</ol>
</div>
(Innovative) dotValidator
Eureka provides several inputs with built in realtime validation.
Click here for info on the validation library.Search
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Search</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="search">
<span class="eureka-c-validation-dot"></span>
</div>
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Email</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="email">
<span class="eureka-c-validation-dot"></span>
</div>Phone Number
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Phone Number</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="tel">
<span class="eureka-c-validation-dot"></span>
</div>Generic Number
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Generic Number</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="number">
<span class="eureka-c-validation-dot"></span>
</div>Date of Birth
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Date of Birth</label>
<input data-dotValidator="true" id="dot-valid-DOB" class="eureka-c-dotValidator-input" type="date">
<span class="eureka-c-validation-dot"></span>
</div>Age
An extension of the Date of Birth input. Not user editable.
Will auto complete as soon as the user enters a date of birth and exits that input
<div class="eureka-c-dotValidator-container eureka-c-dotValidator-container-age">
<label class="eureka-c-dotValidator-label">Age</label>
<span id="eureka-c-dotValidator-age-id" class="eureka-c-dotValidator-input eureka-c-dotValidator-age-inactive" type="text"></span>
<span class="eureka-c-validation-dot"></span>
</div>Password
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Password</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="password">
<span class="eureka-c-validation-dot"></span>
</div>Username
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Username</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="text">
<span class="eureka-c-validation-dot"></span>
</div>Zipcode
<div class="eureka-c-dotValidator-container">
<label class="eureka-c-dotValidator-label">Zipcode</label>
<input data-dotValidator="true" class="eureka-c-dotValidator-input" type="text">
<span class="eureka-c-validation-dot"></span>
</div>