elements

 website template

CLASSES: THE ELEMENTS OF ELEMENTS

Elements comes with its own mini framework, allowing you to build upon the standard template as you see fit. Almost everything runs on classes here, so if you'd like to mix and match elements with your favourite CSS or JS framework, it should be a breeze!

Take a look below to browse the selection of standard components contained within elements.css

containers - the most basic of the elements

.elements-article

A container for long blocks of content. Text/Copy is styled, and spaced appropriately, but the container itself is invisible to the end user. Buttons and links can be styled by dropping them in .elements-article-toolbox.

.elements-home-article

An animated container designed to work well on your landing page, portfolio, or anywhere you need fancy categories or links with minimalistic copy and styling. You may optionally include an image to add style and colour (it will be heavily blurred, by design). A single anchor or button element, using the class .elemental-actor, may be included to provide an action to your component.

.elements-article-toolbox. is not supported here by default. You may purchase "elements-increased" to add this functionality.

.elements-card

A container for short-form information. For example, this very card. Useful for article excerpts. Automatically stretches within .elements-section and any other container using display: flex Buttons and links can be styled by dropping them in .elements-card-toolbox.

.elements-section

A general "meta-container", visually unstyled, but perfect for controlling the layout of other containers. Provides adequate spacing and automatically arranges other elements within itself at different screen sizes.

Navs - it's how we get around

.elements-nav

.elements-sub-nav