Accordion

Required: components.less, components.js

Basic Usage

HTML Structure

				
Accordion title

	

		
Accordion content
	

				
			

Customization

Badge

Required: components.less

Basic Usage

HTML Structure

				
20% off
				
			

Styles

Badges do not have default background colors, make sure to set one.

Variations

Small Badge

You can get a small badge by adding the c-badge--sm class to the root element:

				
20% off
				
			

Large Badge

You can get a large badge by adding the c-badge--lg class to the root element:

				
20% off
				
			

Customization

Banner

Required: components.less, components.js

Basic Usage

HTML Structure

				
Open banner

	

		

			Hi! I'm a banner!
		
 
		

			Learn more
		
		
	

				
			

Customization

Breadcrumbs

Required: components.less

Basic Usage

HTML Structure

				

	Home	
	Store

				
			

Customization

Burger

Required: components.less

Basic Usage

HTML Structure

Customization

Button

Required: components.less

Basic Usage

HTML Structure

				
Primary button
				
			

Note

Examples here use the generic <button>, but users can also apply the c-btn class to <a> elements.

JavaScript

The button will work without JavaScript, but it is recommended if you are using the c-btn--disabled class on an <a> tag to prevent the user from clicking on the link.

Variations

Loading Button

				
Loading button	
				
			

Secondary Button

You can style a button to the secondary button variant by adding the class c-btn--secondary to the <button> element:

				
Secondary button
				
			

Outlined Button

You can style a button to the outlined button variant by adding the class c-btn--outlined to the <button> element:

				
Outlined button
				
			

Link Button

You can style a button to the link button variant by adding the class c-btn--link to the <button> element:

				
Link button
				
			

FAB Button

You can style a button to the FAB button variant by adding the class c-btn--fab to the <button> element:

Small FAB Button

You can style a FAB button to the small FAB button variant by adding the class c-btn--fab--sm to the root element:

X-Small FAB Button

You can style a FAB button to the x-small FAB button variant by adding the class c-btn--fab--xs to the root element:

Disabled

To disable a button, add the disabled attribute directly to the <button>. If you are using the button with an <a> tag, add is-disabled to style the button appropriately. Disabled buttons cannot be interacted with and have no visual interaction effect.

				
Disabled Button
Disabled Outlined Button
				
			

Customization

Button Group

Required: components.less

Basic Usage

HTML Structure

				

	
		
		
All
	
	
		
		
Beds
	
	
		
		
Desks
	

				
			

Note

Can be used with radio or checkbox.

Customization

Checkbox

Required: components.less

Basic Usage

HTML Structure

				

     Checkbox
     
     


				
			

Variations

Disabled

You can disable a checkbox by adding the disabled attribute to the <input> element and c-checkbox--disabled to the root element:

				

     Disabled Checkbox
     
     


				
			

Customization

Color Swatch

Required: components.less

Basic Usage

HTML Structure

Variations

X-Small Color Swatch

You can get an x-small color swatch by adding the c-color-swatch--xs class to the root element:

Small Color Swatch

You can get a small color swatch by adding the c-color-swatch--sm class to the root element:

Large Color Swatch

You can get a large color swatch by adding the c-color-swatch--lg class to the root element:

Color Swatch (More)

You can get a "see more" color swatch by adding the c-color-swatch--more class to the root element:

Customization

360 Viewer

Required: components.less, components.js

Basic Usage

The component cycles through all img tags that are direct children of the c-360-viewer component and shows or hides the appropriate one.

HTML Structure

Customization

Divider

Required: components.less

Basic Usage

HTML Structure

				
Some content here

Some content here
				
			

Variations

X-Small Divider

You can get an x-small divider by adding the c-divider--xs class to the root element:

				
Title here

Content here
				
			

Small Divider

You can get an x-small divider by adding the c-divider--xs class to the root element:

				
Title here

Content here
				
			

Customization

Dropdown Menu

Required: components.less, components.js

Basic Usage

HTML Structure

				

	Open menu
	

		
Menu item 1
		
Menu item 2
	

				
			

Variations

Dropdown Menu on Top

You can make the menu list appear on top by adding the is-on-top class to the c-menu__list element:

				

	Open menu
	

		
Menu item on top 1
		
Menu item on top 2
	

				
			

Customization

Dropdown Select

Required: components.less, components.js

Basic Usage

HTML Structure

				

	
		Option 1
		Option 2
		Option 3
	

				
			

Variations

Large Dropdown Select

You can get a large dropdown select by adding the c-dropdown--lg class to the root element:

				

	
		Option 1
		Option 2
		Option 3
	

				
			

Fullwidth Dropdown Select

Dropdown selects have a maximum width of 320px by default. You can make dropdown selects use all the available space by adding the c-dropdown--fullwidth class to the root element:

				

	
		Option 1
		Option 2
		Option 3
	

				
			

Disabled

You can disable a dropdown select by adding the disabled attribute to the <select> element:

				

	
		Option 1
		Option 2
		Option 3
	

				
			

Customization

Gallery

Required: components.less

Basic Usage

Caption

Caption

HTML Structure

				

     
     
Caption

				
			

Styles

The hover state is set on the .c-gallery-item and adds a box shadow to .c-gallery-item__image and changes the text color of .c-gallery-item__caption.

Customization

Icons

Required: components.less

Basic Usage

HTML Structure

Variations

Outlined Fontello Icon

Fontello icons are usually reserved for simple icons that are repeated across the website. They also have the advantage of being customizable (color and outline). SVG icons should be reserved for more complex icons that have multiple colors.

Icon Using a Custom SVG

Upload your SVG to the /assets/images folder and add the SVG file name to the @icon_names list in /assets/less/components.less.

Customization

Input Group

Required: components.less, components.js

Basic Usage

HTML Structure

				

	

		
		
               Enter your email address
           
	
	Sign up

				
			

Variations

Full Width Input Group

				

	

		
		
               Enter your email address
           
	
	Sign up

				
			

Customization

Message

Required: components.less

Basic Usage

HTML Structure

				
Button
Information about the button
				
			

Variations

Text Field With Error Message

				

	
	
		Label
	

50 caracters maximum
				
			

Customization

Modal

Required: components.less, components.js

Basic Usage

HTML Structure

				
I open the modal!

	

		
I am the modal!
		And I close it
	

				
			

Styles

The attributes can be used independently from the component to add your own styles. The classes c-modal and c-modal__content are only for styling purposes and are not required for the component to work.

Customization

Multi Range

Required: components.less, components.js

Basic Usage

HTML Structure

Customization

Notification

Required: components.less

Basic Usage

HTML Structure

Variations

Bottom Right Notification

Customization

Overlay

Required: components.less

Basic Usage

To simplify the use of overlays, one has been added permanently at the bottom of the footer. To show the overlay, simply add the is-active class to it.

JavaScript Example

				
$('.c-overlay').addClass('is-active');
				
			

JavaScript

A click event on the c-overlay component has already been added and will remove the is-active class when clicked.

Variations

Overlay Below Header

				
$('.c-overlay').addClass('is-active is-below-header');
				
			

Customization

Product Grid Item

Required: components.less

Basic Usage

15% off

L-Shaped Desk with Credenza and Hutch

Free shipping

$679.99 $799.99

HTML Structure

				

	  
		15% off
		
	
	
		
		
			
			

				
			
		
	
 
	L-Shaped Desk with Credenza and Hutch
	

		Free shipping
	
	
	

		$679.99
		$799.99
	

				
			

Customization

Product Slideshow

Required: components.less, components.js, slick.js

Basic Usage

Queen Wall bed

$1233.97 $1563.99

Queen Wall bed

$1233.97 $1563.99

Queen Wall bed

$1233.97 $1563.99

Queen Wall bed

$1233.97 $1563.99

Queen Wall bed

$1233.97 $1563.99

HTML Structure

				

	

		

			
		
		

				Queen Wall bed
		   
		

		$1233.97
		$1563.99
		
	

				
			

Customization

Product Card

Required: components.less, components.js

Basic Usage

End Table

1000$ 2000$

SKU 187263

HTML Structure

				

	
	

		

			End Table
		
		

			1000$
			2000$
		
		

			

				
										
					
						
					
				
				
										
					
						
					
				
				
										
					
						
					
				
			
			

				SKU 187263
			
		
	

				
			

Variations

Small Product Card

End Table

SKU 187263-32

Add the c-product-card--sm class to the root element to get a small product card.

				

	
	

		

			End Table
		
		

			SKU 187263-32
		
	

				
			

Large Product Card

End Table

1000$ 2000$

Auva

SKU 187263

Add the c-product-card--lg class to the root element to get a large product card.

				

	
	

		

			End Table
		
		

			1000$
			2000$
		
		

			
									
				
					
				
			
			
									
				
					
				
			
			
									
				
					
				
			
		
		

			

				Auva
			
			

				SKU 187263
			
		
	

				
			

Customization

Radio

Required: components.less

Basic Usage

HTML Structure

				

	 Radio
	 
	 

 
				
			

Variations

Disabled Radio

To disable a radio button, set the disabled attribute on the <input> element. Disabled radio buttons cannot be interacted with and have no visual interaction effect.

				

	 Disabled radio
	 
	 

 
				
			

Customization

Scrollbar

Required: components.less, components.js

Basic Usage

HTML Structure

				

	

	

	

	

	...


	

		

	
	


				
			

Customization

Shoppable Images

Required: components.less, components.js, wp-rocket

Basic Usage

HTML Structure

				

	<-?php echo c_shoppable_images(); ?->

				
			

PHP

				
/**
 * Prints one or more shoppable images
 *
 * @param integer $index           Number of shoppable image to loop through and display, defaults to all
 * @param string  $start_el        Add a string before the component element
 * @param string  $end_el          Add a string after the component element
 * @param string  $component_class Add a class to the component element
 * 
 */ 
c_shoppable_images($index, $start_el, $end_el, $component_class)

// Example
echo c_shoppable_images(-1, '
', '
', 'custom-class');

// Would print

	

		...
	

				
			

Customization

Skeleton Loading

Required: components.less

Basic Usage

HTML Structure

Styles

The skeleton component uses the :empty CSS propriety to hide or show the skeleton loading animation. It will remove its fixed dimensions once the <div> gets populated so you are left with a simple wrapper.

Variations

Skeleton Loading inside a Container

Skeletons can also have relative dimensions so they can be nested inside containers with dynamic dimensions. Again, the dimensions of the skeleton container will be removed once its content is loaded.

Customization

Slider Bars

Required: components.less

Basic Usage

HTML Structure

				

	
Slide #1
	
Slide #2
	
Slide #3
	

		

			

		
		

			

		
		

			

		
	

				
			

CSS

				
.demo-slider-bars{
	&__item{
		display: none;
		&.is-active{
			display: block;
			animation: fade-in .5s ease;
		}
	}
}
				
			

Note

Never apply styling to classes with the js- prefix. They are reserved for JavaScript only.

Customization

Switch

Required: components.less

Basic Usage

HTML Structure

				

	
	
	On

				
			

Variations

Initially "On" Switch

Add the checked attribute to the c-switch__input element to toggle the switch to "on".

				

	
	
	On

				
			

Colored Switch

Add the c-switch--colored class to the root element to get a colored switch.

				

	
	
	Colored

				
			

Switch With 2 Labels

Add a second c-switch__label element before the c-switch__slider element to get a switch with a label for both states.

				

	
	Off
	
	On

				
			

Customization

Tabs

Basic Usage

HTML Structure

				

	

		
Tab #1
		
Tab #2
		
Tab #3
	
	

		
Tab #1
		
Tab #2
		
Tab #3
	
	
				
			

Customization

Timer

Required: components.less

Basic Usage

HTML Structure

Customization

Typography

Required: components.less

Basic Usage

HTML Structure

				
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Body
Body 2
Link
				
			

Variations

H2 Tag With Headline 6 Styling

You can override default HTML tags styling by adding the c-typography--VARIANT class to the root element:

				
Disguised H2
				
			

Additional Information

Never override case, font size, font weight or letter spacing. If you come across a mock-up with a text that is not in the type system, ask the designer if it is intentional or absolutely necessary. If it is, do not create a new style. Simply override the default styling to style the text accordingly.

Customization

All the following tags have a default style applied to them: <h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<p> and <a>. You can also style a tag with the following classes to override the default style when necessary (generally for SEO reasons).

Text Area

Required: components.less, components.js

Basic Usage

HTML Structure

				

	
	
		   Type your essage here
	 

				
			

Customization

Text Field

Required: components.less, components.js

Basic Usage

HTML Structure

				

	
	
		Label
	

				
			

Variations

Text Field with Floating Label

All text fields should have a floating label unless specified otherwise. You can get a floating label by adding the c-text-field--floating class to the root element:

				

	...

				
			

Fullwidth Text Field

Text fields have a maximum width of 320px by default. You can make text fields use all the available space by adding the c-text-field--fullwidth class to the root element:

				

	...

				
			

Text Field with Leading and Trailing Icons

Leading and trailing icons can be added within a text field as visual indicators as well as interaction targets. Padding and left property must be adjusted manually on the c-text-field__input and c-text-field__label elements to ensure they do not collapse with the text entered by the user (as shown here by the left-6 and px-6 classes):

				

	
		
	
	
	
		Search
	
	
		
	

				
			

Small Text Field with Helper Label

Note: it is not recommended to use c-text-field--floating with small text fields.

You can get a small text field by adding the c-text-field--sm class to the root element:

				
Depth

	
	in

				
			

Large Text Field

You can get a large text field by adding the c-text-field--lg class to the root element:

				

	
	
		Label
	

				
			

Read-only

You can make a read-only text field by adding the readonly attribute to the <input> element:

				

	
	...

				
			

Disabled

You can disable a text field by adding the disabled attribute to the <input> element:

				

	
	...

				
			

Customization

Toast

Required: components.less, components.js

Basic Usage

HTML Structure

				

	Email sent!
	

		
	

				
			

Variations

Successful toast

To show a success message, use the c-toast--success class. The “Success” label will appear automatically and will be translated based on the HTML lang attribute.

				

	Email sent!
	

		
	

				
			

Error toast

To show an error message, use the c-toast--error class. The “Error” label will appear automatically and will be translated based on the HTML lang attribute.

				

	>Email was no sent!
	

		
	

				
			

Additional Information

Toasts can either be printed on page load or updated with the is-active class to prompt the user with the desired message. Toast that were printed on page load will not automatically disappear.

Customization

Toggle

Required: components.less

Basic Usage

HTML Structure

				

	
	

		in
		cm
	

				
			

Customization

Unordered List

Required: components.less

Basic Usage

HTML Structure

				

	
Item 1
	
Item 2
	
Item 3

				
			

Additional Information

Every <ul> tag nested inside #content or .content will have this style by default, use the .c-unordered-list class to style any lists outside the main page content.

Customization