Color Palette

Primary

$hhax-primary
#2752B4

$hhax-primary-dark
#002447

Secondary & Tertiary

$hhax-secondary
#4CC1BB

$hhax-secondary-dark
#025F72

$hhax-secondary-light
#DCF1F0

$hhax-tertiary
#F47B20

Grays

$hhax-gray-900
#080808

$hhax-gray-700
#202020

$hhax-gray-500
#585858

$hhax-gray-400
#757575

$hhax-gray-300
#C0C0C0

$hhax-gray-200
#E8E8E8

$hhax-gray-100
#F8F8F8

$hhax-white
#FFFFFF

Status

$hhax-alert
#CD2027

$hhax-alert-light
#F9DEDE

$hhax-warning
#FDB81E

$hhax-warning-light
#FFF1D2

$hhax-success
#2E8540

$hhax-success-light
#E7F4E4

$hhax-info
#00B5F0

$hhax-info-light
#DEF4FC

Typography

View Code

<h1>h1. This is Heading 1 at 3rem (48px)</h1>
<h2>h2. This is Heading 2 at 2.5rem (40px)</h2>
<h3>h3. This is Heading 3 at 2rem (36px).</h3>
<h4>h4. This is Heading 4 at 1.5rem (24px).</h4>
<h5>h5. This is Heading 5 at 1.25rem (20px).</h5>
<h6>h6. This is Heading 6 at 1rem (16px)</h6>
<br/>
<p class="lead">
	This is lead text at 1.25rem (20px). 
	Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
<p>
	This is paragraph text at 1rem (16px). 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. 
	Praesent tristique magna sit amet purus gravida.
</p>
<label>This is label text at 1rem (16px) bold.</label>
<p class="hhax-label">This is read-only label text at 1rem (16px) bold.</p>
<small>This is small text at .875rem (14px).</small>
<ol>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
	<li>Ordered list item</li>
</ol>
<ul>
	<li>Unordered list item</li>
	<li>Unordered list item</li>
	<li>Unordered list item</li>
</ul>

h1. This is Heading 1 at 3rem (48px)

h2. This is Heading 2 at 2.5rem (40px)

h3. This is Heading 3 at 2rem (36px).

h4. This is Heading 4 at 1.5rem (24px).

h5. This is Heading 5 at 1.25rem (20px).

h6. This is Heading 6 at 1rem (16px)

This is lead text at 1.25rem (20px). Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

This is paragraph text at 1rem (16px). Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Praesent tristique magna sit amet purus gravida.

This is form label text at 1rem (16px) bold.

This is read-only label text at 1rem (16px) bold.

This is small text at .875rem (14px).

Ordered list item
Ordered list item
Ordered list item

Unordered list item
Unordered list item
Unordered list item

Header

View Code

<a href="#mainContent" class="show-for-sr">Skip to main content</a>
<div class="title-bar" data-responsive-toggle="hhaxNav" data-hide-for="medium">
	<button class="menu-icon" type="button" data-toggle="hhaxNav" aria-label="Menu button"></button>
	<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar stacked-for-medium hhax-navbar" id="hhaxNav">
	<div class="top-bar-left">
		<ul class="dropdown menu vertical medium-horizontal" data-dropdown-menu data-disable-hover="true" data-click-open="true">
			<li class="menu-text"><a href="index.html"><img src="images/logo_hhax-white.svg" class="hhax-logo" alt="HHAeXchange logo"></a></li>
			<li><a href="index.html">Home</a></li>
			<li class="has-submenu active">
				<a href="">Communications</a>
				<ul class="submenu menu vertical" data-submenu>
					<li><a href="message-center.html">Message Center</a></li>
					<li><a href="events.html">Events</a></li>
					<li><a href="">System Notifications</a></li>
				</ul>
			</li>
			<li><a href="member.html">Member</a></li>
			<li><a href="">Homecare Worker</a></li>
			<li><a href="">Visit</a></li>
			<li class="has-submenu">
				<a href="">Action</a>
				<ul class="submenu menu vertical" data-submenu>
					<li><a href="">Confirm Paper Duty</a></li>
					<li><a href="">Conflict Report (Summary)</a></li>
					<li><a href="">Exception Code by Provider (Summary)</a></li>
					<li><a href="pending-placement.html">Pending Placement</a></li>
				</ul>
			</li>
			<li><a href="">Billing</a></li>
			<li><a href="">Report</a></li>
			<li class="has-submenu">
				<a href="">Admin</a>
				<ul class="submenu menu vertical" data-submenu>
					<li><a href="provider.html">Provider</a></li>
					<li><a href="reference-table.html">Reference Table Management</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="top-bar-right">
		<ul class="dropdown menu vertical medium-horizontal" data-dropdown-menu data-disable-hover="true" data-click-open="true">
			<li>
				<a href=""> 
					<span class="fa-layers"> 
						<i class="fas fa-bell fa-lg" aria-hidden="true"></i> 
						<span class="fa-layers-counter hhax-counter">12</span>
					</span> 
				</a>
			</li>
			<li class="has-submenu">
				<a href="">John Doe</a>
				<ul class="submenu menu vertical" data-submenu>
					<li><a href="">Settings</a></li>
					<li><a href="login.html">Logout</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

Menu

Footer

View Code

<footer class="hhax-footer">
	<div class="grid-container fluid">
		<div class="grid-x grid-margin-x">
			<div class="cell">
				<p>© 2020 <a href="https://hhaexchange.com/">HHAeXchange</a>. All Rights Reserved.</p>
				<p>
					<a href="">Help Center</a> | 
					<a href="mailto:support@hhaexchange.com">Email Us</a> | 
					<a href="">Remote Support</a> | 
					<a href="">Live Chat</a>
				</p>
			</div>
		</div>
	</div>
</footer>

Page Header

View Code

<div class="grid-x grid-margin-x hhax-page-header">
	<div class="cell">
		<h1>Hello John Doe</h1>
	</div>
</div>
<div class="grid-x grid-margin-x hhax-container">
	<div class="cell">
		<div class="card hhax-card">
			<div class="card-section">
				<h2>Card Title</h2>
			</div>
		</div>
	</div>
</div>

<h4>Member Page Header</h4>
<div class="grid-x grid-margin-x hhax-page-header">
	<div class="cell hhax-page-header-title">
		<h1>Thomas Jefferson <span class="label success hhax-badge-inline hhax-badge-label">Active</span></h1>
	</div>
	<div class="cell medium-4 large-2">
		<p class="hhax-label"><i class="far fa-calendar-alt" aria-hidden="true"></i>&nbsp; Date of Birth</p>
		<p>04/17/1743</p>
	</div>
	<div class="cell medium-4 large-2">
		<p class="hhax-label"><i class="fas fa-venus-mars" aria-hidden="true"></i>&nbsp; Gender</p>
		<p>Male</p>
	</div>
	<div class="cell medium-4 large-2">
		<p class="hhax-label"><i class="far fa-id-badge" aria-hidden="true"></i>&nbsp; Member ID</p>
		<p>1234567</p>
	</div>
	<div class="cell medium-4 large-2">
		<p class="hhax-label"><i class="far fa-id-card" aria-hidden="true"></i>&nbsp; Admission ID</p>
		<p>87654321</p>
	</div>
	<div class="cell medium-4 large-2">
		<p class="hhax-label"><i class="far fa-file-alt" aria-hidden="true"></i>&nbsp; Contract Name</p>
		<p>Life Care Payer</p>
	</div>
	<div class="cell medium-4 large-2">
		<p class="hhax-label"><i class="far fa-user-circle" aria-hidden="true"></i>&nbsp; Service Coordinator</p>
		<p>John Doe</p>
	</div>
</div>
<div class="grid-x grid-margin-x hhax-container">
	<div class="cell">
		<div class="card hhax-card">
			<div class="card-section">
				<h2>Card Title</h2>
			</div>
		</div>
	</div>
</div>

Member Page Header

Card Title

Accordion

View Code

<ul class="accordion hhax-accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
	<li class="accordion-item is-active" data-accordion-item>
		<a href="#" class="accordion-title">Accordion title 1</a>
		<div class="accordion-content" data-tab-content>
			<h3>Here is a heading</h3>
			<p>Here is some paragraph text.</p>
		</div>
	</li>
	<li class="accordion-item" data-accordion-item>
		<a href="#" class="accordion-title">Accordion title 2</a>			
		<div class="accordion-content" data-tab-content>
			<h3>Here is another heading</h3>
			<p>Here is some more paragraph text.</p>
		</div>
	</li>
</ul>

Accordion title 1

Here is a heading

Here is some paragraph text.
Accordion title 2

Here is another heading

Here is some more paragraph text.

Alert

View Code

<h4>Error alert</h4>
<div class="callout alert hhax-alert" data-closable>
	<button class="close-button" aria-label="Close alert" type="button" data-close>
		<span aria-hidden="true">&times;</span>
	</button> 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.<br/>
	<a href="#">Action</a>
</div>

<h4>Warning alert</h4>
<div class="callout warning hhax-alert" data-closable>
	<button class="close-button" aria-label="Close alert" type="button" data-close>
		<span aria-hidden="true">&times;</span>
	</button> 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.<br/>
	<a href="#">Action</a>
</div>

<h4>Success alert</h4>
<div class="callout success hhax-alert" data-closable>
	<button class="close-button" aria-label="Close alert" type="button" data-close>
		<span aria-hidden="true">&times;</span>
	</button> 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.<br/>
	<a href="#">Action</a>
</div>

<h4>Info alert</h4>
<div class="callout info hhax-alert" data-closable>
	<button class="close-button" aria-label="Close alert" type="button" data-close>
		<span aria-hidden="true">&times;</span>
	</button> 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.<br/>
	<a href="#">Action</a>
</div>

Error alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Action

Warning alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Action

Success alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Action

Info alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Action

Badge

View Code

<span class="badge hhax-badge">A</span>
<span class="badge primary hhax-badge">B</span>
<span class="badge secondary hhax-badge">C</span>
<span class="badge alert hhax-badge">D</span>
<span class="badge warning hhax-badge">E</span>
<span class="badge success hhax-badge">F</span>
<span class="badge info hhax-badge">G</span>
<br/><br/>

<h4>Inline badge</h4>
<h5>Default badge inline <span class="badge hhax-badge hhax-badge-inline">A</span></h5>
<h5>Primary badge inline <span class="badge primary hhax-badge hhax-badge-inline">B</span></h5>
<h5>Secondary badge inline <span class="badge secondary hhax-badge hhax-badge-inline">C</span></h5>
<h5>Alert badge inline <span class="badge alert hhax-badge hhax-badge-inline">D</span></h5>
<h5>Warning badge inline <span class="badge warning hhax-badge hhax-badge-inline">E</span></h5>
<h5>Success badge inline <span class="badge success hhax-badge hhax-badge-inline">F</span></h5>
<h5>Info badge inline <span class="badge info hhax-badge hhax-badge-inline">G</span></h5>
<br/>

<h4>Badge labels</h4>
<span class="badge hhax-badge-label">Default badge label</span>
<span class="badge primary hhax-badge-label">Primary badge label</span>
<span class="badge secondary hhax-badge-label">Secondary badge label</span>
<span class="badge alert hhax-badge-label">Alert badge label</span>
<span class="badge warning hhax-badge-label">Warning badge label</span>
<span class="badge success hhax-badge-label">Success badge label</span>
<span class="badge info hhax-badge-label">Info badge label</span>
<br/><br/>

<h4>Inline badge labels</h4>
<h5>Default badge inline <span class="badge hhax-badge-label hhax-badge-inline">Default badge label</span></h5>
<h5>Primary badge inline <span class="badge primary hhax-badge-label hhax-badge-inline">Primary badge label</span></h5>
<h5>Secondary badge inline <span class="badge secondary hhax-badge-label hhax-badge-inline">Secondary badge label</span></h5>
<h5>Alert badge inline <span class="badge alert hhax-badge-label hhax-badge-inline">Alert badge label</span></h5>
<h5>Warning badge inline <span class="badge warning hhax-badge-label hhax-badge-inline">Warning badge label</span></h5>
<h5>Success badge inline <span class="badge success hhax-badge-label hhax-badge-inline">Success badge label</span></h5>
<h5>Info badge inline <span class="badge info hhax-badge-label hhax-badge-inline">Info badge label</span></h5>

A B C D E F G

Inline badge

Default badge inline A

Primary badge inline B

Secondary badge inline C

Alert badge inline D

Warning badge inline E

Success badge inline F

Info badge inline G

Badge labels

Default badge label Primary badge label Secondary badge label Alert badge label Warning badge label Success badge label Info badge label

Inline badge labels

Default badge inline Default badge label

Primary badge inline Primary badge label

Secondary badge inline Secondary badge label

Alert badge inline Alert badge label

Warning badge inline Warning badge label

Success badge inline Success badge label

Info badge inline Info badge label

Breadcrumb

View Code

<nav aria-label="You are here:" role="navigation">
	<ul class="breadcrumbs">
		<li><a href="">Home</a></li>
		<li><a href="">Features</a></li>
		<li><span class="show-for-sr">Current: </span> Cloning</li>
	</ul>
</nav>

Button & Link

View Code

<h4>Button styles</h4>
<button class="button primary">Primary Button</button>
<button class="button secondary">Secondary Button</button>
<button class="button alert">Alert Button</button>
<button class="button success">Success Button</button>
<button class="button hollow">Hollow Button</button>
<button class="button clear">Clear Button</button>

<h4>Button sizes</h4>
<button class="button primary small">Small Button</button>
<button class="button primary">Medium Button</button>
<button class="button primary large">Large Button</button>

<h4>Button dropdown</h4>
<div class="hhax-dropdown">
	<button class="button hollow dropdown" type="button" data-toggle="exampleButtonDropdown1">Button Dropdown</button>
	<div class="dropdown-pane" id="exampleButtonDropdown1" data-dropdown>
		<ul class="vertical menu">
			<li><a href="">Option 1</a></li>
			<li><a href="">Option 2</a></li>
			<li><a href="">Option 3</a></li>
		</ul>
	</div>
</div>
<div class="hhax-dropdown">
	<button class="button clear dropdown hhax-link" type="button" data-toggle="exampleButtonDropdown2">Button Dropdown</button>
	<div class="dropdown-pane" id="exampleButtonDropdown2" data-dropdown>
		<ul class="vertical menu">
			<li><a href="">Option 1</a></li>
			<li><a href="">Option 2</a></li>
			<li><a href="">Option 3</a></li>
		</ul>
	</div>
</div>
<br/>

<h4>Button group</h4>
<div class="button-group">
	<button class="button primary">Primary Action</button> <button class="button clear">Secondary Action</button>
</div>

<h4>Button dropdown with icon</h4>
<div class="hhax-dropdown">
	<button class="button clear hhax-link" type="button" data-toggle="exampleButtonDropdown3">
		<i class="fas fa-ellipsis-h" aria-hidden="true"></i> <span class="show-for-sr">Actions</span>
	</button>
	<div class="dropdown-pane" id="exampleButtonDropdown3" data-dropdown>
		<ul class="vertical menu">
			<li><a href="">Option 1</a></li>
			<li><a href="">Option 2</a></li>
			<li><a href="">Option 3</a></li>
		</ul>
	</div>
</div>
<br/>

<h4>Link styles</h4>
<a href="">Hyperlink</a><br/>
<button class="hhax-link">Button styled as hyperlink</button>

Button styles

Button sizes

Button dropdown

Button dropdown with icon

Button group

Link styles

Hyperlink

Card

View Code

<div class="card hhax-card">
	<div class="card-section">
		<h2>This is a card heading</h2>
		<h3>This is a subheading</h3>
		<p>Here is some paragraph text.</p>

		<h3>This is another subheading</h3>
		<p>Here is some paragraph text.</p>
	</div>
</div>

<div class="card hhax-card">
	<div class="card-section">
		<h2>This is a card heading</h2>
		<div class="hhax-card-alt">
			<h3>This is an alternative card style</h3>
			<p>Here is some paragraph text.</p>
		</div>
	</div>
</div>

This is a card heading

This is a subheading

Here is some paragraph text.

This is another subheading

Here is some paragraph text.

This is a card heading

This is an alternative card style

Here is some paragraph text.

Modal

View Code

<button class="button primary" data-open="exampleModal">Open Modal</button>

<div class="reveal small hhax-modal" id="exampleModal" data-reveal>
	<h1>Modal Title</h1>
	<button class="close-button" data-close aria-label="Close modal" type="button">
		<span aria-hidden="true">&times;</span>
	</button>
	<p>This is some paragraph text.</p>
	<div class="grid-x grid-margin-x hhax-modal-footer">
		<div class="cell">
			<div class="button-group float-right">
				<button class="button clear" data-close>Cancel</button>
				<button class="button primary" data-close>Primary Action</button>
			</div>
		</div>
	</div>
</div>

Pagination

View Code

<nav class="hhax-pagination" aria-label="Pagination">
	<ul class="pagination">
		<li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
		<li class="current"><span class="show-for-sr">You're on page</span> 1</li>
		<li><a href="#" aria-label="Page 2">2</a></li>
		<li><a href="#" aria-label="Page 3">3</a></li>
		<li><a href="#" aria-label="Page 4">4</a></li>
		<li class="ellipsis" aria-hidden="true"></li>
		<li><a href="#" aria-label="Page 12">12</a></li>
		<li><a href="#" aria-label="Page 13">13</a></li>
		<li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
	</ul>
</nav>

Show/Hide

View Code

<ul class="accordion hhax-show-hide" data-accordion data-allow-all-closed="true">
	<li class="accordion-item" data-accordion-item>
		<a href="#" class="accordion-title">Show/Hide Label</a>
		  <div class="accordion-content" data-tab-content>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. 
				Praesent tristique magna sit amet purus gravida.
			</p>
		</div>
	</li>
</ul>

Show/Hide Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Praesent tristique magna sit amet purus gravida.

Spinner

View Code

<i class="fas fa-spinner fa-spin hhax-spinner" aria-hidden="true"></i>
<p class="show-for-sr">Loading...</p>

Stat

View Code

<div class="grid-x grid-margin-x">
	<div class="cell large-10">
		<div class="card hhax-card">
			<div class="card-section">
				<h2>Card Title</h2>
				<div class="grid-x grid-margin-x">
					<div class="cell medium-6 large-3 hhax-stat hhax-stat-horizontal">
						<div class="grid-x grid-margin-x">
						  <div class="cell small-4">
							<div class="hhax-stat-icon info">
							  <i class="fas fa-envelope-open" aria-hidden="true"></i>
							</div>
						  </div>
						  <div class="cell small-8">
							<p class="hhax-label">Stat Label 1</p>
							<p class="hhax-stat-num"><a href=""><span class="show-for-sr">Stat Label 1:</span>12</a></p>
						  </div>
						</div>
					</div>
					<div class="cell medium-6 large-3 hhax-stat hhax-stat-horizontal">
					  <div class="grid-x grid-margin-x">
						<div class="cell small-4">
						  <div class="hhax-stat-icon alert">
							<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
						  </div>
						</div>
						<div class="cell small-8">
						  <p class="hhax-label">Stat Label 2</p>
						  <p class="hhax-stat-num"><a href=""><span class="show-for-sr">Stat Label 2:</span>34</a></p>
						</div>
					  </div>
					</div>
					<div class="cell medium-6 large-3 hhax-stat hhax-stat-horizontal">
					  <div class="grid-x grid-margin-x">
						<div class="cell small-4">
						  <div class="hhax-stat-icon warning">
							<i class="fas fa-calendar-plus" aria-hidden="true"></i>
						  </div>
						</div>
						<div class="cell small-8">
						  <p class="hhax-label">Stat Label 3</p>
						  <p class="hhax-stat-num"><a href=""><span class="show-for-sr">Stat Label 3:</span>56</a></p>
						</div>
					  </div>
					</div>
					<div class="cell medium-6 large-3 hhax-stat hhax-stat-horizontal">
					  <div class="grid-x grid-margin-x">
						<div class="cell small-4">
						  <div class="hhax-stat-icon success">
							<i class="fas fa-check-circle" aria-hidden="true"></i>
						  </div>
						</div>
						<div class="cell small-8">
						  <p class="hhax-label">Stat Label 4</p>
						  <p class="hhax-stat-num"><a href=""><span class="show-for-sr">Stat Label 4:</span>78</a></p>
						</div>
					  </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<br/>

<h4>Vertical Stat</h4>
<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-3">
		<div class="card hhax-card">
			<div class="card-section">
			  <h2>Card Title</h2>
			  <div class="grid-x grid-margin-x hhax-stat hhax-stat-vertical">
				<div class="cell small-9">
				  <p class="hhax-label"><i class="fas fa-bell" aria-hidden="true"></i>&nbsp; Stat Label 1</p>
				</div>
				<div class="cell small-3">
				  <p class="hhax-stat-num"><a href=""><span class="show-for-sr">Stat Label 1:</span>12</a></p>
				</div>
			  </div>
			  <div class="grid-x grid-margin-x hhax-stat hhax-stat-vertical">
				<div class="cell small-9">
				  <p class="hhax-label"><i class="fas fa-exclamation-circle" aria-hidden="true"></i>&nbsp; Stat Label 2</p>
				</div>
				<div class="cell small-3">
				  <p class="hhax-stat-num"><a href=""><span class="show-for-sr">Stat Label 2:</span>34</a></p>
				</div>
			  </div>
			  <div class="grid-x grid-margin-x hhax-stat hhax-stat-vertical">
				<div class="cell">
				  <a href="">View All &nbsp;<i class="fas fa-arrow-right" aria-hidden="true"></i></a>
				</div>
			  </div>
			</div>
		</div>
	</div>
</div>

Card Title

Stat Label 1

Stat Label 2

Stat Label 3

Stat Label 4

Vertical Stat

Card Title

Stat Label 1

Stat Label 1:12

Stat Label 2

Stat Label 2:34

View All

Table

View Code

<div class="table-scroll">
	<table class="hhax-table">
		<caption class="show-for-sr">Table Title</caption>
		<thead>
			<tr>
				<th>Table Header 1</th>
				<th class="hhax-sortable">Table Header 2</th>
				<th class="hhax-sortable">Table Header 3</th>
				<th>Table Header 4</th>
				<th>Actions</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Table cell</td>
				<td>Table cell</td>
				<td>Table cell</td>
				<td>Table cell</td>
				<td><a href="">View</a></td>
			</tr>
			<tr>
				<td>Table cell</td>
				<td>Table cell</td>
				<td>Table cell</td>
				<td>Table cell</td>
				<td><a href="">View</a></td>
			</tr>
			<tr>
				<td>Table cell</td>
				<td>Table cell</td>
				<td>Table cell</td>
				<td>Table cell</td>
				<td><a href="">View</a></td>
			</tr>
		</tbody>
	</table>
</div>

Table Title
Table Header 1	Table Header 2	Table Header 3	Table Header 4	Actions
Table cell	Table cell	Table cell	Table cell	View
Table cell	Table cell	Table cell	Table cell	View
Table cell	Table cell	Table cell	Table cell	View

Tabs

View Code

<ul class="tabs hhax-tabs" data-tabs id="exampleTabs">
	<li class="tabs-title is-active"><a href="#tab1" aria-selected="true">Tab 1</a></li>
	<li class="tabs-title"><a data-tabs-target="tab2" href="#tab2">Tab 2</a></li>
</ul>
<div class="tabs-content hhax-tabs-content" data-tabs-content="exampleTabs">
	<div class="tabs-panel is-active" id="tab1">
		<div class="hhax-tabs-section">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. 
				Praesent tristique magna sit amet purus gravida.
			</p>
		</div>
	</div>
	<div class="tabs-panel" id="tab2">
		<div class="hhax-tabs-section">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				Magna ac placerat vestibulum lectus mauris ultrices.
			</p>
		</div>
	</div>
</div>

<h4>Tabs in Card</h4>
<div class="card hhax-card">
	<ul class="tabs hhax-tabs" data-tabs id="cardExampleTabs">
		<li class="tabs-title is-active"><a href="#cardTab1" aria-selected="true">Tab 1</a></li>
		<li class="tabs-title"><a data-tabs-target="cardTab2" href="#cardTab2">Tab 2</a></li>
	</ul>
	<div class="tabs-content hhax-tabs-content" data-tabs-content="cardExampleTabs">
		<div class="tabs-panel is-active" id="cardTab1">
			<div class="card-section">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. 
					Praesent tristique magna sit amet purus gravida.
				</p>
			</div>
		</div>
		<div class="tabs-panel" id="cardTab2">
			<div class="card-section">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
					Magna ac placerat vestibulum lectus mauris ultrices.
				</p>
			</div>
		</div>
	</div>
</div>

Tab 1
Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Praesent tristique magna sit amet purus gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna ac placerat vestibulum lectus mauris ultrices.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna ac placerat vestibulum lectus mauris ultrices. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Praesent tristique magna sit amet purus gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna ac placerat vestibulum lectus mauris ultrices.

Tooltip

View Code

<p>
	This is a tooltip example 
	<span data-tooltip class="top hhax-tooltip" tabindex="2" title="Tooltip example">
		<i class="fas fa-info-circle" aria-hidden="true"></i>
	</span>
</p>

This is a tooltip example

Checkbox

View Code

<fieldset>
	<legend class="show-for-sr">Example checkbox list</legend>				
	<div class="hhax-check">
		<label for="exampleCheck1">
			<input type="checkbox" id="exampleCheck1" value="1" checked>
			<span class="hhax-checkmark"><i class="fas fa-check" aria-hidden="true"></i></span>
			Example checkbox 1
		</label>
	</div>
	<div class="hhax-check">
		<label for="exampleCheck2">
			<input type="checkbox" id="exampleCheck2" value="2">
			<span class="hhax-checkmark"><i class="fas fa-check" aria-hidden="true"></i></span>
			Example checkbox 2
		</label>
	</div>
	<div class="hhax-check">
		<label for="exampleCheck3">
			<input type="checkbox" id="exampleCheck3" value="3" disabled>
			<span class="hhax-checkmark"><i class="fas fa-check" aria-hidden="true"></i></span>
			Example checkbox 3
		</label>
	</div>
</fieldset>

Example checkbox 1

Example checkbox 2

Example checkbox 3

Date

View Code

<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-3">
		<label for="exampleDate">Date Label <span class="hhax-required">*</span></label>
		<input type="date" id="exampleDate"/>
	</div>
</div>
<h4 class="hhax-mt">Date Range</h4>
<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-3">
		<label for="fromDate">From Date</label>
		<input type="date" id="fromDate"/>
	</div>
	<div class="cell medium-6 large-3">
		<label for="toDate">To Date</label>
		<input type="date" id="toDate"/>
	</div>
</div>

Date Label *

Date Range

From Date

To Date

File Upload

View Code

<div class="hhax-file-upload">
	<label for="exampleFileUpload" class="button primary">Upload File</label>
	<input type="file" id="exampleFileUpload" class="show-for-sr" aria-describedby="fileUploadHint">
	<p class="hhax-hint-text" id="fileUploadHint">File size must not exceed 1MB. Acceptable file types: xls, pdf, txt, jpg, png doc, docx, xlsx, jpeg, gif.</p>
</div>

Upload File

File size must not exceed 1MB. Acceptable file types: xls, pdf, txt, jpg, png doc, docx, xlsx, jpeg, gif.

Input

View Code

<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-3">
		<label for="exampleInput">Input Label <span class="hhax-required">*</span></label>
		<input type="text" id="exampleInput" aria-describedby="exampleInputHint"/>
		<p class="hhax-hint-text" id="exampleInputHint">Hint text</p>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleInputDisabled">Disabled Input Label</label>
		<input type="text" id="exampleInputDisabled" disabled/>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleInputError">Errored Input Label</label>
		<input type="text" id="exampleInputError" class="hhax-form-error"/>
		<p class="hhax-form-error-text">Error message</p>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleInputGroup">Input Group Label</label>
		<div class="input-group">
			<input class="input-group-field" id="exampleInputGroup" type="text"/>
			<span class="input-group-label">Label</span>
		</div>
	</div>
</div>

Input Label *

Hint text

Disabled Input Label

Errored Input Label

Error message

Input Group Label

Label

Radio Button

View Code

<fieldset>
	<legend class="show-for-sr">Example radio button list</legend>
	<div class="hhax-radio">		
		<label id="exampleRadio1">
			<input type="radio" id="exampleRadio1" name="exampleRadioButton" value="1">
			<span class="hhax-radio-button"></span>
			Example radio button 1
		</label>
	</div>
	<div class="hhax-radio">
		<label for="exampleRadio2">
			<input type="radio" id="exampleRadio2" name="exampleRadioButton" value="2">
			<span class="hhax-radio-button"></span>
			Example radio button 2
		</label>
	</div>
	<div class="hhax-radio">
		<label for="exampleRadio3">
			<input type="radio" id="exampleRadio3" name="exampleRadioButton" value="3">
			<span class="hhax-radio-button"></span>
			Example radio button 3
		</label>
	</div>
</fieldset>

Example radio button 1

Example radio button 2

Example radio button 3

Select

View Code

<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-3">
		<label for="exampleSelect">Select Label <span class="hhax-required">*</span></label>
		<select id="exampleSelect" aria-describedby="exampleSelectHint">
			<option></option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</select>
		<p class="hhax-hint-text" id="exampleSelectHint">Hint text</p>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleSelectDisabled">Disabled Select Label</label>
		<select id="exampleSelectDisabled" disabled>
			<option></option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</select>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleSelectErrored">Errored Select Label</label>
		<select id="exampleSelectErrored" class="hhax-form-error">
			<option></option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
		</select>
		<p class="hhax-form-error-text">Error message</p>
	</div>
</div>

Select Label *

Hint text

Disabled Select Label

Errored Select Label

Error message

Textarea

View Code

<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-3">
		<label for="exampleTextarea">Textarea Label <span class="hhax-required">*</span></label>
		<textarea id="exampleTextarea" aria-describedby="exampleTextareaHint"></textarea>
		<p class="hhax-hint-text" id="exampleTextareaHint">Hint text</p>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleTextareaDisabled">Disabled Textarea Label</label>
		<textarea id="exampleTextareaDisabled" disabled></textarea>
	</div>
	<div class="cell medium-6 large-3">
		<label for="exampleTextareaErrored">Errored Textarea Label</label>
		<textarea id="exampleTextareaErrored" class="hhax-form-error"></textarea>
		<p class="hhax-form-error-text">Error message</p>
	</div>
</div>

Textarea Label *

Hint text

Disabled Textarea Label

Errored Textarea Label

Error message

Design System

Styles

Color Palette

Primary

Secondary & Tertiary

Grays

Status

Typography

h1. This is Heading 1 at 3rem (48px)

h2. This is Heading 2 at 2.5rem (40px)

h3. This is Heading 3 at 2rem (36px).

h4. This is Heading 4 at 1.5rem (24px).

h5. This is Heading 5 at 1.25rem (20px).

h6. This is Heading 6 at 1rem (16px)

Layout

Header

Footer

Page Header

Hello John Doe

Card Title

Member Page Header

Thomas Jefferson Active

Card Title

Components

Accordion

Here is a heading

Here is another heading

Alert

Error alert

Warning alert

Success alert

Info alert

Badge

Inline badge

Default badge inline A

Primary badge inline B

Secondary badge inline C

Alert badge inline D

Warning badge inline E

Success badge inline F

Info badge inline G

Badge labels

Inline badge labels

Default badge inline Default badge label

Primary badge inline Primary badge label

Secondary badge inline Secondary badge label

Alert badge inline Alert badge label

Warning badge inline Warning badge label

Success badge inline Success badge label

Info badge inline Info badge label

Breadcrumb

Button & Link

Button styles

Button sizes

Button dropdown

Button dropdown with icon

Button group

Link styles

Card

This is a card heading

This is a subheading

This is another subheading

This is a card heading

This is an alternative card style

Modal

Modal Title

Pagination

Show/Hide

Spinner

Stat

Card Title

Vertical Stat

Card Title

Table

Tabs

Tabs in Card

Tooltip

Form Elements

Checkbox

Date