Section Head

The opening of a section: a hairline rule, a mark sitting on its left end, the title, and the line that says what follows. Everything starts at one edge - centred body copy moves its own left edge with every line break, so the eye has to find the start of each line instead of jumping to a fixed position. Fine for a heading, tiring from the third line on.

Grid System

MaverickWave CSS framework provides a simple grid system that adapts to different screen sizes, making responsive layouts simple to implement. It also has an advanced grid system with custom column spans. Perfect for complex layouts that need different column widths. Automatically stacks to single column on mobile devices.

Grid with 1 Column

Grid with 2 Columns

Grid with 3 Columns

Grid with 4 Columns

Grid with 5 Columns

Flexible Grid with Column Spans

12-column grid with custom spans: 2 columns + 4 columns + 1 column

Mixed Column Spans

Various column combinations: 3 + 6 + 3 columns

Asymmetric Layout

Sidebar + content layout: 4 + 8 columns

Auto Grid (Responsive Card Layout)

Perfect for unknown number of items. Cards maintain minimum 300px width and automatically wrap to new rows. Great for product listings, galleries, or any dynamic content.

Grid with 3 Columns - Default Spacing

Grid with 3 Columns - Large Spacing

Flexible Grid - Default Spacing

Flexible Grid - Large Spacing

Auto Grid - Large Spacing

Grid Stack - Natural Width (Left Aligned)

Grid Stack - Centered

Grid Stack - Right Aligned

Grid Stack - Full Width (Same as Grid-1)

Grid Stack - Large Spacing & Centered

Bento Grid

Tiles of different sizes on one row rhythm - the layout a services page or a dashboard reaches for when a plain grid makes every item look equally important. One column on a phone, two from sm, four from lg. mw-bento-wide spans two columns, -tall two rows, -lg both and -full the whole row. Spans only start with the second column, so a phone gets a plain stack at content height. The grid packs dense, which can move a later tile into an earlier gap - keep the tile order the reading order.

Services of a craftsman

Roof renovation

Tiles, insulation and gutters from one hand - with a fixed price before the first ladder goes up.

From 4 weeks lead time Request a quote

Solar

Mounting, wiring and the paperwork.

Repairs

Storm damage fixed within 48 hours.

Gutters

Cleaning plans twice a year.

Since 1998

Master craftsman, guild member, insured

Three generations on the roofs of the region - every job done by our own team, never subcontracted.

Emergency

0123 456789

Service area

30 km around the workshop.

Dashboard

mw-bento-compact drops the row rhythm to 7rem for a row of figures. Any other height goes into --mw-bento-row, on the grid or on anything above it.

App Shell

The frame of an application rather than a page: a sidebar beside a column that scrolls on its own under a sticky top bar. From lg the sidebar is docked and the toggle folds it to an icon rail with mw-app-collapsed; below that it is a panel over the content, opened with mw-app-sidebar-open. The framework script sets both from a button carrying data-mw-app-toggle - an Angular app can bind the two classes itself.

mw-app-aside is the third column for an inspector, an assistant or a game's inventory: docked beside the content from xl, a panel over it below, toggled by data-mw-app-aside-toggle. On a phone mw-app-tabbar takes the main destinations to the bottom edge. data-mw-app-persist="name" remembers the rail and the docked aside across reloads - try it here.

<div class="mw-app" data-mw-app-persist="crm">
  <aside class="mw-app-sidebar" id="nav">
    <a class="mw-app-brand" href="/"><img src="logo.svg" alt="" /><span class="mw-app-label">Acme</span></a>
    <nav class="mw-app-nav">
      <p class="mw-app-nav-title">Workspace</p>
      <a class="mw-app-nav-link mw-tooltip-inline-end" href="/" aria-current="page" data-tooltip="Dashboard">
        <i class="fas fa-gauge"></i><span class="mw-app-label">Dashboard</span>
      </a>
    </nav>
    <div class="mw-app-sidebar-footer">...</div>
  </aside>
  <div class="mw-app-main">
    <header class="mw-app-topbar">
      <button class="mw-app-toggle" data-mw-app-toggle aria-controls="nav" aria-label="Navigation">
        <span class="mw-app-toggle-icon"></span>
      </button>
      <h1 class="mw-app-title">Dashboard</h1>
      <div class="mw-app-actions">...</div>
    </header>
    <main class="mw-app-content">...</main>
  </div>
  <aside class="mw-app-aside" id="details">
    <div class="mw-app-aside-header"><h2>Details</h2><button class="mw-app-toggle" data-mw-app-aside-toggle aria-label="Close">&#x2715;</button></div>
    <div class="mw-app-aside-body">...</div>
  </aside>
  <nav class="mw-app-tabbar" aria-label="Primary">
    <a class="mw-app-tabbar-item" href="/" aria-current="page"><i class="fas fa-gauge"></i><span class="mw-app-label">Dashboard</span></a>
  </nav>
</div>

Footer

The page footer at the bottom of this site is the full shape: columns, social links, a note and the copyright. Three pieces make it fit everything else. mw-footer-bottom puts the copyright at one end and mw-footer-links at the other - the imprint and the privacy policy a German site has to link from every page - and stacks both, centred, on a phone. mw-footer-dark turns the footer into the dark bookend of the header bar, and mw-footer-compact is the bar alone, the footer an application puts under its content.

Homepage, dark

Application, compact

<footer class="mw-footer">
  <div class="mw-container">
    <div class="mw-footer-top">...columns...</div>
    <div class="mw-footer-bottom">
      <p class="mw-copyright">&copy; 2026 Bäckerei Brandt</p>
      <ul class="mw-footer-links">
        <li><a href="/impressum">Imprint</a></li>
        <li><a href="/datenschutz">Privacy</a></li>
      </ul>
    </div>
  </div>
</footer>

<!-- In an app: last in .mw-app-main, without a container -->
<footer class="mw-footer mw-footer-compact">
  <div class="mw-footer-bottom">...</div>
</footer>

Cards

The framework's main container: a surface, padding, an optional image, a header and a footer. The add-ons - badge, ribbon, title icon - all take their colour from one mw-card-addon-* class on the card itself.

Standard Cards

Featured Article

---

This is the subtitle of this card in secondary text color

Cards are versatile containers for displaying related content and actions. This example shows an image card with a title and descriptive text.

Read Article

Project Update

---

A simple card without an image works well for text-focused content. Use cards to organize information into digestible sections with clear visual hierarchy.

View Details Last updated: 2025-04-12

Development Stack

---

Cards can include various components like tags to categorize content. This example shows how to display technologies used in a project.

HTML CSS JavaScript

Cards with Title Icon

Tech-Stack Cards

Large Cards

If you have a image and want to display the entire image, replace the standard mw-card-img class with mw-card-img-contain in your card markup. This alternative style ensures the complete image is visible while maintaining centering and proportions. (See the first large and the second extra large card)

Besides mw-card-lg and mw-card-xl you can set any image height yourself with the --mw-card-img-height custom property on the card.

Large Card

---

Large cards feature taller images (340px height) that work well for portrait-oriented photos or when you want to showcase more of your visual content.

View Gallery 12 Photos

Team Member

---

Large cards are perfect for team profiles, product features, or any content where the image deserves more prominence in your layout.

Design UX Research Prototyping

Extra Large Cards

Here you can see the difference in portrait images between the standard mw-card-img class on the first image and mw-card-img-contain class on the second image.

Featured Profile

---

This is the subtitle of this card in secondary text color

Extra large cards with 480px image height are ideal for portrait photography, profile spotlights, or when the visual element is the primary focus of your content.

View Profile

Artist Spotlight

The extra large card format creates a dramatic visual impact, making it perfect for highlighting key people, products, or artistic content in your application.

View Portfolio Featured Artist

Note Above the Actions

mw-actions-note puts one right-aligned, muted line above a row of actions - what the buttons apply to, why one of them is disabled, or that something cannot be taken back. It goes straight into the action row and needs no wrapper: the line takes the full width and pushes the buttons below it. It works the same way in mw-card-footer, mw-modal-footer, mw-form-actions and mw-panel-footer.

Card Variations

Card with Tags

---

Tags can be used to categorize content or show related topics.

Primary Success Danger

Learn More

Card with Avatar

---

Nadia Kern

Product Designer

Cards can include avatars to represent users or team members.

View Profile

Card with Progress

---

Include progress bars to show completion status or metrics.

Project Status 70

View Details

Additional Cards

You can also use badges or ribbons on top of a card, or wrap the one card that should stand out in a feature frame.

Badges

New

Latest Gadget

---

The one we spent two years on. It is finally ready.

Explore

Hot

Team Spotlight

---

Meet our star contributor of the month and learn their tips.

Read More

Sale

Winter Sale

---

Enjoy up to 50% off on selected items while stocks last.

Shop Now

Limited

Limited Offer

---

Only a few spots remain. Secure yours before it’s gone!

Sign Up

Ribbons

Featured

Featured Product

---

Our top pick selected by experts for quality and design.

Learn More

Info

System Update

---

A minor update will be rolled out tonight to improve performance.

Dismiss

Beta

Dashboard Beta

---

Try out our redesigned dashboard and send us your feedback.

Try It

Highlight Project

VIP Access

---

Invitation-only preview of our upcoming premium features.

Request Invite

Feature Frame

Starter

---

The basics to get going, billed monthly.

Choose

Most booked

Standard

---

Everything from Starter plus the features most people ask for.

Choose

Premium

---

The full set, with priority support on top.

Choose

The frame is primary by default, secondary and info are one class away.

Primary

Standard

---

The one most people end up picking.

Secondary

Team

---

Seats for everyone, billed per head.

Info

Trial

---

Free for 30 days, no card needed.

Panels

A card whose header and footer are part of the frame rather than the content. mw-panel-primary and mw-panel-secondary fill the header. The body scrolls on its own, which is what the max-height variants are for: mw-panel-max-height-sm, -md and -lg cap the panel at 300, 500 and 700px. mw-panel-scrollable is the older name for md.

A head with a subtitle and several actions: mw-panel-heading holds mw-panel-title and mw-panel-subtitle, mw-panel-actions the buttons. mw-panel-edge-* marks the one panel in a row that needs attention, and a compact item list in the body drops its own box.

Tabs

A tab bar scrolls sideways when it runs out of room, and now it says so: a shadow appears on whichever side still has tabs behind it, and disappears once that end is reached. Four gradients, no scroll listener. The fade colour comes from --mw-scroll-hint-cover and follows the surface - inside a card it fades into the card, on the page into the page. Seven tabs on a phone used to mean the seventh was simply never found.

Default Tabs

Vertical Tabs

<link rel="stylesheet" 
href="path/maverick-wave.min.css">

// Your styles.scss
@use 'path/to/maverick-wave/src/scss/main' with (
  $mw-theme-mode: 'switchable' // Or 'dark', 'light'
);

/* your-custom-styles.css */
:root {
  --mw-primary-color: #0f766e; 
  --mw-dark-page-background: #172127; 
  --mw-font-family-base: 'Your Custom Font', sans-serif; 
  /* ... other overrides ... */
}

// your-styles.scss
@use 'path/to/maverick-wave/src/scss/main' with (
  $primary-color: #0f766e,
  $secondary-color: #b45309
  // ... other root colors ...
);

Pills Style Tabs

Accordions

Only as much content open as anyone needs at once. The header is the control and the panel follows it in the DOM, which is what lets the whole thing run off two state classes and no wrapper element.

/* Your custom-styles.css */
  :root {
    /* Root colors - hover tones, translucent backgrounds and borders
       are derived from them at runtime via color-mix() */
    --mw-primary-color: #0f766e;
    --mw-secondary-color: #b45309;

    /* Theme colors - card, footer and border are derived from these */
    --mw-dark-page-background: #172127;
    --mw-light-page-background: #f2f6f7;

    /* Font */
    --mw-font-family-base: 'Your Custom Font', sans-serif;
  }

// Your styles.scss

  @use 'path/to/maverick-wave/src/scss/main' with (
    $primary-color: #0f766e,
    $mw-theme-mode: 'dark' // 'switchable' | 'dark' | 'light'
  );

FAQ

Questions and answers on native <details>: they open without script, the browser's find-in-page reaches a closed answer, and nothing caps a long one. open on an item shows it on arrival, a shared name keeps one answer open at a time, and a link to an item's id opens it.

Tiles

Here you can create clickable tiles with header, information and a possible image.

Basic Tiles in 3 Columns

Project Management

Organize tasks and track project progress

Collaborate with team members efficiently

Last updated: 2024-12-15

Analytics Dashboard

Real-time data visualization and insights

Track KPIs and performance metrics

Last updated: 2025-01-02

Customer Support

24/7 help desk and ticket management

Live chat and knowledge base access

Last updated: 2024-11-23

Document Management

Secure file storage and version control

Easy sharing and collaboration tools

Last updated: 2024-12-30

Billing & Invoices

Automated invoicing and payment tracking

Financial reporting and tax preparation

Last updated: 2025-01-01

User Management

Role-based access control and permissions

User authentication and security settings

Last updated: 2024-12-28

Basic Tiles with Images in 2 Columns

E-commerce Platform

Complete online store management solution

Inventory tracking and order fulfillment

Last updated: 2024-12-15

Marketing Automation

Email campaigns and lead nurturing workflows

Social media scheduling and analytics

Last updated: 2025-01-02

Small Tiles in 4 Columns

API Documentation

REST API reference guide

Code examples and tutorials

Last updated: 2025-01-01

Security Center

Two-factor authentication

Security audit logs

Last updated: 2024-12-31

Backup & Recovery

Automated daily backups

One-click data restoration

Last updated: 2024-12-29

Performance Monitor

Server uptime: 99.9%

Response time: 150ms

Last updated: 2025-01-02

Integration Hub

Connect third-party apps

Webhook configurations

Last updated: 2024-12-27

Mobile App

iOS and Android apps

Offline sync capabilities

Last updated: 2024-12-25

Training Center

Video tutorials available

Certification programs

Last updated: 2025-01-01

System Status

All systems operational

Last incident: None

Last updated: 2024-12-30

Large Tiles

Cloud Infrastructure

Scalable cloud hosting with auto-scaling capabilities and 99.99% uptime guarantee

Global CDN distribution with edge servers in 25+ locations worldwide

Last updated: 2024-12-28

Business Intelligence Suite

Advanced data analytics with machine learning insights and predictive modeling

Custom dashboards with real-time data visualization and automated reporting

Last updated: 2024-12-31

Enterprise Solutions

One platform for CRM, ERP and workflow automation

Custom integrations and dedicated support for enterprise-level requirements

Last updated: 2024-12-23

Breadcrumbs

Modern skewed navigation breadcrumbs with overlapping design.

Simple Modals

A <dialog> carrying the same mw-modal classes. Escape, the focus trap and the inert page behind it come from the element, the page scroll lock from the stylesheet - only opening it needs a line of script.

Modal Sizes

Examples

Drawers

mw-modal-drawer turns the same dialog into a full-height panel on the right edge, with mw-modal-drawer-start on the left. The body scrolls between a fixed header and footer, and on a phone it stays a side panel instead of becoming a sheet. Opened with show() instead of showModal() it sits beside the content and leaves the page usable - a copilot or a detail view.

HTML Lists

The plain ul and ol the framework styles, for prose. Anything meant to be used rather than read - selectable rows, menus - belongs in the item lists instead.

Item Lists

Rows that are meant to be used, not just read: selectable, clickable, with a sliding accent or a checkbox. For a plain bulleted list use the HTML lists above.

Leader row

A label, its value, and a dotted line connecting the two - the row a menu, a table of contents and an invoice all draw. The line is generated by the row itself, so the markup is two spans.

Label and value is what <dl> is for, and since HTML 5.2 a <div> may group a <dt> and its <dd> inside one - so the semantic version costs no extra element over the plain <p>. Put mw-leader-row on that <div> and the two classes on the <dt> and <dd>. Use it where the pair is the content; where every row also carries a description, a <p> stays simpler.

Stepper

A process with a known number of steps and a current one. Horizontal where there is width for it, vertical where the labels need the room.

Parallax

Two ways to play a picture against the scroll, both on the browser's scroll timeline - no listener, and no background-attachment: fixed, which iOS ignores. The image lives in its own mw-parallax-media layer, as an <img> or as a div with a background image. Where scroll timelines are missing, or with prefers-reduced-motion, the picture stands still and nothing else changes.

Drift - mw-parallax, the picture moves slower than the page

How far it travels is --mw-parallax-depth (10vh by default); the layer overhangs the block by exactly that much, so no edge is ever uncovered. mw-parallax-dimmed turns the picture down and the text light.

Scroll past me

The field moves slower than the page does.

Reveal - mw-parallax-sticky, the picture stays and the page rides over it

The home section of this page does it: the block pins itself to the top of the screen and everything after it slides up over the picture. It goes on whatever element the page content is a sibling of - the section around a hero, not the hero itself - because that is what sticky and the sibling selector need. Everything after it gets the page background and a layer above, or the pinned picture shows through. The section right after it also gets an upward shadow, so it reads as sliding over the picture rather than cutting it off. That one carries fixed values instead of the elevation ramp: it lands on the picture, not on a theme surface, and the light theme's shadows are cut for paper and vanish there. Pair it with mw-header-reveal on the header and the page opens on the picture alone: the bar stays away for the first 130px of scroll and has ridden in by 420px. A control marked mw-header-keep sits that ride out - it travels the bar's distance the other way and waits at the position it will hold once the bar is there, so a login button is on the picture from the first frame and nothing jumps at the end. On a narrow screen it is how the burger reaches the reader before the bar exists. While it floats it carries a ring and a soft shadow so a dark control still reads on a dark picture, and focus leaves the bar alone - it is on screen already, so a click on the theme toggle no longer hauls the header in.

Add mw-parallax-rise next to it and the picture lifts by 12vh while the text stays where it is - a pinned block does not travel through the viewport, so that layer runs on the document's own scroll instead, over the first screen of it. That makes it a hero move: further down the page those pixels are long gone and the picture holds still. --mw-parallax-depth is the dial, here as everywhere. Several pinned blocks on one page are fine, each takes over from the one before.

Slow - mw-parallax-slow, the block travels behind the page

The band before the components section on this page: it keeps its place in the flow and moves at a fifth of your scrolling, so picture and text are still going while the next section closes in from below. Pinning is the same move with the tempo at zero. --mw-parallax-slow-travel (45vh) is the dial and reads against the block's own height - half the height is half speed, the full height stands still. Going past it sends the block backwards. The dial belongs on the element carrying the class, the height on the mw-parallax block inside it: set on the inner block it never reaches the animation and the tempo stays at the default.

Pattern - mw-parallax-pattern, a second layer that makes the movement visible

The travel is vertical, so only an edge across it - a rule, a grid, a hatch - ever shows it. A gradient has none and slides without looking like it moves. Add a second mw-parallax-media carrying mw-parallax-pattern: it travels a third of the distance, and it is the difference between the two layers that reads as depth. In a hero the pattern comes from $mw-hero-pattern, the way the picture comes from $mw-hero-image; anywhere else set --mw-parallax-pattern-image on it.

<header class="mw-header mw-header-reveal">
  ...
  <button class="mw-login-btn mw-header-keep">...</button>
  <button class="mw-menu-btn mw-header-keep">...</button>
</header>

<main class="mw-main">
  <section class="mw-section mw-parallax-sticky mw-parallax-rise">
    <div class="mw-container mw-parallax">
      <div class="mw-parallax-media"></div>
      <div class="mw-parallax-media mw-parallax-pattern"></div>
      <div class="mw-hero">...</div>
    </div>
  </section>

  <section class="mw-section">...</section>
</main>