hotelery / reference
Style Guide
Every token, component and pattern available in hotelery — a luxury hotel & booking theme built on the theme-base foundation. This is the base pass: design system and layout only, no shortcodes yet — booking search, room listings and the rest are being added incrementally on top of these components.
FREE tier — no Pro features installed
This theme ships with two Pro-boundary examples (footer style, custom CSS) that always fall back to their free default here — see the FREE / PRO BOUNDARY comment blocks in functions/functions.php and functions/theme-options.php for how a commercial fork would add the Pro-only fields and hook the matching filters.
Colors
CSS custom properties defined in :root. The accent is overridable via Theme Options → Accent color.
Typography
Display headings use --htl-font-display (Gilda Display, serif), body text and labels/overlines/badges use --htl-font-body (Jost). Configure display/body fonts in Theme Options.
.htl-display-1
Comfort & Elegance
.htl-display-2
A stay to remember
.htl-h1
Component library, live
.htl-h2
Tokens drive every class
.htl-h3
Ready for new themes
.htl-overline
Category / label text
.htl-lead
A larger intro paragraph used right under page and section titles.
.htl-body-lg
Slightly larger body copy for emphasis.
.htl-body-base
Default paragraph text used throughout the theme.
.htl-body-sm
Small print, timestamps, captions.
Spacing & Grid
A max-width: 1240px container with native CSS Grid — no framework grid classes.
.container — max-width: 1240px, auto margins
Column 1
Column 2
Column 3
Column 4
Icons
Inline SVG throughout — no icon font required for structural UI.
Badges
Small mono-uppercase labels. Use .htl-badge with a variant modifier.
Forms
Form elements use .htl-input, .htl-select, .htl-textarea with the .htl-form-group wrapper.
Cards
Soft-rounded, elevated cards — use .htl-card for general content, or --horizontal for a side-by-side layout.
Guide
Planning your stay
Everything you need to know before you book — check-in windows, amenities, cancellation policy.
Reference
Theme options cheat sheet
Accent color, display/body fonts and header contact info — all editable from admin.
Alerts
Inline alerts, plus window.showAlert('alert-success', 'msg') for floating toasts.
Avatars
Use .htl-avatar with a size modifier. Group with .htl-avatar-group.
Tables
Wrap with .htl-table-wrap for responsive overflow, use .htl-table on the <table>.
| Component | Class prefix | Status |
|---|---|---|
| Buttons | .htl-btn |
Stable |
| Cards | .htl-card |
Stable |
| Forms | .htl-input |
Review |
| Tables | .htl-table |
Draft |
Stats / KPI Cards
Use .htl-stat for metric display inside a grid.
Components
24
↑ +4
Pages built
9
↑ +2
Load time
0.8s
↑ -12%
Shortcodes
0
↓ —
Tooltips
CSS-only tooltips via data-tooltip="...". No JS required.
Pagination
Rendered by partials/pagination.blade.php. Structure below.
Section Header
Overline → title → lead. Use --center for centered layouts.
What's inside
Everything a new theme needs
Layouts, partials, views and a full component library — no shortcodes required to ship a page.
Why slim
Fewer moving parts, faster iteration
Add shortcodes later, once the design language is proven on real pages.
Page Hero
Used on inner pages (blog, tag, category). Class .htl-page-hero.
Photo Hero / CTA Banner
Full-bleed photo with a navy overlay (moonhotel's own rgba(0,8,52,.65)). Used hand-written on the homepage today via .htl-home-hero / .htl-cta-banner — a future home-banner shortcode should reuse these classes with an admin-editable background image.
Icon Feature Strip
moonhotel's hotel-about pattern — a centered heading over a row of icon+label amenity blocks. Class .htl-icon-strip.
Empty State
Shown when a list has no results. Use .htl-empty-state.
No results found
Try adjusting your search or filters.