Layout

Structural and semantic HTML page elements.

Component	Alias	HTML element	Description
article	x-zk-article	<article>	Self-contained content block
aside	x-zk-aside	<aside>	Secondary/sidebar content
breadcrumb	x-zk-breadcrumb	<nav> + <ol>	Navigation breadcrumb trail
column	x-zk-column	<div>	Grid column with configurable base class
container	x-zk-container	<div>	Content container (.container class)
flex-item	x-zk-flex-item	<div>	Flex item
flex	x-zk-flex	<div>	Flex container
footer	x-zk-footer	<footer>	Page footer
grid-item	x-zk-grid-item	<div>	Grid cell
grid	x-zk-grid	<div>	Grid wrapper with optional column count
header	x-zk-header	<header>	Page header
loader	x-zk-loader	<div>	Loading indicator
main	x-zk-main	<main>	Main content area
nav	x-zk-nav	<nav>	Navigation landmark
pagination	x-zk-pagination	<nav> + <ul>	Page navigation
row	x-zk-row	<div>	Flex row with configurable base class
section	x-zk-section	<section>	Page section with optional container
spacer	x-zk-spacer	<div>	Pushes elements apart
sticky	x-zk-sticky	<div>	Stays in view while scrolling
tabs	x-zk-tabs	<div>	Tab navigation + panels
wrapper	x-zk-wrapper	<div>	Full-width wrapper (.wrapper class)