Layout Configuration

Air UI HTML Admin Template layout configuration overview

The template has a "core" component with a set of global settings (src\components\core\css\layout.scss), which are activated by adding certain classes to the body tag:

Class

AppliesTo

By default used for

.air__layout--fixedHeader

body

Fixed header

.air__layout--squaredBorders

body

Squared card borders

.air__layout--appMaxWidth

body

Boxed app style

.air__layout--contentNoMaxWidth

body

Full width content area

.air__layout--borderless

body

Cards without borders

.air__layout--grayBackground

body

Gray background

.air__layout--grayTopbar

body

Topbar & Subbar gray background

.air__layout--cardsShadow

body

Cards shadow

  • These settings may affect the components connected to the template. Information on any impact of a particular global setting on the component is located in the description of this component;

Example

This will configure the compact gray menu and gray background of the content area and topbar:

<body class="air__layout--grayBackground air__layout--grayTopbar air__menu--compact air__menu--blue">