Kleos Utility System v1
Click a class to copy it. Hover any class to see the CSS attributes.
Showing all classes
Margin utilities for all sides, individual sides, and horizontal/vertical spacing.
Padding utilities for all sides, individual sides, and horizontal/vertical spacing.
Gap utilities for flex and grid layouts, including horizontal and vertical gap controls.
Display, flex, alignment, positioning, and overflow utilities.
12-column grid utilities for desktop, tablet, and mobile layouts. Use grid-12 on the parent and column classes on children.
Width, height, max-width, min-height, and container sizing utilities.
Typography utilities for headings, body text, font weight, line height, letter spacing, and alignment.
Text, background, and border color utilities based on the Kleos brand palette.
Shape, border, and transparency utilities for cards, buttons, badges, and layout elements.
Tablet and mobile utility overrides. Tablet uses max-width:991px, mobile uses max-width:767px.
Utilities for shadows, transitions, cursor behavior, pointer events, and stacking order.
Utilities for positioning elements using top, right, bottom, left, and inset values.
Reusable button component classes. Use btn as the base, then add a variant and size.
Reusable card component classes for content blocks, pricing cards, feature cards, and testimonials.
Reusable section wrappers for page structure, spacing, background, and content width.
Utilities for images, videos, icons, aspect ratios, and media wrappers.
Reusable form field, label, input, textarea, select, checkbox, and form state classes.
Reusable classes for navbars, nav links, dropdowns, mobile menus, and footer navigation groups.
Small status, category, and label components for cards, nav items, pricing, and feature sections.
Utilities for list layouts, icon lists, dividers, separators, and stacked content groups.
Reusable classes for blog posts, CMS content, legal pages, documentation, and long-form rich text.
Reusable classes for FAQ sections, accordion rows, questions, answers, icons, and open/closed states.
Reusable classes for comparison tables, pricing matrices, feature tables, and data-style layouts.
Utilities for visibility, screen-reader content, focus states, accessibility helpers, and interaction control.