ENG
ARA
FRA
DreamsTour component reference
Every component below uses the template's existing classes, so anything you copy from this page will match the other pages. Where a pattern did not previously exist anywhere in the template — empty states, skeletons, toasts — it is marked New.
Typography
Body text is IBM Plex Sans. Keep to these eight steps rather than reaching for an arbitrary fs-* value.
| Sample | Class | Size | Weight | Use for |
|---|---|---|---|---|
| Display | .fs-40 |
40px | 700 | Hero headline, one per page |
| Heading 1 | .fs-32 |
32px | 700 | Page title |
| Heading 2 | .fs-24 |
24px | 700 | Section heading |
| Heading 3 | .fs-20 |
20px | 600 | Card title, detail sub-section |
| Heading 4 | .fs-18 |
18px | 600 | Widget heading |
| Body | .fs-14 |
14px | 400 | Default body text |
| Small | .fs-13 |
13px | 400 | Meta, helper text, timestamps |
| Label | .fs-12 |
12px | 600 | Badges, table headers, eyebrows |
Colour
Primary
#CF3425
Buttons, links, active states
Secondary
#98AA30
Supporting accents
Success
#04BD6C
Confirmed, available, included
Info
#155EEF
Neutral information
Warning
#FFCA18
Pending, in review
Danger
#FF0000
Cancelled, errors, destructive actions
Dark
#212E47
Headings, high-contrast surfaces
Light
#E4EBF1
Borders, dividers, muted fills
Semantic colour (success / warning / danger) is separate from the brand accent and should only ever carry meaning, never decoration.
Shape & elevation
Flat — .shadow-none
Resting — .shadow-sm
Raised — .shadow
Buttons
Variants
Sizes
btn btn-sm on its own renders unstyled — there are 182 such buttons in the existing pages.
Forms & validation
Every input needs an id, a matching <label for> and an autocomplete token.
Enter an email address including the @ sign.
Product card
One card object for all nine modules: 16:10 media, wishlist top-right, badge top-left, then title, location, rating, price and CTA in the same place every time.
Price & rating
Price block — always carries a per-unit label
$680 $549 per personRating — never stars alone
Badges
Status
Promotional & availability
Alerts & toasts
Toasts are newToast — for transient confirmations such as adding to a wishlist or copying a coupon code
Empty & loading states
NewNeither pattern existed anywhere in the template. A filtered listing that returns nothing is the highest-frequency state on a search page.
No hotels match these filters
Try widening your price range or removing a filter.