Our Partners

Style Guide (Staging)

London Homestays • Staging

Style Guide

A quick playground for buttons, cards, grids, spacing, and typography.
These components should feel “UKSE polished” while using LH brand colours.

CTA Button Behaviour

UKSE Pill Contract with LH palette. Primary lifts on hover; secondary shifts colour only.

.lh-btn–primary

Magenta gradient, white text, resting shadow.
Hover: translateY(-2px) + deeper shadow.

Primary CTA

.lh-btn–secondary

True outline, navy text.
Hover: colour shift to LH blue (no transform).

Secondary CTA

.lh-btn–compact

Smaller padding, uppercase text. Use for inline or tight layouts.

Section Title Underline

Use .lh-title--underline modifier to add the magenta accent line.

.lh-title (plain)

Section Heading

No underline — use for quieter sections.

.lh-title.lh-title–underline

Section Heading

Magenta underline — use for major sections.

Cards

Cards should have calm spacing, readable type, and a subtle hover lift.

Students
Book a trusted London homestay with flexible meal plans and local support.

Host Families
Become a host family and welcome international students into your home.

Safeguarding
Clear guidelines, placements you can trust, and support throughout the stay.

Typography

Headings

H1 Heading

H2 Section Title (lh-title)

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Body text

Lead paragraph: slightly larger, calmer line-height.

Standard body text: this should be easy to read and not fight the parent theme.
This is a link with hover underline refinement.

Small text: muted helper copy for captions and notes.

Heading Systems Comparison

Two heading approaches: .lh-title for section titles vs .lh-h2 utility class.

.lh-title — Section titles

font-weight: 800, letter-spacing: -0.2px, color: #000032

Section Title Example

Used for major section headings throughout the site.

.lh-h2 — Utility class

font-weight: 600, font-size: 2rem, inherits colour

Utility Heading Example

General-purpose heading utility for flexible use.

Legacy Aliases

These selectors are aliased to .lh-title for backward compatibility:

  • .home-testimonials-heading
  • .blog-slider-title

Section spacing

.lh-section-sm

Smaller vertical rhythm for dense areas.

.lh-section

Default vertical rhythm for most sections.

.lh-section-lg

Large vertical rhythm for hero / major breakpoints.

Testimonials

Our Partners & Accreditations

Chat with Us