Internal style guide · live components

Kevin Mullins Website Style Guide

A hidden-page reference for every reusable block in the site CSS, with live previews and copy-paste markup. Open any component below to see how it's built.

This page assumes your main site CSS is already loaded in Squarespace Custom CSS. The helper styles above only style this guide. The component previews use your real live classes, so if something breaks globally it should also show up here.

--ink#1A1815

--paper#F7F2E8

--accent#5C4B2E

--accent-2#B89968

--slate#1B1A17

--paper-2#EFE8D7

--paper-3#E4DBC4

--ink-mid#5C564B

Hero & openers

Dictionary Hero Block

Large dictionary-style hero used on the Candid Wedding blog. Designed for dark backgrounds with rising entrance animations.

click to collapse

.dict
.dict-headword
.dict-phonetic
.dict-pos
.dict-defs
.dict-def
.dict-scroll

candid

/ˈkandɪd/

adjective

1. truthful and straightforward; frank.
2. (of a photograph) informal, especially taken without the subject's knowledge.

Scroll to explore

Copy-paste markup

<div class="dict">
  <h1 class="dict-headword">candid</h1>
  <span class="dict-phonetic">/ˈkandɪd/</span>
  <div class="dict-pos">adjective</div>
  <ol class="dict-defs">
    <li class="dict-def"><span class="n">1.</span> truthful and straightforward; frank.</li>
    <li class="dict-def"><span class="n">2.</span> (of a photograph) informal, especially taken without the subject's knowledge.</li>
  </ol>
  <div class="dict-scroll">Scroll to explore</div>
</div>

Portfolio Chapter Divider

Reusable editorial chapter marker for portfolio sections.

click to collapse

.km-portfolio-chapter
.km-portfolio-chapter--with-top-rule
.km-portfolio-chapter--tight
.km-portfolio-chapter__ghost
.km-portfolio-chapter__num
.km-portfolio-chapter__title
.km-portfolio-chapter__rule

/ 01

Weddings

Copy-paste markup

<section class="km-portfolio-chapter km-portfolio-chapter--tight">
  <span class="km-portfolio-chapter__ghost">01</span>
  <p class="km-portfolio-chapter__num">/ 01</p>
  <h2 class="km-portfolio-chapter__title">Weddings</h2>
  <span class="km-portfolio-chapter__rule"></span>
</section>

Start Page Slideshow Hero

Responsive hero slideshow that fills the section width. Requires JS to add .is-active class to one slide at a time.

click to collapse

.km-start-hero
.km-start-hero__bg
.km-start-hero__slide
.km-start-hero__slide.is-active

Hero slideshow content sits here

Copy-paste markup

<section class="km-start-hero" style="--km-header-offset:0; height:300px; margin-top:0;">
  <div class="km-start-hero__bg">
    <div class="km-start-hero__slide is-active" style="background-image:url(data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E)"></div>
  </div>
  <div style="position:relative;padding:40px;color:#fff;text-align:center;width:100%;">
    <h2 style="margin:0;color:#fff;">Hero slideshow content sits here</h2>
  </div>
</section>

Navigation

Mega Menu (3-column base)

Shared mega menu framework. Default 3-column layout. Use modifier classes for category-specific variants (weddings, family, portraits, photographers, fuji hub).

click to collapse

Wedding portfolio

Information

For photographers

Copy-paste markup

<div class="kmm">
  <div class="kmm-inner kmm-inner--weddings">
    <div class="kmm-col">
      <h3 class="kmm-h">Wedding portfolio</h3>
      <ul class="kmm-list">
        <li><a class="kmm-link" href="#">Recent weddings <span class="kmm-arrow">→</span></a></li>
        <li><a class="kmm-link" href="#">Wiltshire weddings <span class="kmm-arrow">→</span></a></li>
        <li><a class="kmm-link" href="#">London weddings <span class="kmm-arrow">→</span></a></li>
      </ul>
    </div>
    <div class="kmm-col">
      <h3 class="kmm-h">Information</h3>
      <ul class="kmm-list">
        <li><a class="kmm-link" href="#">About Kevin <span class="kmm-arrow">→</span></a></li>
        <li><a class="kmm-link" href="#">Investment &amp; fees <span class="kmm-arrow">→</span></a></li>
        <li><a class="kmm-link" href="#">FAQs <span class="kmm-arrow">→</span></a></li>
      </ul>
    </div>
    <div class="kmm-col kmm-col--photographers">
      <h3 class="kmm-h">For photographers</h3>
      <ul class="kmm-list">
        <li><a class="kmm-link kmm-link--external" href="#">F16.click <span class="kmm-external-arrow">↗</span></a></li>
        <li><a class="kmm-link" href="#">Courses <span class="kmm-arrow">→</span></a></li>
      </ul>
    </div>
  </div>
</div>

FAQ Sticky Jump Nav

Sticky FAQ category nav with horizontal scroll on mobile.

click to collapse

.km-faq-sticky-jump
.km-faq-sticky-jump__inner
.km-faq-sticky-jump__link
.km-faq-sticky-jump__count
.km-faq-sticky-jump__divider

Copy-paste markup

<nav class="km-faq-sticky-jump" aria-label="FAQ sections">
  <div class="km-faq-sticky-jump__inner">
    <a class="km-faq-sticky-jump__link" href="#booking-fees">Booking &amp; fees <span class="km-faq-sticky-jump__count">12</span></a>
    <span class="km-faq-sticky-jump__divider"></span>
    <a class="km-faq-sticky-jump__link" href="#the-photography">The photography <span class="km-faq-sticky-jump__count">8</span></a>
    <span class="km-faq-sticky-jump__divider"></span>
    <a class="km-faq-sticky-jump__link" href="#travel">Travel <span class="km-faq-sticky-jump__count">5</span></a>
    <span class="km-faq-sticky-jump__divider"></span>
    <a class="km-faq-sticky-jump__link" href="#after-the-wedding">After the wedding <span class="km-faq-sticky-jump__count">7</span></a>
  </div>
</nav>

Slim Anchor Nav (pill style)

Slim pill-style anchor navigation with horizontal scroll on mobile.

click to collapse

.km-anchor-nav
.km-anchor-nav__inner

Copy-paste markup

<nav class="km-anchor-nav" aria-label="Page sections">
  <div class="km-anchor-nav__inner">
    <a href="#overview">Overview</a>
    <a href="#what-you-get" class="is-active">What you get</a>
    <a href="#timeline">Timeline</a>
    <a href="#pricing">Pricing</a>
    <a href="#faqs">FAQs</a>
  </div>
</nav>

Cards & grids

Router Card Grid (4-up / 2×2)

Balanced 2×2 grid of large router cards with 4:3 image frames. Best for four equal-priority destinations.

click to collapse

.km-router-grid-2x2
.km-router-card
.km-router-card__frame
.km-router-card__body
.km-router-card__num
.km-router-card__title
.km-router-card__text
.km-explore-link

/ 01

Weddings portfolio

A documentary approach to wedding days.

Explore →

/ 02

Family sessions

Honest, natural family photography.

Explore →

Copy-paste markup

<div class="km-router-grid-2x2">
  <a class="km-router-card" href="#">
    <div class="km-router-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-router-card__body">
      <span class="km-router-card__num">/ 01</span>
      <h3 class="km-router-card__title">Weddings <em>portfolio</em></h3>
      <p class="km-router-card__text">A documentary approach to wedding days.</p>
      <span class="km-explore-link">Explore <span class="km-explore-link__arrow">→</span></span>
    </div>
  </a>
  <a class="km-router-card" href="#">
    <div class="km-router-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-router-card__body">
      <span class="km-router-card__num">/ 02</span>
      <h3 class="km-router-card__title">Family <em>sessions</em></h3>
      <p class="km-router-card__text">Honest, natural family photography.</p>
      <span class="km-explore-link">Explore <span class="km-explore-link__arrow">→</span></span>
    </div>
  </a>
</div>

Explore Panel Cards

Three-column related-content panel for family blog and similar editorial sections. Black top border that turns ochre on hover.

click to collapse

.explore-panel
.ep-head
.ep-cards
.ep-card
.ep-tag
.ep-title
.ep-desc
.ep-link

More to explore

A few related pages you might enjoy.

/ 01

Documentary weddings

The unposed approach to a wedding day.

Family portraits

Relaxed family sessions, honestly photographed.

For photographers

Courses, presets and resources.

Copy-paste markup

<section class="explore-panel">
  <div class="ep-head">
    <h2>More to <em>explore</em></h2>
    <p>A few related pages you might enjoy.</p>
  </div>
  <div class="ep-cards">
    <a class="ep-card" href="#">
      <span class="ep-tag">/ 01</span>
      <h3 class="ep-title">Documentary <em>weddings</em></h3>
      <p class="ep-desc">The unposed approach to a wedding day.</p>
      <span class="ep-link">Read more <span aria-hidden="true">→</span></span>
    </a>
    <a class="ep-card" href="#">
      <span class="ep-tag">/ 02</span>
      <h3 class="ep-title">Family <em>portraits</em></h3>
      <p class="ep-desc">Relaxed family sessions, honestly photographed.</p>
      <span class="ep-link">Read more <span aria-hidden="true">→</span></span>
    </a>
    <a class="ep-card" href="#">
      <span class="ep-tag">/ 03</span>
      <h3 class="ep-title">For <em>photographers</em></h3>
      <p class="ep-desc">Courses, presets and resources.</p>
      <span class="ep-link">Read more <span aria-hidden="true">→</span></span>
    </a>
  </div>
</section>

Outcome Grid

Three-column outcomes / takeaways grid for course pages and landing sections.

click to collapse

.km-outcome-grid
.km-outcome-grid__item
.km-outcome-grid__num
.km-outcome-grid__title
.km-outcome-grid__text

/ 01

See better

Train your eye to spot moments before they happen.

/ 02

Work quietly

Be present without interrupting the day.

/ 03

Edit with care

Choose images that genuinely tell the story.

Copy-paste markup

<div class="km-outcome-grid">
  <div class="km-outcome-grid__item">
    <span class="km-outcome-grid__num">/ 01</span>
    <h3 class="km-outcome-grid__title">See <em>better</em></h3>
    <p class="km-outcome-grid__text">Train your eye to spot moments before they happen.</p>
  </div>
  <div class="km-outcome-grid__item">
    <span class="km-outcome-grid__num">/ 02</span>
    <h3 class="km-outcome-grid__title">Work <em>quietly</em></h3>
    <p class="km-outcome-grid__text">Be present without interrupting the day.</p>
  </div>
  <div class="km-outcome-grid__item">
    <span class="km-outcome-grid__num">/ 03</span>
    <h3 class="km-outcome-grid__title">Edit with <em>care</em></h3>
    <p class="km-outcome-grid__text">Choose images that genuinely tell the story.</p>
  </div>
</div>

Cross Sell Card Grid

Three-column cross-sell card grid used on Fujifilm Recipes and similar pages.

click to collapse

.cs-grid
.cs-card
.cs-tag
.cs-name
.cs-desc
.cs-action

/ Preset pack

Classic Negative

A warm, gentle film-style recipe.

View pack / Preset pack

Acros +R

High-contrast monochrome.

View pack / Course

Documentary workflow

Edit a wedding from start to finish.

View course

Copy-paste markup

<div class="cs-grid">
  <a class="cs-card" href="#">
    <span class="cs-tag">/ Preset pack</span>
    <h3 class="cs-name">Classic <em>Negative</em></h3>
    <p class="cs-desc">A warm, gentle film-style recipe.</p>
    <span class="cs-action">View pack <span aria-hidden="true">→</span></span>
  </a>
  <a class="cs-card" href="#">
    <span class="cs-tag">/ Preset pack</span>
    <h3 class="cs-name">Acros <em>+R</em></h3>
    <p class="cs-desc">High-contrast monochrome.</p>
    <span class="cs-action">View pack <span aria-hidden="true">→</span></span>
  </a>
  <a class="cs-card" href="#">
    <span class="cs-tag">/ Course</span>
    <h3 class="cs-name">Documentary <em>workflow</em></h3>
    <p class="cs-desc">Edit a wedding from start to finish.</p>
    <span class="cs-action">View course <span aria-hidden="true">→</span></span>
  </a>
</div>

Topics Grid

Six-card topic grid for mentoring / Power Hour pages.

click to collapse

.topics-grid
.topic-card
.tc-icon
.tc-head
.tc-body

/ 01

Portfolio review

Honest, useful feedback on a body of work.

/ 02

Pricing & positioning

Where you sit in the market and why.

/ 03

Workflow & editing

Faster, calmer post-production.

/ 04

Marketing

Attracting the right clients without burning out.

/ 05

Mindset

Sustaining a career through the quiet months.

/ 06

Anything else

Bring whatever is on your mind.

Copy-paste markup

<div class="topics-grid">
  <div class="topic-card">
    <span class="tc-icon">/ 01</span>
    <h3 class="tc-head">Portfolio review</h3>
    <p class="tc-body">Honest, useful feedback on a body of work.</p>
  </div>
  <div class="topic-card">
    <span class="tc-icon">/ 02</span>
    <h3 class="tc-head">Pricing &amp; positioning</h3>
    <p class="tc-body">Where you sit in the market and why.</p>
  </div>
  <div class="topic-card">
    <span class="tc-icon">/ 03</span>
    <h3 class="tc-head">Workflow &amp; editing</h3>
    <p class="tc-body">Faster, calmer post-production.</p>
  </div>
  <div class="topic-card">
    <span class="tc-icon">/ 04</span>
    <h3 class="tc-head">Marketing</h3>
    <p class="tc-body">Attracting the right clients without burning out.</p>
  </div>
  <div class="topic-card">
    <span class="tc-icon">/ 05</span>
    <h3 class="tc-head">Mindset</h3>
    <p class="tc-body">Sustaining a career through the quiet months.</p>
  </div>
  <div class="topic-card">
    <span class="tc-icon">/ 06</span>
    <h3 class="tc-head">Anything else</h3>
    <p class="tc-body">Bring whatever is on your mind.</p>
  </div>
</div>

Steps Grid

Three-column process / how-it-works grid with bordered cells and a footer note.

click to collapse

.steps-grid
.step
.step-num
.step-head
.step-body
.step-note

/ 01

A short brief

We start with a quick form so I understand what you're hoping to work on.

Takes about five minutes

/ 02

We talk

A focused one-hour call over Zoom. Recorded so you don't have to take notes.

60 minutes

/ 03

Follow up

A written summary of the key points and recommended next steps lands in your inbox.

Within 48 hours

Copy-paste markup

<div class="steps-grid">
  <div class="step">
    <span class="step-num">/ 01</span>
    <h3 class="step-head">A short <em>brief</em></h3>
    <p class="step-body">We start with a quick form so I understand what you're hoping to work on.</p>
    <span class="step-note">Takes about five minutes</span>
  </div>
  <div class="step">
    <span class="step-num">/ 02</span>
    <h3 class="step-head">We <em>talk</em></h3>
    <p class="step-body">A focused one-hour call over Zoom. Recorded so you don't have to take notes.</p>
    <span class="step-note">60 minutes</span>
  </div>
  <div class="step">
    <span class="step-num">/ 03</span>
    <h3 class="step-head">Follow <em>up</em></h3>
    <p class="step-body">A written summary of the key points and recommended next steps lands in your inbox.</p>
    <span class="step-note">Within 48 hours</span>
  </div>
</div>

Secondary Callout Cards

Two-column mentoring / course cards used below the Power Hour block.

click to collapse

.secondary-callouts
.sec-card
.sc-tag
.sc-title
.sc-price
.sc-desc
.sc-includes
.sci

/ Course

Documentary workflow

£100 one-time

A self-paced video course on photographing wedding days quietly and honestly.

7+ hours of video
Lifetime access

View course →

/ Mentoring

Three-month mentoring

£900 / three months

Sustained support across a season of work, with regular calls and reviews.

Six calls
Unlimited email

Learn more →

Copy-paste markup

<div class="secondary-callouts">
  <div class="sec-card">
    <span class="sc-tag">/ Course</span>
    <h3 class="sc-title">Documentary <em>workflow</em></h3>
    <div class="sc-price">£100 <small>one-time</small></div>
    <p class="sc-desc">A self-paced video course on photographing wedding days quietly and honestly.</p>
    <ul class="sc-includes">
      <li class="sci">7+ hours of video</li>
      <li class="sci">Lifetime access</li>
    </ul>
    <a class="btn-link" href="#">View course →</a>
  </div>
  <div class="sec-card">
    <span class="sc-tag">/ Mentoring</span>
    <h3 class="sc-title">Three-month <em>mentoring</em></h3>
    <div class="sc-price">£900 <small>/ three months</small></div>
    <p class="sc-desc">Sustained support across a season of work, with regular calls and reviews.</p>
    <ul class="sc-includes">
      <li class="sci">Six calls</li>
      <li class="sci">Unlimited email</li>
    </ul>
    <a class="btn-link" href="#">Learn more →</a>
  </div>
</div>

Mentoring Product Cards

Editorial product/service cards for mentoring and programmes with optional image.

click to collapse

.km-mentoring-card-grid
.km-mentoring-card
.km-mentoring-card__image
.km-mentoring-card__body
.km-mentoring-card__label
.km-mentoring-card__title
.km-mentoring-card__price-row
.km-mentoring-card__from
.km-mentoring-card__price
.km-mentoring-card__price-meta
.km-mentoring-card__text
.km-mentoring-card__spacer
.km-mentoring-card__list
.km-mentoring-card__button
.km-mentoring-card__button--dark
.km-mentoring-card__button-arrow

/ Single session

The Power Hour

From £150 60 minutes · recorded

A focused one-hour call. Bring whatever's stuck.

Portfolio review
Pricing & positioning
Marketing

Book a session →

/ Programme

Three-month mentoring

From £900 Six calls · email between

Sustained support across a working season.

Six 60-minute calls
Unlimited email between
Portfolio reviews throughout

Learn more →

Copy-paste markup

<div class="km-mentoring-card-grid km-mentoring-card-grid--2">
  <article class="km-mentoring-card">
    <div class="km-mentoring-card__image"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-mentoring-card__body">
      <span class="km-mentoring-card__label">/ Single session</span>
      <h3 class="km-mentoring-card__title">The Power Hour</h3>
      <div class="km-mentoring-card__price-row">
        <span class="km-mentoring-card__from">From</span>
        <span class="km-mentoring-card__price">£150</span>
        <span class="km-mentoring-card__price-meta">60 minutes · recorded</span>
      </div>
      <p class="km-mentoring-card__text">A focused one-hour call. Bring whatever's stuck.</p>
      <ul class="km-mentoring-card__list">
        <li>Portfolio review</li>
        <li>Pricing &amp; positioning</li>
        <li>Marketing</li>
      </ul>
      <a class="km-mentoring-card__button" href="#">Book a session <span class="km-mentoring-card__button-arrow">→</span></a>
    </div>
  </article>
  <article class="km-mentoring-card">
    <div class="km-mentoring-card__image"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-mentoring-card__body">
      <span class="km-mentoring-card__label">/ Programme</span>
      <h3 class="km-mentoring-card__title">Three-month mentoring</h3>
      <div class="km-mentoring-card__price-row">
        <span class="km-mentoring-card__from">From</span>
        <span class="km-mentoring-card__price">£900</span>
        <span class="km-mentoring-card__price-meta">Six calls · email between</span>
      </div>
      <p class="km-mentoring-card__text">Sustained support across a working season.</p>
      <ul class="km-mentoring-card__list">
        <li>Six 60-minute calls</li>
        <li>Unlimited email between</li>
        <li>Portfolio reviews throughout</li>
      </ul>
      <a class="km-mentoring-card__button km-mentoring-card__button--dark" href="#">Learn more <span class="km-mentoring-card__button-arrow">→</span></a>
    </div>
  </article>
</div>

Store Product Cards

Extensible product / course card grid for store sections.

click to collapse

.km-store-product-grid
.km-store-product-card
.km-store-product-card__media
.km-store-product-card__body
.km-store-product-card__title
.km-store-product-card__price
.km-store-product-card__meta

Copy-paste markup

<div class="km-store-product-grid km-store-product-grid--3">
  <a class="km-store-product-card" href="#">
    <div class="km-store-product-card__media"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-store-product-card__body">
      <h3 class="km-store-product-card__title">Classic Negative pack</h3>
      <span class="km-store-product-card__price">£24</span>
      <span class="km-store-product-card__meta">Lightroom + Capture One</span>
    </div>
  </a>
  <a class="km-store-product-card" href="#">
    <div class="km-store-product-card__media"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-store-product-card__body">
      <h3 class="km-store-product-card__title">Acros +R pack</h3>
      <span class="km-store-product-card__price">£24</span>
      <span class="km-store-product-card__meta">Monochrome recipes</span>
    </div>
  </a>
  <a class="km-store-product-card" href="#">
    <div class="km-store-product-card__media"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-store-product-card__body">
      <h3 class="km-store-product-card__title">Reportage pack</h3>
      <span class="km-store-product-card__price">£32</span>
      <span class="km-store-product-card__meta">Wedding workflow</span>
    </div>
  </a>
</div>

Store Router Cards

Tall decision cards for store / landing pages — large editorial question + destination.

click to collapse

.km-store-router
.km-store-router__grid
.km-store-router__card
.km-store-router__num
.km-store-router__question
.km-store-router__desc
.km-store-router__dest
.km-store-router__arrow

/ 01

Want a course?

Self-paced video courses on documentary, portraits and Fujifilm workflow.

Courses → / 02

Want presets?

Carefully tuned Lightroom and Capture One packs.

Presets → / 03

Want mentoring?

One-to-one Power Hour sessions or longer programmes.

Mentoring →

Copy-paste markup

<section class="km-store-router km-store-router--3">
  <div class="km-store-router__grid">
    <a class="km-store-router__card" href="#">
      <span class="km-store-router__num">/ 01</span>
      <h3 class="km-store-router__question">Want a <em>course?</em></h3>
      <p class="km-store-router__desc">Self-paced video courses on documentary, portraits and Fujifilm workflow.</p>
      <span class="km-store-router__dest">Courses <span class="km-store-router__arrow">→</span></span>
    </a>
    <a class="km-store-router__card" href="#">
      <span class="km-store-router__num">/ 02</span>
      <h3 class="km-store-router__question">Want <em>presets?</em></h3>
      <p class="km-store-router__desc">Carefully tuned Lightroom and Capture One packs.</p>
      <span class="km-store-router__dest">Presets <span class="km-store-router__arrow">→</span></span>
    </a>
    <a class="km-store-router__card" href="#">
      <span class="km-store-router__num">/ 03</span>
      <h3 class="km-store-router__question">Want <em>mentoring?</em></h3>
      <p class="km-store-router__desc">One-to-one Power Hour sessions or longer programmes.</p>
      <span class="km-store-router__dest">Mentoring <span class="km-store-router__arrow">→</span></span>
    </a>
  </div>
</section>

Dark Feature Image Cards

Extensible dark image-card grid for recognition, events, exhibitions, talks and featured moments.

click to collapse

.km-dark-feature-grid
.km-dark-feature-grid--1
.km-dark-feature-grid--2
.km-dark-feature-grid--3
.km-dark-feature-grid--4
.km-dark-feature-card
.km-dark-feature-card__frame
.km-dark-feature-card__body
.km-dark-feature-card__title
.km-dark-feature-card__meta

Exhibition · Fujifilm HQ, Tokyo

20 black and white images · June 2018

Behind the Lens stage

The Photography Show · multiple appearances

Conference talk

Tokyo, Japan

Copy-paste markup

<div class="km-dark-feature-grid km-dark-feature-grid--3">
  <article class="km-dark-feature-card">
    <div class="km-dark-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-dark-feature-card__body">
      <h3 class="km-dark-feature-card__title">Exhibition · Fujifilm HQ, Tokyo</h3>
      <p class="km-dark-feature-card__meta">20 black and white images · <span>June 2018</span></p>
    </div>
  </article>
  <article class="km-dark-feature-card">
    <div class="km-dark-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-dark-feature-card__body">
      <h3 class="km-dark-feature-card__title">Behind the Lens stage</h3>
      <p class="km-dark-feature-card__meta">The Photography Show · <span>multiple appearances</span></p>
    </div>
  </article>
  <article class="km-dark-feature-card">
    <div class="km-dark-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-dark-feature-card__body">
      <h3 class="km-dark-feature-card__title">Conference talk</h3>
      <p class="km-dark-feature-card__meta">Tokyo, Japan</p>
    </div>
  </article>
</div>

Zone Card Grid

Tall editorial course curriculum cards. Has dark/bonus modifier.

click to collapse

.zone-card-grid
.zone-card
.zone-card--dark
.zone-card__image
.zone-card__label
.zone-card__title
.zone-card__list
.zone-card__foot

/ 01

Seeing the story

Observation
Anticipation
Working without interrupting

Module one

/ Bonus

A long Q&A

Real student questions
No script

Bonus module

Copy-paste markup

<div class="zone-card-grid">
  <article class="zone-card">
    <div class="zone-card__image"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="zone-card__label">/ 01</span>
    <h3 class="zone-card__title">Seeing the story</h3>
    <ul class="zone-card__list">
      <li>Observation</li>
      <li>Anticipation</li>
      <li>Working without interrupting</li>
    </ul>
    <p class="zone-card__foot">Module one</p>
  </article>
  <article class="zone-card zone-card--dark">
    <span class="zone-card__label">/ Bonus</span>
    <h3 class="zone-card__title">A long Q&amp;A</h3>
    <ul class="zone-card__list">
      <li>Real student questions</li>
      <li>No script</li>
    </ul>
    <p class="zone-card__foot">Bonus module</p>
  </article>
</div>

Wedding Style Matrix

Editorial comparison grid for photography style / approach. Scales 1–4 columns.

click to collapse

.km-style-matrix
.km-style-matrix--1
.km-style-matrix--2
.km-style-matrix--3
.km-style-matrix--4
.km-style-matrix--transparent
.km-style-matrix--paper-panels
.km-style-matrix__card
.km-style-matrix__card--featured
.km-style-matrix__head
.km-style-matrix__label
.km-style-matrix__title
.km-style-matrix__body
.km-style-matrix__intro
.km-style-matrix__rule
.km-style-matrix__list
.km-style-matrix__foot
.km-style-matrix__best
.km-style-matrix__best-text

/ Documentary

Real moments

Unposed, unscripted and observed.

No direction
Available light
Layered frames

Best for

Honest day-of storytelling.

/ Lifestyle

Gently guided

Relaxed but lightly directed.

/ Posed

Formal portraits

Polished and controlled.

Copy-paste markup

<div class="km-style-matrix km-style-matrix--3">
  <article class="km-style-matrix__card km-style-matrix__card--featured">
    <div class="km-style-matrix__head">
      <p class="km-style-matrix__label">/ Documentary</p>
      <h3 class="km-style-matrix__title">Real moments</h3>
    </div>
    <div class="km-style-matrix__body">
      <p class="km-style-matrix__intro">Unposed, unscripted and observed.</p>
      <span class="km-style-matrix__rule"></span>
      <ul class="km-style-matrix__list"><li>No direction</li><li>Available light</li><li>Layered frames</li></ul>
    </div>
    <div class="km-style-matrix__foot">
      <p class="km-style-matrix__best">Best for</p>
      <p class="km-style-matrix__best-text">Honest day-of storytelling.</p>
    </div>
  </article>
  <article class="km-style-matrix__card">
    <div class="km-style-matrix__head"><p class="km-style-matrix__label">/ Lifestyle</p><h3 class="km-style-matrix__title">Gently guided</h3></div>
    <div class="km-style-matrix__body"><p class="km-style-matrix__intro">Relaxed but lightly directed.</p></div>
  </article>
  <article class="km-style-matrix__card">
    <div class="km-style-matrix__head"><p class="km-style-matrix__label">/ Posed</p><h3 class="km-style-matrix__title">Formal portraits</h3></div>
    <div class="km-style-matrix__body"><p class="km-style-matrix__intro">Polished and controlled.</p></div>
  </article>
</div>

Image Feature Grid

Editorial image-led feature cards with gentle hover zoom. Scales 1–4 columns.

click to collapse

.km-image-feature-grid
.km-image-feature-grid--1
.km-image-feature-grid--2
.km-image-feature-grid--3
.km-image-feature-grid--4
.km-image-feature-card
.km-image-feature-card__frame
.km-image-feature-card__num
.km-image-feature-card__title
.km-image-feature-card__text

Light

I work with whatever light the room gives us.

Composition

Frames that feel lived-in, layered and useful later.

Moment

The little tells are often where the picture lives.

Copy-paste markup

<div class="km-image-feature-grid km-image-feature-grid--3">
  <article class="km-image-feature-card">
    <div class="km-image-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%201000'%3E%3Crect%20width='800'%20height='1000'%20fill='%23e4dbc4'/%3E%3Crect%20x='200'%20y='200'%20width='400'%20height='600'%20fill='%23b89968'%20opacity='.4'/%3E%3Ccircle%20cx='400'%20cy='360'%20r='90'%20fill='%235c4b2e'%20opacity='.45'/%3E%3Ctext%20x='50%25'%20y='90%25'%20font-family='Georgia'%20font-size='42'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-image-feature-card__num">01</span>
    <h3 class="km-image-feature-card__title">Light</h3>
    <p class="km-image-feature-card__text">I work with whatever light the room gives us.</p>
  </article>
  <article class="km-image-feature-card">
    <div class="km-image-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%201000'%3E%3Crect%20width='800'%20height='1000'%20fill='%23e4dbc4'/%3E%3Crect%20x='200'%20y='200'%20width='400'%20height='600'%20fill='%23b89968'%20opacity='.4'/%3E%3Ccircle%20cx='400'%20cy='360'%20r='90'%20fill='%235c4b2e'%20opacity='.45'/%3E%3Ctext%20x='50%25'%20y='90%25'%20font-family='Georgia'%20font-size='42'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-image-feature-card__num">02</span>
    <h3 class="km-image-feature-card__title">Composition</h3>
    <p class="km-image-feature-card__text">Frames that feel lived-in, layered and useful later.</p>
  </article>
  <article class="km-image-feature-card">
    <div class="km-image-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%201000'%3E%3Crect%20width='800'%20height='1000'%20fill='%23e4dbc4'/%3E%3Crect%20x='200'%20y='200'%20width='400'%20height='600'%20fill='%23b89968'%20opacity='.4'/%3E%3Ccircle%20cx='400'%20cy='360'%20r='90'%20fill='%235c4b2e'%20opacity='.45'/%3E%3Ctext%20x='50%25'%20y='90%25'%20font-family='Georgia'%20font-size='42'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-image-feature-card__num">03</span>
    <h3 class="km-image-feature-card__title">Moment</h3>
    <p class="km-image-feature-card__text">The little tells are often where the picture lives.</p>
  </article>
</div>

Image Feature Grid Tips Variant

Quieter article-style version of the image feature grid — 4:3 frames, less stylised titles.

click to collapse

.km-image-feature-grid--tips

Avoid loud patterns

They pull attention from faces and date quickly.

Layer your palette

Coordinate, don't match. Stick to two or three tones.

Bring options

Two or three outfit changes feels right for most sessions.

Copy-paste markup

<div class="km-image-feature-grid km-image-feature-grid--3 km-image-feature-grid--tips">
  <article class="km-image-feature-card">
    <div class="km-image-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-image-feature-card__num">01</span>
    <h3 class="km-image-feature-card__title">Avoid loud patterns</h3>
    <p class="km-image-feature-card__text">They pull attention from faces and date quickly.</p>
  </article>
  <article class="km-image-feature-card">
    <div class="km-image-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-image-feature-card__num">02</span>
    <h3 class="km-image-feature-card__title">Layer your palette</h3>
    <p class="km-image-feature-card__text">Coordinate, don't match. Stick to two or three tones.</p>
  </article>
  <article class="km-image-feature-card">
    <div class="km-image-feature-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-image-feature-card__num">03</span>
    <h3 class="km-image-feature-card__title">Bring options</h3>
    <p class="km-image-feature-card__text">Two or three outfit changes feels right for most sessions.</p>
  </article>
</div>

Recognition Grid

Editorial bordered recognition / awards grid.

click to collapse

.km-recognition-grid
.km-recognition-grid--1
.km-recognition-grid--2
.km-recognition-grid--3
.km-recognition-grid--4
.km-recognition-card
.km-recognition-card__label
.km-recognition-card__title
.km-recognition-card__text

Award

Fujifilm X-Photographer since 2013

First UK wedding photographer to be appointed Fujifilm Ambassador.

Talk

Behind the Lens main stage

Multiple appearances at The Photography Show.

Copy-paste markup

<div class="km-recognition-grid km-recognition-grid--2">
  <article class="km-recognition-card">
    <span class="km-recognition-card__label">Award</span>
    <h3 class="km-recognition-card__title">Fujifilm X-Photographer <em>since 2013</em></h3>
    <p class="km-recognition-card__text">First UK wedding photographer to be appointed Fujifilm Ambassador.</p>
  </article>
  <article class="km-recognition-card">
    <span class="km-recognition-card__label">Talk</span>
    <h3 class="km-recognition-card__title">Behind the Lens <em>main stage</em></h3>
    <p class="km-recognition-card__text">Multiple appearances at The Photography Show.</p>
  </article>
</div>

Slim Product Cards

Minimal editorial product list with bottom-border separator.

click to collapse

.km-slim-product-grid
.km-slim-product-grid--1
.km-slim-product-grid--2
.km-slim-product-grid--3
.km-slim-product-grid--4
.km-slim-product-card
.km-slim-product-card__meta
.km-slim-product-card__title
.km-slim-product-card__foot
.km-slim-product-card__price
.km-slim-product-card__cta
.km-slim-product-card__cta-arrow

Course

Documentary workflow

£100 View → Preset pack

Classic Negative

£24 View →

Copy-paste markup

<div class="km-slim-product-grid km-slim-product-grid--2">
  <a class="km-slim-product-card" href="#">
    <span class="km-slim-product-card__meta">Course</span>
    <h3 class="km-slim-product-card__title">Documentary <em>workflow</em></h3>
    <span class="km-slim-product-card__foot">
      <span class="km-slim-product-card__price">£100</span>
      <span class="km-slim-product-card__cta">View <span class="km-slim-product-card__cta-arrow">→</span></span>
    </span>
  </a>
  <a class="km-slim-product-card" href="#">
    <span class="km-slim-product-card__meta">Preset pack</span>
    <h3 class="km-slim-product-card__title">Classic <em>Negative</em></h3>
    <span class="km-slim-product-card__foot">
      <span class="km-slim-product-card__price">£24</span>
      <span class="km-slim-product-card__cta">View <span class="km-slim-product-card__cta-arrow">→</span></span>
    </span>
  </a>
</div>

Mini Feature Cards

Compact editorial product cards with optional image and top label.

click to collapse

.km-mini-feature-grid
.km-mini-feature-grid--1
.km-mini-feature-grid--2
.km-mini-feature-grid--3
.km-mini-feature-grid--4
.km-mini-feature-card
.km-mini-feature-card--with-image
.km-mini-feature-card__media
.km-mini-feature-card__image
.km-mini-feature-card__label
.km-mini-feature-card__title
.km-mini-feature-card__text
.km-mini-feature-card__foot
.km-mini-feature-card__price
.km-mini-feature-card__cta
.km-mini-feature-card__cta-arrow

/ Course

Documentary workflow

Edit a full wedding from start to finish in a single sitting.

£100 View →

/ Preset

Classic Negative

A warm, gentle film-style recipe pack.

£24 View →

/ Mentoring

Power Hour

One focused call on whatever's stuck.

£150 View →

Copy-paste markup

<div class="km-mini-feature-grid km-mini-feature-grid--3">
  <article class="km-mini-feature-card">
    <span class="km-mini-feature-card__label">/ Course</span>
    <h3 class="km-mini-feature-card__title">Documentary workflow</h3>
    <p class="km-mini-feature-card__text">Edit a full wedding from start to finish in a single sitting.</p>
    <span class="km-mini-feature-card__foot">
      <span class="km-mini-feature-card__price">£100</span>
      <span class="km-mini-feature-card__cta">View <span class="km-mini-feature-card__cta-arrow">→</span></span>
    </span>
  </article>
  <article class="km-mini-feature-card km-mini-feature-card--with-image">
    <div class="km-mini-feature-card__media"><img class="km-mini-feature-card__image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <span class="km-mini-feature-card__label">/ Preset</span>
    <h3 class="km-mini-feature-card__title">Classic Negative</h3>
    <p class="km-mini-feature-card__text">A warm, gentle film-style recipe pack.</p>
    <span class="km-mini-feature-card__foot">
      <span class="km-mini-feature-card__price">£24</span>
      <span class="km-mini-feature-card__cta">View <span class="km-mini-feature-card__cta-arrow">→</span></span>
    </span>
  </article>
  <article class="km-mini-feature-card">
    <span class="km-mini-feature-card__label">/ Mentoring</span>
    <h3 class="km-mini-feature-card__title">Power Hour</h3>
    <p class="km-mini-feature-card__text">One focused call on whatever's stuck.</p>
    <span class="km-mini-feature-card__foot">
      <span class="km-mini-feature-card__price">£150</span>
      <span class="km-mini-feature-card__cta">View <span class="km-mini-feature-card__cta-arrow">→</span></span>
    </span>
  </article>
</div>

Principles Cards

Reusable editorial principle / process card grid.

click to collapse

.km-principles-grid
.km-principles-grid--1
.km-principles-grid--2
.km-principles-grid--3
.km-principles-grid--4
.km-principles-card
.km-principles-card__num
.km-principles-card__title
.km-principles-card__text

/ 01

See better

Train your eye to read a room before lifting the camera.

/ 02

Work quietly

Be present without becoming part of the day.

/ 03

Edit with care

Tell the truth of the day, not the busiest version of it.

Copy-paste markup

<div class="km-principles-grid km-principles-grid--3">
  <article class="km-principles-card">
    <span class="km-principles-card__num">/ 01</span>
    <h3 class="km-principles-card__title">See <em>better</em></h3>
    <p class="km-principles-card__text">Train your eye to read a room before lifting the camera.</p>
  </article>
  <article class="km-principles-card">
    <span class="km-principles-card__num">/ 02</span>
    <h3 class="km-principles-card__title">Work <em>quietly</em></h3>
    <p class="km-principles-card__text">Be present without becoming part of the day.</p>
  </article>
  <article class="km-principles-card">
    <span class="km-principles-card__num">/ 03</span>
    <h3 class="km-principles-card__title">Edit with <em>care</em></h3>
    <p class="km-principles-card__text">Tell the truth of the day, not the busiest version of it.</p>
  </article>
</div>

Journal / Latest Posts Grid

Latest posts grid with optional lead article and thin editorial borders.

click to collapse

.km-journal-grid
.km-journal-grid--lead-3
.km-journal-grid--lead-4
.km-journal-grid--equal-2
.km-journal-grid--equal-3
.km-journal-grid--equal-4
.km-journal-card
.km-journal-card--lead
.km-journal-card__frame
.km-journal-card__body
.km-journal-card__cat
.km-journal-card__title
.km-journal-card__text
.km-journal-card__meta

Family photography · Cotswolds

A quiet morning at the kitchen table

A small family, two cups of coffee, and the kind of light that makes you grateful you brought a camera.

Weddings

Late-summer wedding in Bath

A short excerpt about a recent wedding day.

Portraits

Actor headshots, plainly done

A short excerpt about a recent headshot session.

Copy-paste markup

<div class="km-journal-grid km-journal-grid--lead-3">
  <a class="km-journal-card km-journal-card--lead" href="#">
    <div class="km-journal-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-journal-card__body">
      <div class="km-journal-card__cat">Family photography · Cotswolds</div>
      <h3 class="km-journal-card__title">A quiet morning at the kitchen table</h3>
      <p class="km-journal-card__text">A small family, two cups of coffee, and the kind of light that makes you grateful you brought a camera.</p>
      <div class="km-journal-card__meta">Read more →</div>
    </div>
  </a>
  <a class="km-journal-card" href="#">
    <div class="km-journal-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-journal-card__body">
      <div class="km-journal-card__cat">Weddings</div>
      <h3 class="km-journal-card__title">Late-summer wedding in Bath</h3>
      <p class="km-journal-card__text">A short excerpt about a recent wedding day.</p>
      <div class="km-journal-card__meta">Read more →</div>
    </div>
  </a>
  <a class="km-journal-card" href="#">
    <div class="km-journal-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-journal-card__body">
      <div class="km-journal-card__cat">Portraits</div>
      <h3 class="km-journal-card__title">Actor headshots, plainly done</h3>
      <p class="km-journal-card__text">A short excerpt about a recent headshot session.</p>
      <div class="km-journal-card__meta">Read more →</div>
    </div>
  </a>
</div>

Featured Cards

Reusable featured products / offers grid. Lead + supporting card layouts, plus equal layouts. White and paper card variants.

click to collapse

.km-featured-grid
.km-featured-grid--white
.km-featured-grid--paper
.km-featured-grid--paper-soft
.km-featured-grid--3
.km-featured-grid--4
.km-featured-grid--equal-2
.km-featured-grid--equal-3
.km-featured-grid--equal-4
.km-featured-card
.km-featured-card--lead
.km-featured-card__frame
.km-featured-card__pin
.km-featured-card__body
.km-featured-card__cat
.km-featured-card__title
.km-featured-card__text
.km-featured-card__foot
.km-featured-card__price
.km-featured-card__cta
+1 more

/ Course

Documentary workflow

Edit a wedding from start to finish in a single sitting.

£100 one-time View →

Bestseller

/ Preset pack

Classic Negative

A warm film-style recipe for Lightroom and Capture One.

£24 View →

/ Mentoring

Power Hour

One focused call on whatever's stuck.

£150 Book →

Copy-paste markup

<div class="km-featured-grid km-featured-grid--paper km-featured-grid--equal-3">
  <a class="km-featured-card" href="#">
    <div class="km-featured-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-featured-card__body">
      <span class="km-featured-card__cat">/ Course</span>
      <h3 class="km-featured-card__title">Documentary workflow</h3>
      <p class="km-featured-card__text">Edit a wedding from start to finish in a single sitting.</p>
      <div class="km-featured-card__foot">
        <span class="km-featured-card__price">£100 <small>one-time</small></span>
        <span class="km-featured-card__cta">View <span class="km-featured-card__cta-arrow">→</span></span>
      </div>
    </div>
  </a>
  <a class="km-featured-card" href="#">
    <div class="km-featured-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="">
      <span class="km-featured-card__pin">Bestseller</span>
    </div>
    <div class="km-featured-card__body">
      <span class="km-featured-card__cat">/ Preset pack</span>
      <h3 class="km-featured-card__title">Classic Negative</h3>
      <p class="km-featured-card__text">A warm film-style recipe for Lightroom and Capture One.</p>
      <div class="km-featured-card__foot">
        <span class="km-featured-card__price">£24</span>
        <span class="km-featured-card__cta">View <span class="km-featured-card__cta-arrow">→</span></span>
      </div>
    </div>
  </a>
  <a class="km-featured-card" href="#">
    <div class="km-featured-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-featured-card__body">
      <span class="km-featured-card__cat">/ Mentoring</span>
      <h3 class="km-featured-card__title">Power Hour</h3>
      <p class="km-featured-card__text">One focused call on whatever's stuck.</p>
      <div class="km-featured-card__foot">
        <span class="km-featured-card__price">£150</span>
        <span class="km-featured-card__cta">Book <span class="km-featured-card__cta-arrow">→</span></span>
      </div>
    </div>
  </a>
</div>

Router Card Grid (3-up)

Three-column router cards with portrait 3:4 image frames.

click to collapse

.km-router-grid
.km-router-card
.km-router-card__frame
.km-router-card__body
.km-router-card__num
.km-router-card__title
.km-router-card__text
.km-explore-link
.km-explore-link__arrow

/ 01

Weddings portfolio

A documentary approach to wedding days.

Explore →

/ 02

Family sessions

Honest, natural family photography.

Explore →

/ 03

For photographers

Courses, mentoring and presets.

Explore →

Copy-paste markup

<div class="km-router-grid">
  <a class="km-router-card" href="#">
    <div class="km-router-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%201000'%3E%3Crect%20width='800'%20height='1000'%20fill='%23e4dbc4'/%3E%3Crect%20x='200'%20y='200'%20width='400'%20height='600'%20fill='%23b89968'%20opacity='.4'/%3E%3Ccircle%20cx='400'%20cy='360'%20r='90'%20fill='%235c4b2e'%20opacity='.45'/%3E%3Ctext%20x='50%25'%20y='90%25'%20font-family='Georgia'%20font-size='42'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-router-card__body">
      <span class="km-router-card__num">/ 01</span>
      <h3 class="km-router-card__title">Weddings <em>portfolio</em></h3>
      <p class="km-router-card__text">A documentary approach to wedding days.</p>
      <span class="km-explore-link">Explore <span class="km-explore-link__arrow">→</span></span>
    </div>
  </a>
  <a class="km-router-card" href="#">
    <div class="km-router-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%201000'%3E%3Crect%20width='800'%20height='1000'%20fill='%23e4dbc4'/%3E%3Crect%20x='200'%20y='200'%20width='400'%20height='600'%20fill='%23b89968'%20opacity='.4'/%3E%3Ccircle%20cx='400'%20cy='360'%20r='90'%20fill='%235c4b2e'%20opacity='.45'/%3E%3Ctext%20x='50%25'%20y='90%25'%20font-family='Georgia'%20font-size='42'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-router-card__body">
      <span class="km-router-card__num">/ 02</span>
      <h3 class="km-router-card__title">Family <em>sessions</em></h3>
      <p class="km-router-card__text">Honest, natural family photography.</p>
      <span class="km-explore-link">Explore <span class="km-explore-link__arrow">→</span></span>
    </div>
  </a>
  <a class="km-router-card" href="#">
    <div class="km-router-card__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%201000'%3E%3Crect%20width='800'%20height='1000'%20fill='%23e4dbc4'/%3E%3Crect%20x='200'%20y='200'%20width='400'%20height='600'%20fill='%23b89968'%20opacity='.4'/%3E%3Ccircle%20cx='400'%20cy='360'%20r='90'%20fill='%235c4b2e'%20opacity='.45'/%3E%3Ctext%20x='50%25'%20y='90%25'%20font-family='Georgia'%20font-size='42'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
    <div class="km-router-card__body">
      <span class="km-router-card__num">/ 03</span>
      <h3 class="km-router-card__title">For <em>photographers</em></h3>
      <p class="km-router-card__text">Courses, mentoring and presets.</p>
      <span class="km-explore-link">Explore <span class="km-explore-link__arrow">→</span></span>
    </div>
  </a>
</div>

Tile Grid (visual feature links)

Responsive tile / card layout with image, overlay and title.

click to collapse

.km-tiles
.km-tiles--3
.km-tiles--4
.km-tile
.km-tile__media
.km-tile__img
.km-tile__overlay
.km-tile__content
.km-tile__kicker
.km-tile__title
.km-tile__desc
.km-tile__meta
.km-tile__stat
.km-tile__cta
.km-tile-groups
.km-tile-group__title

Featured

Weddings

A documentary approach to wedding days.

From £3,200 Explore →

New

Family sessions

Honest, natural family photography.

From £450 Explore →

Copy-paste markup

<div class="km-tiles km-tiles--3">
  <a class="km-tile" href="#">
    <div class="km-tile__media">
      <img class="km-tile__img" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="">
      <div class="km-tile__overlay"></div>
      <div class="km-tile__content">
        <span class="km-tile__kicker">Featured</span>
        <h3 class="km-tile__title">Weddings</h3>
        <p class="km-tile__desc">A documentary approach to wedding days.</p>
        <div class="km-tile__meta">
          <span class="km-tile__stat">From £3,200</span>
          <span class="km-tile__cta">Explore →</span>
        </div>
      </div>
    </div>
  </a>
  <a class="km-tile" href="#">
    <div class="km-tile__media">
      <img class="km-tile__img" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="">
      <div class="km-tile__overlay"></div>
      <div class="km-tile__content">
        <span class="km-tile__kicker">New</span>
        <h3 class="km-tile__title">Family sessions</h3>
        <p class="km-tile__desc">Honest, natural family photography.</p>
        <div class="km-tile__meta">
          <span class="km-tile__stat">From £450</span>
          <span class="km-tile__cta">Explore →</span>
        </div>
      </div>
    </div>
  </a>
</div>

Lists

Headshot Prep Three-Column List

Three-column preparation checklist with column headings and arrow-led items.

click to collapse

.km-prep-list-grid
.km-prep-list-column
.km-prep-list-column__title
.km-course-arrow-list--prep
.km-course-arrow-list__item
.km-course-arrow-list__text
.km-course-arrow-list__lead

/ Clothing

Solid colours. They photograph beautifully and don't date.
Avoid loud patterns. They pull attention from your face.

/ Grooming

Get a haircut a week before. Not the day of.
Light makeup works best. Matte finish on the skin.

/ Day of

Arrive early. Settle, breathe, have a coffee.
Bring options. Two or three outfit changes.

Copy-paste markup

<div class="km-prep-list-grid">
  <div class="km-prep-list-column">
    <span class="km-prep-list-column__title">/ Clothing</span>
    <ul class="km-course-arrow-list km-course-arrow-list--prep">
      <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><span class="km-course-arrow-list__lead">Solid colours.</span> They photograph beautifully and don't date.</p></li>
      <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><span class="km-course-arrow-list__lead">Avoid loud patterns.</span> They pull attention from your face.</p></li>
    </ul>
  </div>
  <div class="km-prep-list-column">
    <span class="km-prep-list-column__title">/ Grooming</span>
    <ul class="km-course-arrow-list km-course-arrow-list--prep">
      <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><span class="km-course-arrow-list__lead">Get a haircut a week before.</span> Not the day of.</p></li>
      <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><span class="km-course-arrow-list__lead">Light makeup works best.</span> Matte finish on the skin.</p></li>
    </ul>
  </div>
  <div class="km-prep-list-column">
    <span class="km-prep-list-column__title">/ Day of</span>
    <ul class="km-course-arrow-list km-course-arrow-list--prep">
      <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><span class="km-course-arrow-list__lead">Arrive early.</span> Settle, breathe, have a coffee.</p></li>
      <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><span class="km-course-arrow-list__lead">Bring options.</span> Two or three outfit changes.</p></li>
    </ul>
  </div>
</div>

Featured Product Includes

Tick-list used inside product cards to summarise what's included.

click to collapse

.fp-includes

7+ hours of HD video
Lifetime access
Bonus Q&A session
Downloadable resources

Copy-paste markup

<ul class="fp-includes">
  <li>7+ hours of HD video</li>
  <li>Lifetime access</li>
  <li>Bonus Q&amp;A session</li>
  <li>Downloadable resources</li>
</ul>

Blog Intro Links

Vertical related-link list used on F16.click and other long-form resource pages.

click to collapse

.bi-links
.bi-link-label
.bi-link

Copy-paste markup

<div class="bi-links">
  <span class="bi-link-label">Related reading</span>
  <a class="bi-link" href="#">Choosing your first Fujifilm <span aria-hidden="true">→</span></a>
  <a class="bi-link" href="#">The case for prime lenses <span aria-hidden="true">→</span></a>
  <a class="bi-link" href="#">Recipes vs presets <span aria-hidden="true">→</span></a>
</div>

Pain Points List

Arrow-led list for problems, pain points and friction. Used on Power Hour / mentoring pages.

click to collapse

.pain-list
.pain-item
.pi-bullet
.pi-head
.pi-body

→

The pricing question.

You've been at the same rate for too long and the maths no longer works.
→

The plateau.

Your work is technically fine but you've stopped progressing.
→

The wrong clients.

You're booking work that drains you instead of energising you.

Copy-paste markup

<ul class="pain-list">
  <li class="pain-item">
    <span class="pi-bullet">→</span>
    <div>
      <h4 class="pi-head">The pricing question.</h4>
      <p class="pi-body">You've been at the same rate for too long and the maths no longer works.</p>
    </div>
  </li>
  <li class="pain-item">
    <span class="pi-bullet">→</span>
    <div>
      <h4 class="pi-head">The plateau.</h4>
      <p class="pi-body">Your work is technically fine but you've stopped progressing.</p>
    </div>
  </li>
  <li class="pain-item">
    <span class="pi-bullet">→</span>
    <div>
      <h4 class="pi-head">The wrong clients.</h4>
      <p class="pi-body">You're booking work that drains you instead of energising you.</p>
    </div>
  </li>
</ul>

Booking Includes Grid

Three-column inclusions grid with circular ticks — used on booking pages.

click to collapse

.km-booking-includes
.km-booking-includes__grid
.inc-item
.inc-check
.inc-text

✓

The session itself

90 minutes wherever feels right — your home, a favourite walk, somewhere meaningful.

✓

Fully edited gallery

Around 60–80 finished images delivered as digital downloads.

✓

Personal use licence

Print whatever you like, however you like, for as long as you like.

Copy-paste markup

<div class="km-booking-includes">
  <div class="km-booking-includes__grid">
    <div class="inc-item">
      <span class="inc-check">✓</span>
      <div class="inc-text">
        <h4>The session itself</h4>
        <p>90 minutes wherever feels right — your home, a favourite walk, somewhere meaningful.</p>
      </div>
    </div>
    <div class="inc-item">
      <span class="inc-check">✓</span>
      <div class="inc-text">
        <h4>Fully edited gallery</h4>
        <p>Around 60–80 finished images delivered as digital downloads.</p>
      </div>
    </div>
    <div class="inc-item">
      <span class="inc-check">✓</span>
      <div class="inc-text">
        <h4>Personal use licence</h4>
        <p>Print whatever you like, however you like, for as long as you like.</p>
      </div>
    </div>
  </div>
</div>

Two-Column Vertical Rule Tips

Small editorial tip grid with a left ochre rule on each tip.

click to collapse

.km-rule-tip-grid
.km-rule-tip
.km-rule-tip__title
.km-rule-tip__text

Come as you are

No need to dress everyone identically. A coordinated palette matters far more than matching outfits.

Let the kids be kids

The best frames almost always come from letting children lead. I'll keep up.

Copy-paste markup

<div class="km-rule-tip-grid">
  <div class="km-rule-tip">
    <h3 class="km-rule-tip__title">Come as you are</h3>
    <p class="km-rule-tip__text">No need to dress everyone identically. A coordinated palette matters far more than matching outfits.</p>
  </div>
  <div class="km-rule-tip">
    <h3 class="km-rule-tip__title">Let the kids be kids</h3>
    <p class="km-rule-tip__text">The best frames almost always come from letting children lead. I'll keep up.</p>
  </div>
</div>

Tick Row List

Simple bordered tick list. Has a dark modifier for use on dark backgrounds.

click to collapse

.km-tick-row-list
.km-tick-row-list__item
.km-tick-row-list--dark

Practical techniques you can apply immediately
Real-world examples from actual wedding days
A long bonus Q&A session
Lifetime access including future updates

Copy-paste markup

<ul class="km-tick-row-list">
  <li class="km-tick-row-list__item">Practical techniques you can apply immediately</li>
  <li class="km-tick-row-list__item">Real-world examples from actual wedding days</li>
  <li class="km-tick-row-list__item">A long bonus Q&amp;A session</li>
  <li class="km-tick-row-list__item">Lifetime access including future updates</li>
</ul>

Session Steps List

Numbered editorial process list for family / documentary pages.

click to collapse

.km-session-steps
.km-session-step
.km-session-step__num
.km-session-step__title
.km-session-step__text

/ 01

A relaxed chat

We catch up briefly so I understand what matters most about the day.
/ 02

The session

90 minutes of quietly observed photography in a place you love.
/ 03

Delivery

A fully edited gallery, ready within three weeks.

Copy-paste markup

<ol class="km-session-steps">
  <li class="km-session-step">
    <span class="km-session-step__num">/ 01</span>
    <div>
      <h3 class="km-session-step__title">A relaxed chat</h3>
      <p class="km-session-step__text">We catch up briefly so I understand what matters most about the day.</p>
    </div>
  </li>
  <li class="km-session-step">
    <span class="km-session-step__num">/ 02</span>
    <div>
      <h3 class="km-session-step__title">The session</h3>
      <p class="km-session-step__text">90 minutes of quietly observed photography in a place you love.</p>
    </div>
  </li>
  <li class="km-session-step">
    <span class="km-session-step__num">/ 03</span>
    <div>
      <h3 class="km-session-step__title">Delivery</h3>
      <p class="km-session-step__text">A fully edited gallery, ready within three weeks.</p>
    </div>
  </li>
</ol>

Personal Fact List

Single-column ruled list for About page facts.

click to collapse

.km-fact-list
.km-fact-list__item
.km-fact-list__text

Welsh. Grew up in Wales. Will inform you of this unprompted.
Judo 1st Dan. Actively trains and coaches.
Former rugby player. The back injury is a feature, not a bug.
Coffee snob. But polite about it.

Copy-paste markup

<ul class="km-fact-list">
  <li class="km-fact-list__item"><span class="km-fact-list__text"><strong>Welsh.</strong> Grew up in Wales. Will inform you of this unprompted.</span></li>
  <li class="km-fact-list__item"><span class="km-fact-list__text"><strong>Judo 1st Dan.</strong> Actively trains and coaches.</span></li>
  <li class="km-fact-list__item"><span class="km-fact-list__text"><strong>Former rugby player.</strong> The back injury is a feature, not a bug.</span></li>
  <li class="km-fact-list__item"><span class="km-fact-list__text"><strong>Coffee snob.</strong> But polite about it.</span></li>
</ul>

Recognition Regions (dark, 2-col)

Two-column awards / ambassadorship layout for dark sections.

click to collapse

.km-recognition-regions
.km-recognition-regions--2
.km-recognition-region
.km-recognition-region__head
.km-recognition-region__list
.km-recognition-region__item
.km-recognition-region__name
.km-recognition-region__loc

Awards & Recognition

First official Fujifilm Ambassador for Wedding Photography
Fifteen Gold Winning Images Across multiple competitions

Brand Ambassadorships

Fujifilm X-Photographer Since 2013
Digitalab UK professional print lab

Copy-paste markup

<div class="km-recognition-regions km-recognition-regions--2">
  <div class="km-recognition-region">
    <span class="km-recognition-region__head">Awards &amp; Recognition</span>
    <ul class="km-recognition-region__list">
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name">First official Fujifilm Ambassador for Wedding Photography</span>
      </li>
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name">Fifteen Gold Winning Images</span>
        <span class="km-recognition-region__loc">Across multiple competitions</span>
      </li>
    </ul>
  </div>
  <div class="km-recognition-region">
    <span class="km-recognition-region__head">Brand Ambassadorships</span>
    <ul class="km-recognition-region__list">
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name">Fujifilm X-Photographer</span>
        <span class="km-recognition-region__loc">Since 2013</span>
      </li>
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name">Digitalab</span>
        <span class="km-recognition-region__loc">UK professional print lab</span>
      </li>
    </ul>
  </div>
</div>

Recognition Media List (light, 3-col)

Three-column light-background list for interviews, articles, podcasts and video appearances.

click to collapse

.km-recognition-regions--media-light

Articles

Podcasts

The Candid Frame #253 2014

Video

Fujifilm — X-Photographer interview Fujifilm

Copy-paste markup

<div class="km-recognition-regions km-recognition-regions--media-light">
  <div class="km-recognition-region">
    <span class="km-recognition-region__head">Articles</span>
    <ul class="km-recognition-region__list">
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name"><a href="#">Fujifilm X Stories — X-Photographer's Interview</a></span>
        <span class="km-recognition-region__loc">2013</span>
      </li>
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name"><a href="#">Amateur Photographer — Interview</a></span>
        <span class="km-recognition-region__loc">2016</span>
      </li>
    </ul>
  </div>
  <div class="km-recognition-region">
    <span class="km-recognition-region__head">Podcasts</span>
    <ul class="km-recognition-region__list">
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name"><a href="#">The Candid Frame #253</a></span>
        <span class="km-recognition-region__loc">2014</span>
      </li>
    </ul>
  </div>
  <div class="km-recognition-region">
    <span class="km-recognition-region__head">Video</span>
    <ul class="km-recognition-region__list">
      <li class="km-recognition-region__item">
        <span class="km-recognition-region__name"><a href="#">Fujifilm — X-Photographer interview</a></span>
        <span class="km-recognition-region__loc">Fujifilm</span>
      </li>
    </ul>
  </div>
</div>

Course Included List

Two-column tick list for course inclusions / benefits.

click to collapse

.inc-list
.inc-list--tight
.inc-item
.inc-item__text

Practical techniques from real experience
Light · Composition · Moment as core principles
Bonus Q&A session
Lifetime access

Copy-paste markup

<ul class="inc-list">
  <li class="inc-item"><span class="inc-item__text"><strong>Practical techniques</strong> from real experience</span></li>
  <li class="inc-item"><span class="inc-item__text"><strong>Light · Composition · Moment</strong> as core principles</span></li>
  <li class="inc-item"><span class="inc-item__text">Bonus Q&amp;A session</span></li>
  <li class="inc-item"><span class="inc-item__text">Lifetime access</span></li>
</ul>

Course Arrow List

Arrow-led list for course audience / outcomes sections.

click to collapse

.km-course-arrow-list
.km-course-arrow-list__item
.km-course-arrow-list__text
.km-course-arrow-list__lead

For photographers wanting a more observational approach.
For wedding shooters who want stronger storytelling.
For anyone who wants to understand real moments better.

Copy-paste markup

<ul class="km-course-arrow-list">
  <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><strong>For photographers</strong> wanting a more observational approach.</p></li>
  <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><strong>For wedding shooters</strong> who want stronger storytelling.</p></li>
  <li class="km-course-arrow-list__item"><p class="km-course-arrow-list__text"><strong>For anyone</strong> who wants to understand real moments better.</p></li>
</ul>

Column Feature Grid

Five-column bordered feature strip for what's-included sections.

click to collapse

.km-column-feature-grid
.km-column-feature
.km-column-feature__num
.km-column-feature__title
.km-column-feature__text

/ 01

Full day coverage

Bridal prep through to the first dances.

/ 02

Edited gallery

Hand-edited, beautifully delivered.

/ 03

Print licence

Print whatever you like, however you like.

/ 04

Online gallery

Easy to share with family.

/ 05

Travel included

Within the UK as standard.

Copy-paste markup

<div class="km-column-feature-grid">
  <div class="km-column-feature">
    <span class="km-column-feature__num">/ 01</span>
    <h4 class="km-column-feature__title">Full day <em>coverage</em></h4>
    <p class="km-column-feature__text">Bridal prep through to the first dances.</p>
  </div>
  <div class="km-column-feature">
    <span class="km-column-feature__num">/ 02</span>
    <h4 class="km-column-feature__title">Edited <em>gallery</em></h4>
    <p class="km-column-feature__text">Hand-edited, beautifully delivered.</p>
  </div>
  <div class="km-column-feature">
    <span class="km-column-feature__num">/ 03</span>
    <h4 class="km-column-feature__title">Print <em>licence</em></h4>
    <p class="km-column-feature__text">Print whatever you like, however you like.</p>
  </div>
  <div class="km-column-feature">
    <span class="km-column-feature__num">/ 04</span>
    <h4 class="km-column-feature__title">Online <em>gallery</em></h4>
    <p class="km-column-feature__text">Easy to share with family.</p>
  </div>
  <div class="km-column-feature">
    <span class="km-column-feature__num">/ 05</span>
    <h4 class="km-column-feature__title">Travel <em>included</em></h4>
    <p class="km-column-feature__text">Within the UK as standard.</p>
  </div>
</div>

Numbered Feature List

Auto-numbered editorial list with title and supporting text per row.

click to collapse

.km-numbered-feature-list
.km-numbered-feature-list__item
.km-numbered-feature-list__content
.km-numbered-feature-list__title
.km-numbered-feature-list__text

A relaxed session.

Nothing awkward, nothing over-rehearsed.
Natural editing.

Temporary distractions can go. Your face stays yours.
Fast delivery.

Edited gallery within seven days.

Copy-paste markup

<ol class="km-numbered-feature-list">
  <li class="km-numbered-feature-list__item">
    <div class="km-numbered-feature-list__content">
      <h3 class="km-numbered-feature-list__title">A relaxed session.</h3>
      <p class="km-numbered-feature-list__text">Nothing awkward, nothing over-rehearsed.</p>
    </div>
  </li>
  <li class="km-numbered-feature-list__item">
    <div class="km-numbered-feature-list__content">
      <h3 class="km-numbered-feature-list__title">Natural editing.</h3>
      <p class="km-numbered-feature-list__text">Temporary distractions can go. Your face stays yours.</p>
    </div>
  </li>
  <li class="km-numbered-feature-list__item">
    <div class="km-numbered-feature-list__content">
      <h3 class="km-numbered-feature-list__title">Fast delivery.</h3>
      <p class="km-numbered-feature-list__text">Edited gallery within seven days.</p>
    </div>
  </li>
</ol>

Quotes & testimonials

Compact Centred Quote

Smaller centred testimonial quote block — useful as a lightweight inline pull quote.

click to collapse

.km-compact-quote
.km-compact-quote__inner
.km-compact-quote__mark
.km-compact-quote__text
.km-compact-quote__source

Kevin photographed our family the way we actually are — and that's exactly what we wanted.

— Client Name · Cotswolds

Copy-paste markup

<section class="km-compact-quote">
  <div class="km-compact-quote__inner">
    <span class="km-compact-quote__mark">"</span>
    <blockquote>
      <p class="km-compact-quote__text">Kevin photographed our family the way we actually are — and that's exactly what we wanted.</p>
    </blockquote>
    <span class="km-compact-quote__source">— Client Name · Cotswolds</span>
  </div>
</section>

Course Proof Quote

Small testimonial quote block for course landing pages.

click to collapse

.km-course-proof-quote
.km-course-proof-quote--compact
.km-course-proof-quote__text
.km-course-proof-quote__source

A brilliant course. Honest, practical and generous with detail.

— Student Name

Copy-paste markup

<figure class="km-course-proof-quote">
  <blockquote><p class="km-course-proof-quote__text">A brilliant course. Honest, practical and generous with detail.</p></blockquote>
  <figcaption class="km-course-proof-quote__source">— Student Name</figcaption>
</figure>

Ninja Statement Quote (dark)

Large dark editorial statement block for short standout quotes.

click to collapse

.km-ninja-statement
.km-ninja-statement--small
.km-ninja-statement__inner
.km-ninja-statement__eyebrow
.km-ninja-statement__word
.km-ninja-statement__support
.km-ninja-statement__source

Client feedback

Ninja.

"You were everywhere, but somehow invisible."

— Client Name

Copy-paste markup

<section class="km-ninja-statement km-ninja-statement--small">
  <div class="km-ninja-statement__inner">
    <p class="km-ninja-statement__eyebrow">Client feedback</p>
    <h2 class="km-ninja-statement__word">Ninja.</h2>
    <p class="km-ninja-statement__support">"You were everywhere, but somehow invisible."</p>
    <span class="km-ninja-statement__source">— Client Name</span>
  </div>
</section>

Long Testimonial Quote

Large left-aligned testimonial quote with source details.

click to collapse

.km-long-testimonial
.km-long-testimonial--narrow
.km-long-testimonial--small
.km-long-testimonial__text
.km-long-testimonial__source
.km-long-testimonial__name
.km-long-testimonial__link

The photographs are wonderful. Every time I look, I notice something different.

Client Name View the story →

Copy-paste markup

<figure class="km-long-testimonial km-long-testimonial--small">
  <blockquote><p class="km-long-testimonial__text">The photographs are wonderful. Every time I look, I notice something different.</p></blockquote>
  <figcaption class="km-long-testimonial__source">
    <span class="km-long-testimonial__name">Client Name</span>
    <a class="km-long-testimonial__link" href="#">View the story →</a>
  </figcaption>
</figure>

Testimonial Hero Quote

Large centred light-section testimonial quote.

click to collapse

.km-testimonial-hero
.km-testimonial-hero--small
.km-testimonial-hero__inner
.km-testimonial-hero__mark
.km-testimonial-hero__text
.km-testimonial-hero__source
.km-testimonial-hero__name
.km-testimonial-hero__link

The photos are just wonderful.

Client Name Family session client

Copy-paste markup

<figure class="km-testimonial-hero km-testimonial-hero--small">
  <div class="km-testimonial-hero__inner">
    <span class="km-testimonial-hero__mark">"</span>
    <blockquote><p class="km-testimonial-hero__text">The photos are just wonderful.</p></blockquote>
    <figcaption class="km-testimonial-hero__source">
      <span class="km-testimonial-hero__name">Client Name</span>
      <a class="km-testimonial-hero__link" href="#">Family session client</a>
    </figcaption>
  </div>
</figure>

Single Editorial Quote

Large light-section quote with left rule and attribution. Has centred variant.

click to collapse

.km-single-quote
.km-single-quote--small
.km-single-quote--center

I often describe my work, quite simply, as photographing people being people.

— Kevin Mullins

Copy-paste markup

<figure class="km-single-quote km-single-quote--small">
  <blockquote>
    I often describe my work, quite simply, as photographing people being people.
  </blockquote>
  <figcaption>— Kevin Mullins</figcaption>
</figure>

Framed Dark Quote

Transparent framed quote for dark editorial sections. Has filled variant for light sections.

click to collapse

.km-framed-quote
.km-framed-quote--small
.km-framed-quote--filled
.km-framed-quote--course-small
.km-framed-quote__mark
.km-framed-quote__text
.km-framed-quote__source
.km-framed-quote__name
.km-framed-quote__role

A short framed quote for dark sections.

Client Name Family session client

Copy-paste markup

<figure class="km-framed-quote km-framed-quote--small">
  <span class="km-framed-quote__mark">"</span>
  <blockquote><p class="km-framed-quote__text">A short framed quote for dark sections.</p></blockquote>
  <figcaption class="km-framed-quote__source">
    <span class="km-framed-quote__name">Client Name</span>
    <span class="km-framed-quote__role">Family session client</span>
  </figcaption>
</figure>

Pull Quote

Small editorial pull quote with left rule.

click to collapse

.km-pull-quote
.km-pull-quote--small
.km-pull-quote--wide
.km-pull-quote__text

A short editorial pull quote with a left rule.

Copy-paste markup

<figure class="km-pull-quote km-pull-quote--small">
  <p class="km-pull-quote__text">A short editorial pull quote with a left rule.</p>
</figure>

Editorial Pullquote (with drop cap)

Large but controlled quote block with decorative drop cap.

click to collapse

.km-editorial-pullquote
.km-editorial-pullquote__label
.km-editorial-pullquote__text
.km-editorial-pullquote__drop
.km-editorial-pullquote__support
.km-editorial-pullquote__source

In Kevin's words

Ioften describe my work as photographing people being people.

A supporting sentence can sit underneath if required.

— Kevin Mullins

Copy-paste markup

<figure class="km-editorial-pullquote">
  <span class="km-editorial-pullquote__label">In Kevin's words</span>
  <blockquote>
    <p class="km-editorial-pullquote__text"><span class="km-editorial-pullquote__drop">I</span>often describe my work as photographing people being people.</p>
  </blockquote>
  <p class="km-editorial-pullquote__support">A supporting sentence can sit underneath if required.</p>
  <figcaption class="km-editorial-pullquote__source">— Kevin Mullins</figcaption>
</figure>

Feature Quote (dark band)

Full-width dark testimonial band — soft radial glow and centred quote.

click to collapse

.km-feature-quote
.km-feature-quote__inner
.km-feature-quote__mark
.km-feature-quote__text
.km-feature-quote__source
.km-feature-quote__name
.km-feature-quote__role

Kevin photographed our wedding so quietly we forgot he was there — and then the gallery arrived and we cried.

Client Name Wiltshire wedding · 2024

Copy-paste markup

<section class="km-feature-quote">
  <div class="km-feature-quote__inner">
    <span class="km-feature-quote__mark">"</span>
    <blockquote>
      <p class="km-feature-quote__text">Kevin photographed our wedding so quietly we forgot he was there — and then the gallery arrived and we cried.</p>
    </blockquote>
    <figcaption class="km-feature-quote__source">
      <span class="km-feature-quote__name">Client Name</span>
      <span class="km-feature-quote__role">Wiltshire wedding · 2024</span>
    </figcaption>
  </div>
</section>

Featured Testimonials

Editorial quote grid for 1–4 short client quotes with attribution.

click to collapse

.km-testimonials-grid
.km-testimonials-grid--1
.km-testimonials-grid--2
.km-testimonials-grid--3
.km-testimonials-grid--4
.km-testimonials-grid--tight
.km-testimonial
.km-testimonial__quote
.km-testimonial__by
.km-testimonial__name
.km-testimonial__role

Kevin photographed our family the way we actually are.

Client Name Cotswolds family session

A documentary photographer in the truest sense.

Client Name Wiltshire wedding

Copy-paste markup

<div class="km-testimonials-grid km-testimonials-grid--2">
  <div class="km-testimonial">
    <blockquote class="km-testimonial__quote">Kevin photographed our family the way we actually are.</blockquote>
    <div class="km-testimonial__by">
      <span class="km-testimonial__name">Client Name</span>
      <span class="km-testimonial__role">Cotswolds family session</span>
    </div>
  </div>
  <div class="km-testimonial">
    <blockquote class="km-testimonial__quote">A documentary photographer in the truest sense.</blockquote>
    <div class="km-testimonial__by">
      <span class="km-testimonial__name">Client Name</span>
      <span class="km-testimonial__role">Wiltshire wedding</span>
    </div>
  </div>
</div>

Pricing

Course Pricing Card (single variant)

Single-card pricing layout for a course or product with Squarespace variant toggle. Includes an optional flexible-payment block.

click to collapse

.km-pricing
.km-pricing__card
.km-pricing__eyebrow
.km-pricing__price
.km-pricing__currency
.km-pricing__amount
.km-pricing__period
.km-pricing__terms
.km-pricing__rule
.km-pricing__body
.km-pricing__instruction
.km-pricing__flex

One-time investment

£ 100

Lifetime access · all future updates

A practical course built from years of real-world wedding photography. Watch at your own pace, return any time.

Choose your option below ↓

Flexible payment Split into 3 monthly instalments at checkout.

Copy-paste markup

<div class="km-pricing">
  <div class="km-pricing__card">
    <div class="km-pricing__eyebrow">One-time investment</div>
    <div class="km-pricing__price">
      <span class="km-pricing__currency">£</span>
      <span class="km-pricing__amount">100</span>
    </div>
    <div class="km-pricing__terms">Lifetime access · all future updates</div>
    <hr class="km-pricing__rule">
    <p class="km-pricing__body">A practical course built from years of real-world wedding photography. Watch at your own pace, return any time.</p>
    <div class="km-pricing__instruction">Choose your option below <span class="km-pricing__instruction-arrow">↓</span></div>
    <div class="km-pricing__flex">
      <span class="km-pricing__flex-label">Flexible payment</span>
      <span class="km-pricing__flex-detail">Split into 3 monthly instalments at checkout.</span>
    </div>
  </div>
</div>

Headshot Hero Price (dark)

Inline editorial price for dark hero sections (e.g. Wiltshire headshots).

click to collapse

.hh-price
.hh-price-label
.hh-price-num
.hh-price-sym

From £250

Copy-paste markup

<div class="hh-price">
  <span class="hh-price-label">From</span>
  <span class="hh-price-num"><span class="hh-price-sym">£</span>250</span>
</div>

Option Cards (Power Hour / mentoring)

Two-column pricing / session option cards used on Power Hour and mentoring booking sections.

click to collapse

.km-option-cards
.option-card
.option-card.featured
.oc-tag
.oc-name
.oc-price
.oc-includes
.oci
.oc-note

/ Option one

Single Power Hour

£150 / session

60 minutes of focused mentoring
Pre-call brief so we use the time well
Follow-up notes by email

Ideal for a single pressing question.

/ Best value

Three-session bundle

£400 / three sessions

Three 60-minute sessions
Spaced over six weeks
Email support between calls

Better suited to ongoing growth.

Copy-paste markup

<div class="km-option-cards">
  <div class="option-card">
    <span class="oc-tag">/ Option one</span>
    <h3 class="oc-name">Single <em>Power Hour</em></h3>
    <div class="oc-price">£150 <small>/ session</small></div>
    <ul class="oc-includes">
      <li class="oci">60 minutes of focused mentoring</li>
      <li class="oci">Pre-call brief so we use the time well</li>
      <li class="oci">Follow-up notes by email</li>
    </ul>
    <p class="oc-note">Ideal for a single pressing question.</p>
  </div>
  <div class="option-card featured">
    <span class="oc-tag">/ Best value</span>
    <h3 class="oc-name">Three-session <em>bundle</em></h3>
    <div class="oc-price">£400 <small>/ three sessions</small></div>
    <ul class="oc-includes">
      <li class="oci">Three 60-minute sessions</li>
      <li class="oci">Spaced over six weeks</li>
      <li class="oci">Email support between calls</li>
    </ul>
    <p class="oc-note">Better suited to ongoing growth.</p>
  </div>
</div>

Hero Price Block

Simple From £X price block for hero sections and simple pricing callouts.

click to collapse

.hero-price-block
.price-from
.price-num

From £450 + VAT

Copy-paste markup

<div class="hero-price-block">
  <span class="price-from">From</span>
  <span class="price-num">£450 <small>+ VAT</small></span>
</div>

Portrait Session Price

Very large editorial price for portrait session and family-year sections.

click to collapse

.ps-price
.ps-price-block
.ps-price-block--light
.ps-label
.ps-price-note

Investment

£450 + VAT

Includes the session, edited gallery and a 30-minute viewing.

Copy-paste markup

<div class="ps-price-block">
  <span class="ps-label">Investment</span>
  <div class="ps-price">£450 <small>+ VAT</small></div>
  <p class="ps-price-note">Includes the session, edited gallery and a 30-minute viewing.</p>
</div>

Family Year Option Cards (dark)

Compact dark pricing option cards for Family Year packages.

click to collapse

.fy-opt-grid
.fy-opt-grid--1
.fy-opt-grid--2
.fy-opt-grid--3
.fy-opt-grid--4
.fy-opt
.fy-opt__kicker
.fy-opt__title
.fy-opt__price
.fy-opt__currency
.fy-opt__amount
.fy-opt__meta

/ Option one

Three sessions

£ 1,200

Saving £150 vs individual sessions across the year.

/ Option two

Sessions + album

£ 1,950

Includes a 12x12 linen-bound album.

/ Custom

Designed to fit

£ POA

Build a plan around your year.

Copy-paste markup

<div class="fy-opt-grid fy-opt-grid--3">
  <div class="fy-opt">
    <span class="fy-opt__kicker">/ Option one</span>
    <h3 class="fy-opt__title">Three sessions</h3>
    <div class="fy-opt__price">
      <span class="fy-opt__currency">£</span>
      <span class="fy-opt__amount">1,200</span>
    </div>
    <p class="fy-opt__meta"><strong>Saving £150</strong> vs individual sessions across the year.</p>
  </div>
  <div class="fy-opt">
    <span class="fy-opt__kicker">/ Option two</span>
    <h3 class="fy-opt__title">Sessions + album</h3>
    <div class="fy-opt__price">
      <span class="fy-opt__currency">£</span>
      <span class="fy-opt__amount">1,950</span>
    </div>
    <p class="fy-opt__meta"><strong>Includes</strong> a 12x12 linen-bound album.</p>
  </div>
  <div class="fy-opt">
    <span class="fy-opt__kicker">/ Custom</span>
    <h3 class="fy-opt__title">Designed to fit</h3>
    <div class="fy-opt__price">
      <span class="fy-opt__currency">£</span>
      <span class="fy-opt__amount">POA</span>
    </div>
    <p class="fy-opt__meta">Build a plan around <strong>your year</strong>.</p>
  </div>
</div>

Session Price Cards

Modifier for family / session package cards with two-column kicker+price / description layout.

click to collapse

.price-card-grid
.price-card-grid--1
.price-card-grid--3
.price-card-grid--4
.price-card.price-card--session
.price-card__kicker
.price-card__title
.price-card__price
.price-card__currency
.price-card__amount
.price-card__text

/ Family session

Documentary family session

£ 450

A 90-minute session at home, on a walk, or somewhere meaningful — followed by a fully edited gallery delivered within three weeks.

Copy-paste markup

<div class="price-card-grid price-card-grid--1">
  <article class="price-card price-card--session">
    <span class="price-card__kicker">/ Family session</span>
    <h3 class="price-card__title">Documentary family <em>session</em></h3>
    <div class="price-card__price">
      <span class="price-card__currency">£</span>
      <span class="price-card__amount">450</span>
    </div>
    <p class="price-card__text">A 90-minute session at home, on a walk, or somewhere meaningful — followed by a fully edited gallery delivered within three weeks.</p>
  </article>
</div>

Course Price Cards

Two-column course pricing cards with optional featured variant.

click to collapse

.price-card-grid
.price-card
.price-card--featured
.price-card__badge
.price-card__label
.price-card__price
.price-card__currency
.price-card__amount
.price-card__suffix
.price-card__sub
.price-card__rule
.price-card__text
.price-card__action
.price-card__button

Single payment

£100

One-time payment

Lifetime access to the course and all future updates.

Buy now →

Popular Payment plan

£35/mo

For 3 months

A simple split-payment option for the same access.

Start now →

Copy-paste markup

<div class="price-card-grid">
  <article class="price-card">
    <span class="price-card__label">Single payment</span>
    <div class="price-card__price">
      <span class="price-card__currency">£</span><span class="price-card__amount">100</span>
    </div>
    <p class="price-card__sub">One-time payment</p>
    <span class="price-card__rule"></span>
    <p class="price-card__text">Lifetime access to the course and all future updates.</p>
    <div class="price-card__action"><a class="price-card__button" href="#">Buy now →</a></div>
  </article>
  <article class="price-card price-card--featured">
    <span class="price-card__badge">Popular</span>
    <span class="price-card__label">Payment plan</span>
    <div class="price-card__price">
      <span class="price-card__currency">£</span><span class="price-card__amount">35</span><span class="price-card__suffix">/mo</span>
    </div>
    <p class="price-card__sub">For 3 months</p>
    <span class="price-card__rule"></span>
    <p class="price-card__text">A simple split-payment option for the same access.</p>
    <div class="price-card__action"><a class="price-card__button" href="#">Start now →</a></div>
  </article>
</div>

Investment Price Block

Large editorial price centrepiece for fees / pricing pages.

click to collapse

.km-investment-block
.km-investment-block__inner
.km-investment-block__eyebrow
.km-investment-block__from
.km-investment-block__figure
.km-investment-block__divider
.km-investment-block__text
.km-investment-block__action

— Investment — Weddings from £3,200

Most full wedding days sit around £3,800. I'll send a proper breakdown once I know your date.

Copy-paste markup

<section class="km-investment-block">
  <div class="km-investment-block__inner">
    <span class="km-investment-block__eyebrow">— Investment —</span>
    <span class="km-investment-block__from">Weddings from</span>
    <span class="km-investment-block__figure">£3,200</span>
    <span class="km-investment-block__divider"></span>
    <p class="km-investment-block__text sqsrte-large"><strong>Most full wedding days</strong> sit around £3,800. I'll send a proper breakdown once I know your date.</p>
  </div>
</section>

Blocks & callouts

KM Author Block (Editorial Byline)

Fully custom blog author block — editorial byline with photo, name, role, bio and a More from Kevin CTA strip.

click to collapse

.kma-block
.kma-eyebrow
.kma-head
.kma-photo
.kma-photo-inner
.kma-byline
.kma-name
.kma-role
.kma-bio
.kma-more
.kma-more-label
.kma-more-links

About the author

Kevin Mullins

Wedding, family & portrait photographer

A short editorial bio paragraph goes here, written in a relaxed and personable voice. Read more about Kevin.

More from Kevin The blog· Courses· Newsletter

Copy-paste markup

<div class="kma-block">
  <span class="kma-eyebrow">About the author</span>
  <div class="kma-head">
    <div class="kma-photo"><div class="kma-photo-inner"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="Kevin Mullins"></div></div>
    <div class="kma-byline">
      <div class="kma-name">Kevin Mullins</div>
      <div class="kma-role">Wedding, family &amp; portrait photographer</div>
    </div>
  </div>
  <div class="kma-bio">
    <p>A short editorial bio paragraph goes here, written in a relaxed and personable voice. <a href="#">Read more about Kevin</a>.</p>
  </div>
  <div class="kma-more">
    <span class="kma-more-label">More from Kevin</span>
    <span class="kma-more-links">
      <a href="#">The blog</a><span class="kma-more-sep">·</span>
      <a href="#">Courses</a><span class="kma-more-sep">·</span>
      <a href="#">Newsletter</a>
    </span>
  </div>
</div>

Portfolio Section Intro

Large numbered section intro for portfolio chapters. Pair number, title and CTA on a single row with a bottom rule.

click to collapse

.portfolio-section
.ps-intro
.ps-num
.ps-label
.ps-name
.ps-desc
.ps-cta

Chapter one

Documentary weddings

Real moments from real wedding days, photographed quietly and honestly.

View work

Copy-paste markup

<section class="portfolio-section">
  <div class="ps-intro">
    <span class="ps-num">01</span>
    <div>
      <span class="ps-label">Chapter one</span>
      <h2 class="ps-name">Documentary <em>weddings</em></h2>
      <p class="ps-desc">Real moments from real wedding days, photographed quietly and honestly.</p>
    </div>
    <a class="ps-cta" href="#">View work <span aria-hidden="true">→</span></a>
  </div>
</section>

Watermark Pledge

Small italic editorial pledge for headshot pages — clean, no watermarks, full delivery.

click to collapse

.watermark-pledge

Watermark-free pledge. Every image is delivered clean — no logos, no watermarks, no signatures. The work should look like yours.

Copy-paste markup

<div class="watermark-pledge">
  <strong>Watermark-free pledge.</strong> Every image is delivered clean — no logos, no watermarks, no signatures. The work should look like yours.
</div>

Agents Note

Quiet bordered note for agents, casting directors and similar professional audiences.

click to collapse

.agents-note
.an-label
.an-text

For agents

Spotlight-ready sizes, retouched cleanly, delivered the same day where possible. Get in touch directly if you need a fast turnaround.

Copy-paste markup

<div class="agents-note">
  <span class="an-label">For agents</span>
  <p class="an-text">Spotlight-ready sizes, retouched cleanly, delivered the same day where possible. Get in touch directly if you need a fast turnaround.</p>
</div>

Developer Note

Quiet panel with a left-rule used for technical notes inside long-form pages.

click to collapse

.dev-note
.dn-label
.dn-text

A note from Kevin

These recipes are tuned for Fujifilm X-Trans IV bodies. Results on older sensors may vary slightly.

If you want the closest match to my own files, shoot at base ISO with the recipe's exposure compensation applied.

Copy-paste markup

<div class="dev-note">
  <span class="dn-label">A note from Kevin</span>
  <div class="dn-text">
    <p>These recipes are tuned for Fujifilm X-Trans IV bodies. Results on older sensors may vary slightly.</p>
    <p>If you want the closest match to my own files, shoot at base ISO with the recipe's exposure compensation applied.</p>
  </div>
</div>

Presets Bridge

Two-column bridge block linking from recipes to presets (or any related downstream page).

click to collapse

.presets-bridge
.pb-text
.pb-label

/ Looking for Lightroom?

The Lightroom preset versions

I've also built equivalent presets for Lightroom Classic, ACR and Capture One.

View presets →

Copy-paste markup

<div class="presets-bridge">
  <div class="pb-text">
    <span class="pb-label">/ Looking for Lightroom?</span>
    <h3>The <em>Lightroom preset</em> versions</h3>
    <p>I've also built equivalent presets for Lightroom Classic, ACR and Capture One.</p>
  </div>
  <a class="km-explore-link" href="#">View presets <span class="km-explore-link__arrow">→</span></a>
</div>

Contact Details & Socials (dark)

Editorial contact metadata with monospace detail rows and uppercase social links. Designed for dark contact sections.

click to collapse

.cs-details
.cs-detail
.cs-socials
.cs-social

kevin@example.com

Malmesbury · Wiltshire · UK

Copy-paste markup

<div>
  <div class="cs-socials">
    <a class="cs-social" href="#">Instagram</a>
    <a class="cs-social" href="#">YouTube</a>
    <a class="cs-social" href="#">Newsletter</a>
  </div>
  <div class="cs-details">
    <div class="cs-detail"><a href="mailto:#">kevin@example.com</a></div>
    <div class="cs-detail">Malmesbury · Wiltshire · UK</div>
  </div>
</div>

Blog Header Stats

Small horizontal stats strip used in long-form resource page headers.

click to collapse

.bh-stats
.bh-stat
.bh-stat-num
.bh-stat-label
.bh-stat-div

240+ Articles published

12 Years writing

£0 To read

Copy-paste markup

<div class="bh-stats">
  <div class="bh-stat">
    <span class="bh-stat-num">240+</span>
    <span class="bh-stat-label">Articles published</span>
  </div>
  <span class="bh-stat-div"></span>
  <div class="bh-stat">
    <span class="bh-stat-num">12</span>
    <span class="bh-stat-label">Years writing</span>
  </div>
  <span class="bh-stat-div"></span>
  <div class="bh-stat">
    <span class="bh-stat-num">£0</span>
    <span class="bh-stat-label">To read</span>
  </div>
</div>

Print Book Card

External print-book callout (Peachpit etc) for the books page.

click to collapse

.print-card
.pc-cover
.pc-cover-placeholder
.pc-publisher
.pc-title
.pc-desc
.pc-link-wrap
.pc-amazon
.pc-non-affiliate

Book cover

Peachpit Press · 2018

Wedding Storytellers: The Art & Soul of Wedding Photography

A book of conversations and images from twenty wedding photographers, including a chapter on a documentary approach.

Buy on Amazon

Non-affiliate link — I don't earn anything if you buy here.

Copy-paste markup

<div class="print-card">
  <div class="pc-cover-placeholder">
    <span>Book cover</span>
  </div>
  <div>
    <span class="pc-publisher">Peachpit Press · 2018</span>
    <h3 class="pc-title">Wedding Storytellers: <em>The Art &amp; Soul of Wedding Photography</em></h3>
    <p class="pc-desc">A book of conversations and images from twenty wedding photographers, including a chapter on a documentary approach.</p>
    <div class="pc-link-wrap">
      <a class="pc-amazon" href="#">Buy on Amazon <span aria-hidden="true">↗</span></a>
      <p class="pc-non-affiliate">Non-affiliate link — I don't earn anything if you buy here.</p>
    </div>
  </div>
</div>

Walk Card

Featured street-photography walk card with image, stats grid, phone note and CTA button.

click to collapse

.walk-card
.wc-image
.wc-body
.wc-badge
.wc-title
.wc-desc
.wc-stats
.wcs-item
.wcs-label
.wcs-val
.wc-phone
.wcp-icon
.wcp-text
.wc-cta
.wc-button

Featured walk

The Bath photo walk

Two hours through the lanes and crescents of Bath, working light and composition together.

Length2 hours

Group sizeMax 6

Skill levelAny

Price£95

✱

Bring any camera. Phones welcome. The thinking matters more than the kit.

Book a walk →

Copy-paste markup

<div class="walk-card">
  <div class="wc-image"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="Street walk preview"></div>
  <div class="wc-body">
    <span class="wc-badge">Featured walk</span>
    <h3 class="wc-title">The <em>Bath</em> photo walk</h3>
    <p class="wc-desc">Two hours through the lanes and crescents of Bath, working light and composition together.</p>
    <div class="wc-stats">
      <div class="wcs-item"><span class="wcs-label">Length</span><span class="wcs-val">2 hours</span></div>
      <div class="wcs-item"><span class="wcs-label">Group size</span><span class="wcs-val">Max 6</span></div>
      <div class="wcs-item"><span class="wcs-label">Skill level</span><span class="wcs-val">Any</span></div>
      <div class="wcs-item"><span class="wcs-label">Price</span><span class="wcs-val">£95</span></div>
    </div>
    <div class="wc-phone">
      <span class="wcp-icon">✱</span>
      <p class="wcp-text"><strong>Bring any camera.</strong> Phones welcome. The thinking matters more than the kit.</p>
    </div>
    <div class="wc-cta">
      <a class="wc-button" href="#">Book a walk <span>→</span></a>
    </div>
  </div>
</div>

Power Hour Feature Block

Large featured mentoring callout — text panel on the left, options panel on the right.

click to collapse

.power-hour
.ph-content
.ph-tag
.ph-title
.ph-deck
.ph-topics
.ph-topic
.ph-cta
.ph-button
.ph-aside
.pha-label
.pha-option
.pha-name
.pha-price
.pha-note
.pha-extra

/ Mentoring

The Power Hour

Sixty focused minutes on whatever is stuck. Honest advice from someone who's been doing this for a long time.

Portfolio review
Pricing & packaging
Workflow & editing
Marketing & positioning

Book a Power Hour → Read more →

Session options

Single session

£150 / hour

A one-off chat.

Three sessions

£400 / three

Spaced over six weeks.

All sessions held on Zoom, recorded and yours to keep.

Copy-paste markup

<section class="power-hour">
  <div class="ph-content">
    <span class="ph-tag">/ Mentoring</span>
    <h2 class="ph-title">The <em>Power Hour</em></h2>
    <p class="ph-deck">Sixty focused minutes on whatever is stuck. Honest advice from someone who's been doing this for a long time.</p>
    <ul class="ph-topics">
      <li class="ph-topic">Portfolio review</li>
      <li class="ph-topic">Pricing &amp; packaging</li>
      <li class="ph-topic">Workflow &amp; editing</li>
      <li class="ph-topic">Marketing &amp; positioning</li>
    </ul>
    <div class="ph-cta">
      <a class="ph-button ph-button--primary" href="#">Book a Power Hour <span>→</span></a>
      <a class="ph-button ph-button--ghost" href="#">Read more <span>→</span></a>
    </div>
  </div>
  <div class="ph-aside">
    <span class="pha-label">Session options</span>
    <div class="pha-option">
      <div class="pha-name">Single session</div>
      <div class="pha-price">£150 <small>/ hour</small></div>
      <p class="pha-note">A one-off chat.</p>
    </div>
    <div class="pha-option">
      <div class="pha-name">Three sessions</div>
      <div class="pha-price">£400 <small>/ three</small></div>
      <p class="pha-note">Spaced over six weeks.</p>
    </div>
    <p class="pha-extra">All sessions held on Zoom, recorded and yours to keep.</p>
  </div>
</section>

Dark Spec Card

Dark editorial requirements / specification panel for upload specs, technical notes and guidance.

click to collapse

.km-dark-spec-card
.km-dark-spec-card__head
.km-dark-spec-card__label
.km-dark-spec-card__line
.km-dark-spec-card__intro
.km-dark-spec-card__rows
.km-dark-spec-card__row
.km-dark-spec-card__term
.km-dark-spec-card__desc
.km-dark-spec-card__desc--warning
.km-dark-spec-card__footer
.km-dark-spec-card__link

Copy-paste markup

<aside class="km-dark-spec-card">
  <div class="km-dark-spec-card__head">
    <span class="km-dark-spec-card__label">Spotlight upload requirements</span>
    <span class="km-dark-spec-card__line" aria-hidden="true"></span>
  </div>
  <p class="km-dark-spec-card__intro">From <em>Spotlight's own guidance.</em></p>
  <dl class="km-dark-spec-card__rows">
    <div class="km-dark-spec-card__row">
      <dt class="km-dark-spec-card__term">Minimum size</dt>
      <dd class="km-dark-spec-card__desc">500 × 500 pixels</dd>
    </div>
    <div class="km-dark-spec-card__row">
      <dt class="km-dark-spec-card__term">File size</dt>
      <dd class="km-dark-spec-card__desc">Minimum 1MB · Maximum 40MB</dd>
    </div>
    <div class="km-dark-spec-card__row">
      <dt class="km-dark-spec-card__term">Watermarks</dt>
      <dd class="km-dark-spec-card__desc km-dark-spec-card__desc--warning">Not accepted — will be rejected</dd>
    </div>
  </dl>
  <div class="km-dark-spec-card__footer">
    <a class="km-dark-spec-card__link" href="#">See Spotlight's full guidance</a>
  </div>
</aside>

Family Year Section (dark)

Full dark section with two family-year package cards.

click to collapse

.family-year-section
.fy-section-head
.fy-cards
.fy-card
.fyc-img
.fyc-body
.fyc-tag
.fyc-name
.fyc-price
.fyc-price-sym
.fyc-price-num
.fyc-saving
.fyc-desc
.fyc-includes
.fyc-inc
.fyc-note
.fyc-cta
.fyc-button
.fy-contact-note

/ Family Year

A year, quietly photographed

Three sessions across twelve months — capturing a family as it actually changes.

/ Standard

Three sessions

£1,200

Saving £150 vs individual sessions

Three sessions spaced across the year. Each fully edited and delivered.

Three 90-minute sessions
All edited galleries

Within 30 miles of Malmesbury.

Enquire →

/ With print album

Three sessions + album

£1,950

Saving £200 vs separate album

Same three sessions, finished with a hand-bound photo album.

Three 90-minute sessions
All edited galleries
12x12 linen-bound album

Designed together over a coffee.

Enquire →

Want something different? Happy to design a custom plan.

Get in touch →

Copy-paste markup

<section class="family-year-section">
  <div class="family-year-section__inner">
    <div class="fy-section-head">
      <span class="fy-section-head__eyebrow">/ Family Year</span>
      <h2 class="fy-section-head__title">A year, <em>quietly photographed</em></h2>
      <p class="fy-section-head__text">Three sessions across twelve months — capturing a family as it actually changes.</p>
    </div>
    <div class="fy-cards">
      <article class="fy-card">
        <div class="fyc-img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
        <div class="fyc-body">
          <span class="fyc-tag">/ Standard</span>
          <h3 class="fyc-name">Three <em>sessions</em></h3>
          <div class="fyc-price"><span class="fyc-price-sym">£</span><span class="fyc-price-num">1,200</span></div>
          <span class="fyc-saving">Saving £150 vs individual sessions</span>
          <p class="fyc-desc">Three sessions spaced across the year. Each fully edited and delivered.</p>
          <ul class="fyc-includes">
            <li class="fyc-inc">Three 90-minute sessions</li>
            <li class="fyc-inc">All edited galleries</li>
          </ul>
          <p class="fyc-note">Within 30 miles of Malmesbury.</p>
          <div class="fyc-cta"><a class="fyc-button" href="#">Enquire <span>→</span></a></div>
        </div>
      </article>
      <article class="fy-card">
        <div class="fyc-img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
        <div class="fyc-body">
          <span class="fyc-tag">/ With print album</span>
          <h3 class="fyc-name">Three <em>sessions</em> + album</h3>
          <div class="fyc-price"><span class="fyc-price-sym">£</span><span class="fyc-price-num">1,950</span></div>
          <span class="fyc-saving">Saving £200 vs separate album</span>
          <p class="fyc-desc">Same three sessions, finished with a hand-bound photo album.</p>
          <ul class="fyc-includes">
            <li class="fyc-inc">Three 90-minute sessions</li>
            <li class="fyc-inc">All edited galleries</li>
            <li class="fyc-inc">12x12 linen-bound album</li>
          </ul>
          <p class="fyc-note">Designed together over a coffee.</p>
          <div class="fyc-cta"><a class="fyc-button" href="#">Enquire <span>→</span></a></div>
        </div>
      </article>
    </div>
    <div class="fy-contact-note">
      <p class="fyn-text"><strong>Want something different?</strong> Happy to design a custom plan.</p>
      <a class="fyn-button" href="#">Get in touch <span>→</span></a>
    </div>
  </div>
</section>

Booking Header Meta Strip

Metadata strip for booking page headers — price, availability, session type.

click to collapse

.bh-meta
.bh-meta-item
.bh-meta-label
.bh-meta-val
.bh-meta-div
.bh-meta--no-rule

Investment From £450

Length 90 minutes

Where UK-wide

Copy-paste markup

<div class="bh-meta">
  <div class="bh-meta-item">
    <span class="bh-meta-label">Investment</span>
    <span class="bh-meta-val">From £450</span>
  </div>
  <span class="bh-meta-div"></span>
  <div class="bh-meta-item">
    <span class="bh-meta-label">Length</span>
    <span class="bh-meta-val">90 minutes</span>
  </div>
  <span class="bh-meta-div"></span>
  <div class="bh-meta-item">
    <span class="bh-meta-label">Where</span>
    <span class="bh-meta-val">UK-wide</span>
  </div>
</div>

DBS / Safeguarding Block

Trust block for DBS, safeguarding and home-session reassurance.

click to collapse

.dbs-block
.dbs-block__inner
.dbs-block__label
.dbs-block__tick
.dbs-block__title
.dbs-block__text
.dbs-block__note
.dbs-block__image

✓ Enhanced DBS · safeguarding trained

Safe in your home, safe on the day.

I'm enhanced DBS-checked and trained in safeguarding. Bookings in private homes are routine for me and I take the responsibility seriously.

Happy to share documentation on request.

Copy-paste markup

<section class="dbs-block">
  <div class="dbs-block__inner">
    <div>
      <div class="dbs-block__label"><span class="dbs-block__tick">✓</span> Enhanced DBS · safeguarding trained</div>
      <h3 class="dbs-block__title">Safe in your home, safe on the day.</h3>
      <p class="dbs-block__text">I'm enhanced DBS-checked and trained in safeguarding. Bookings in private homes are routine for me and I take the responsibility seriously.</p>
      <p class="dbs-block__note">Happy to share documentation on request.</p>
    </div>
    <div class="dbs-block__image"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt=""></div>
  </div>
</section>

Documentary Family Comparison Table

Editorial comparison table for Documentary, Lifestyle and Studio approaches.

click to collapse

.compare-wrap
.compare-table

Approach	Documentary	Lifestyle	Studio
Style	Observed	Lightly directed	Posed
Best for	Honest stories	Magazine feel	Formal portraits
Location	Home / favourite place	Outdoors	Studio

Copy-paste markup

<div class="compare-wrap">
  <table class="compare-table">
    <thead>
      <tr>
        <th>Approach</th>
        <th>Documentary</th>
        <th>Lifestyle</th>
        <th>Studio</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Style</td><td>Observed</td><td>Lightly directed</td><td>Posed</td></tr>
      <tr><td>Best for</td><td>Honest stories</td><td>Magazine feel</td><td>Formal portraits</td></tr>
      <tr><td>Location</td><td>Home / favourite place</td><td>Outdoors</td><td>Studio</td></tr>
    </tbody>
  </table>
</div>

Mini Stats Strip

Small light-section stats strip for About / landing pages.

click to collapse

.km-mini-stats-strip
.km-mini-stats-strip__inner
.km-mini-stats-strip__item
.km-mini-stats-strip__number
.km-mini-stats-strip__label

800+ Weddings photographed

2008 Year it started

14 Conferences

Copy-paste markup

<section class="km-mini-stats-strip">
  <div class="km-mini-stats-strip__inner">
    <div class="km-mini-stats-strip__item">
      <span class="km-mini-stats-strip__number">800+</span>
      <span class="km-mini-stats-strip__label">Weddings photographed</span>
    </div>
    <div class="km-mini-stats-strip__item">
      <span class="km-mini-stats-strip__number">2008</span>
      <span class="km-mini-stats-strip__label">Year it started</span>
    </div>
    <div class="km-mini-stats-strip__item">
      <span class="km-mini-stats-strip__number">14</span>
      <span class="km-mini-stats-strip__label">Conferences</span>
    </div>
  </div>
</section>

Store Trust Strip (dark)

Narrow proof strip for the main store page (full-width, dark).

click to collapse

.km-store-trust-strip
.km-store-trust-strip__inner
.km-store-trust-strip__item
.km-store-trust-strip__text
.km-store-trust-strip--tight

Instant download after purchase

Free updates for life

30-day refund guarantee

Copy-paste markup

<section class="km-store-trust-strip km-store-trust-strip--tight">
  <div class="km-store-trust-strip__inner">
    <div class="km-store-trust-strip__item">
      <p class="km-store-trust-strip__text"><strong>Instant download</strong> after purchase</p>
    </div>
    <div class="km-store-trust-strip__item">
      <p class="km-store-trust-strip__text"><strong>Free updates</strong> for life</p>
    </div>
    <div class="km-store-trust-strip__item">
      <p class="km-store-trust-strip__text"><strong>30-day</strong> refund guarantee</p>
    </div>
  </div>
</section>

Gemma Card (compact profile)

Compact editorial profile card with round avatar.

click to collapse

.gemma-card
.gemma-card__head
.gemma-card__image
.gemma-card__name
.gemma-card__role
.gemma-card__text

Copy-paste markup

<aside class="gemma-card">
  <div class="gemma-card__head">
    <div class="gemma-card__image"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="Gemma"></div>
    <div>
      <h3 class="gemma-card__name">Gemma Mullins</h3>
      <span class="gemma-card__role">Studio manager &amp; second shooter</span>
    </div>
  </div>
  <p class="gemma-card__text">Gemma runs the studio side of things and second-shoots a handful of weddings each year. If you've emailed in the last two years, there's a good chance she replied. <a href="#">Read more about Gemma</a>.</p>
</aside>

Course Callout (dark)

Dark editorial course promotion block with image, buttons and compact course proof list.

click to collapse

.course-callout
.course-callout__media
.course-callout__body
.course-callout__label
.course-callout__title
.course-callout__text
.course-callout__actions
.course-callout__button
.course-callout__button--primary
.course-callout__button--secondary
.course-callout__button-arrow
.course-callout__meta
.course-callout__meta-item

Online course

The Art of Documentary Wedding Photography

A practical course built from years of real-world wedding photography.

View course → Preview chapter →

7+ hours of video
Lifetime access
Watch anywhere

Copy-paste markup

<section class="course-callout">
  <div class="course-callout__media"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="Course preview"></div>
  <div class="course-callout__body">
    <span class="course-callout__label">Online course</span>
    <h2 class="course-callout__title">The Art of <em>Documentary Wedding Photography</em></h2>
    <p class="course-callout__text">A practical course built from years of real-world wedding photography.</p>
    <div class="course-callout__actions">
      <a class="course-callout__button course-callout__button--primary" href="#">View course <span class="course-callout__button-arrow">→</span></a>
      <a class="course-callout__button course-callout__button--secondary" href="#">Preview chapter <span class="course-callout__button-arrow">→</span></a>
    </div>
    <ul class="course-callout__meta">
      <li class="course-callout__meta-item">7+ hours of video</li>
      <li class="course-callout__meta-item">Lifetime access</li>
      <li class="course-callout__meta-item">Watch anywhere</li>
    </ul>
  </div>
</section>

WPT Callout (light note)

Soft bordered editorial note for tips, gentle reminders or short clarifications.

click to collapse

.km-wpt-callout
.km-wpt-callout__label
.km-wpt-callout__text

Copy-paste markup

<aside class="km-wpt-callout">
  <span class="km-wpt-callout__label">A quick note</span>
  <p class="km-wpt-callout__text">If you're looking for a posed-portrait day, I'm probably not your photographer. I work observationally. <a href="#">Read more about my approach</a>.</p>
</aside>

Course Trust Strip (dark)

Thin dark proof / course details strip with optional preview line.

click to collapse

.km-course-trust-strip
.km-course-trust-strip__inner
.km-course-trust-strip__row
.km-course-trust-strip__item
.km-course-trust-strip__icon
.km-course-trust-strip__divider
.km-course-trust-strip__preview
.km-course-trust-strip__corner

✓ 7+ hours of video ✓ Lifetime access ✓ Watch anywhere

⌜ Free preview chapter available ⌟

Copy-paste markup

<section class="km-course-trust-strip km-course-trust-strip--tight">
  <div class="km-course-trust-strip__inner">
    <div class="km-course-trust-strip__row">
      <span class="km-course-trust-strip__item"><span class="km-course-trust-strip__icon">✓</span> 7+ hours of video</span>
      <span class="km-course-trust-strip__divider"></span>
      <span class="km-course-trust-strip__item"><span class="km-course-trust-strip__icon">✓</span> Lifetime access</span>
      <span class="km-course-trust-strip__divider"></span>
      <span class="km-course-trust-strip__item"><span class="km-course-trust-strip__icon">✓</span> Watch anywhere</span>
    </div>
    <div class="km-course-trust-strip__preview">
      <span class="km-course-trust-strip__corner">⌜</span>
      <span><strong>Free preview chapter</strong> available</span>
      <span class="km-course-trust-strip__corner">⌟</span>
    </div>
  </div>
</section>

Film Viewing Note (dark)

Dark editorial viewing guidance strip for films / photofilms.

click to collapse

.km-film-note
.km-film-note__inner
.km-film-note__play
.km-film-note__main
.km-film-note__label
.km-film-note__text
.km-film-note__meta
.km-film-note__meta-item
.km-film-note__meta-label
.km-film-note__meta-value

Copy-paste markup

<aside class="km-film-note">
  <div class="km-film-note__inner">
    <span class="km-film-note__play" aria-hidden="true"></span>
    <div class="km-film-note__main">
      <span class="km-film-note__label">Viewing note</span>
      <p class="km-film-note__text">Best watched with sound on, and ideally not while making dinner.</p>
    </div>
    <div class="km-film-note__meta">
      <div class="km-film-note__meta-item">
        <span class="km-film-note__meta-label">Length</span>
        <span class="km-film-note__meta-value">3 mins</span>
      </div>
      <div class="km-film-note__meta-item">
        <span class="km-film-note__meta-label">Format</span>
        <span class="km-film-note__meta-value">Photofilm</span>
      </div>
      <div class="km-film-note__meta-item">
        <span class="km-film-note__meta-label">Watch</span>
        <span class="km-film-note__meta-value"><a href="#">Vimeo</a></span>
      </div>
    </div>
  </div>
</aside>

Dark Stats Band

Full-width editorial stats strip.

click to collapse

.km-stats-band
.km-stats-band__inner
.km-stats-band__grid
.km-stats-band__item
.km-stats-band__number
.km-stats-band__label

800+Weddings photographed

14Conferences

100+Countries reached

2008When it started

Copy-paste markup

<section class="km-stats-band">
  <div class="km-stats-band__inner">
    <div class="km-stats-band__grid">
      <div class="km-stats-band__item"><span class="km-stats-band__number">800+</span><span class="km-stats-band__label">Weddings photographed</span></div>
      <div class="km-stats-band__item"><span class="km-stats-band__number">14</span><span class="km-stats-band__label">Conferences</span></div>
      <div class="km-stats-band__item"><span class="km-stats-band__number">100+</span><span class="km-stats-band__label">Countries reached</span></div>
      <div class="km-stats-band__item"><span class="km-stats-band__number">2008</span><span class="km-stats-band__label">When it started</span></div>
    </div>
  </div>
</section>

Fit Check Panel

Two-column editorial suitability / not-suitability block.

click to collapse

.km-fit-check
.km-fit-check__panel
.km-fit-check__panel--soft
.km-fit-check__title
.km-fit-check__list
.km-fit-check__item
.km-fit-check__mark
.km-fit-check__note

This is for you if...

✓You want honest, natural photographs.
✓You prefer moments over posing.

Probably not if...

–You want heavily staged images.
–You want everyone looking at the camera all day.

Copy-paste markup

<div class="km-fit-check">
  <div class="km-fit-check__panel">
    <h3 class="km-fit-check__title">This is <em>for you</em> if...</h3>
    <ul class="km-fit-check__list">
      <li class="km-fit-check__item"><span class="km-fit-check__mark">✓</span><span>You want honest, natural photographs.</span></li>
      <li class="km-fit-check__item"><span class="km-fit-check__mark">✓</span><span>You prefer moments over posing.</span></li>
    </ul>
  </div>
  <div class="km-fit-check__panel km-fit-check__panel--soft">
    <h3 class="km-fit-check__title">Probably <em>not</em> if...</h3>
    <ul class="km-fit-check__list">
      <li class="km-fit-check__item"><span class="km-fit-check__mark">–</span><span>You want heavily staged images.</span></li>
      <li class="km-fit-check__item"><span class="km-fit-check__mark">–</span><span>You want everyone looking at the camera all day.</span></li>
    </ul>
  </div>
</div>

Comparison Table (preset packs)

Editorial comparison matrix for preset packs / products.

click to collapse

.km-compare-wrap
.km-compare
.km-compare__eyebrow
.km-compare__col-title
.km-compare__rowhead
.km-compare__tick
.km-compare__dash
.km-compare__price

Feature	PackClassic Negative	PackAcros +R	PackReportage
Lightroom	Included	Included	Included
Capture One	Included	—	Included
Price	£24	£24	£32

Copy-paste markup

<div class="km-compare-wrap">
  <table class="km-compare">
    <thead>
      <tr>
        <th>Feature</th>
        <th><span class="km-compare__eyebrow">Pack</span><span class="km-compare__col-title">Classic Negative</span></th>
        <th><span class="km-compare__eyebrow">Pack</span><span class="km-compare__col-title">Acros +R</span></th>
        <th><span class="km-compare__eyebrow">Pack</span><span class="km-compare__col-title">Reportage</span></th>
      </tr>
    </thead>
    <tbody>
      <tr><th class="km-compare__rowhead">Lightroom</th><td><span class="km-compare__tick">Included</span></td><td><span class="km-compare__tick">Included</span></td><td><span class="km-compare__tick">Included</span></td></tr>
      <tr><th class="km-compare__rowhead">Capture One</th><td><span class="km-compare__tick">Included</span></td><td><span class="km-compare__dash">—</span></td><td><span class="km-compare__tick">Included</span></td></tr>
      <tr><th class="km-compare__rowhead">Price</th><td><span class="km-compare__price">£24</span></td><td><span class="km-compare__price">£24</span></td><td><span class="km-compare__price">£32</span></td></tr>
    </tbody>
  </table>
</div>

Offer Bar (dark)

Compact centred offer strip for dark sections.

click to collapse

.km-offer-bar-wrap
.km-offer-bar
.km-offer-bar__tag
.km-offer-bar__text

Special offer Buy 2, get 1 free. Discount applied automatically.

Copy-paste markup

<div class="km-offer-bar-wrap">
  <div class="km-offer-bar">
    <span class="km-offer-bar__tag">Special offer</span>
    <span class="km-offer-bar__text">Buy 2, get 1 free. Discount applied automatically.</span>
  </div>
</div>

About Stats / Mentions Strip

Stats band with optional mentions row for About sections.

click to collapse

.km-about-strip
.km-about-strip__stats
.km-about-strip__stat-num
.km-about-strip__stat-label
.km-about-strip__mentions

800+ Weddings photographed

2008 Year started

14 Conferences

Fujifilm Peachpit Press Amateur Photographer The Candid Frame

Copy-paste markup

<div class="km-about-strip">
  <div class="km-about-strip__stats">
    <div>
      <span class="km-about-strip__stat-num">800+</span>
      <span class="km-about-strip__stat-label">Weddings photographed</span>
    </div>
    <div>
      <span class="km-about-strip__stat-num">2008</span>
      <span class="km-about-strip__stat-label">Year started</span>
    </div>
    <div>
      <span class="km-about-strip__stat-num">14</span>
      <span class="km-about-strip__stat-label">Conferences</span>
    </div>
  </div>
  <div class="km-about-strip__mentions">
    <span>Fujifilm</span>
    <span>Peachpit Press</span>
    <span>Amateur Photographer</span>
    <span>The Candid Frame</span>
  </div>
</div>

Route Card (walks / maps)

Route summary card used on the photo-walks map page.

click to collapse

.km-route-wrap
.km-route-top
.km-route-meta
.km-route-card
.km-route-controls
.km-route-btn
.km-route-select
.km-route-kpis
.km-route-map
.km-route-grid
.km-route-stops
.km-route-stoplist

The Bath crescent walk

3.2km · 28 stops · ~90 minutes

Loops back to the start. Mostly pavement.

Copy-paste markup

<div class="km-route-card">
  <h3>The Bath crescent walk</h3>
  <div class="km-route-kpis">
    <p>3.2km · 28 stops · ~90 minutes</p>
    <small>Loops back to the start. Mostly pavement.</small>
  </div>
  <div class="km-route-controls" style="margin-top:14px;">
    <button class="km-route-btn">Start walk</button>
    <button class="km-route-btn">Reset</button>
  </div>
</div>

Blog Card / Author Profile Card

Shared card container for blog callouts and the author profile block.

click to collapse

.km-blog-card
.blog-item-author-profile-wrapper
.author-bio
.author-buttons
.author-btn
.author-name
.km-post-cta
.km-post-cta-btn

Copy-paste markup

<aside class="km-blog-card km-post-cta">
  <h2>Enjoying the read? <strong>Get my newsletter.</strong></h2>
  <p>One thoughtful email roughly every two weeks. No tracking, no fluff.</p>
  <a class="km-post-cta-btn" href="#">Subscribe</a>
</aside>

KM Feature Box (data-title)

Generic reusable feature box that pulls its heading from a data-title attribute.

click to collapse

.km-box
.km-box--light
.km-box--tight
.km-btn
.km-feature

This is a generic, reusable box that pulls its heading from data-title. Useful for tips, notes and short asides.

Read the related post

Copy-paste markup

<section class="km-box" data-title="A useful editorial callout">
  <p>This is a generic, reusable box that pulls its heading from <code>data-title</code>. Useful for tips, notes and short asides.</p>
  <p><a class="km-btn" href="#">Read the related post</a></p>
</section>

Mini Chooser

Self-contained chooser block (left-aligned even inside .km-box). Pairs with a small chooser JS.

click to collapse

.km-chooser
.km-chooser__result

Which Fuji body suits you?

Your priority Compact size Image quality Video

X100VI — fixed 23mm lens, hybrid viewfinder, perfect for travel and street.

Copy-paste markup

<section class="km-chooser">
  <h2>Which Fuji body suits you?</h2>
  <fieldset>
    <legend>Your priority</legend>
    <label><input type="radio" name="priority" checked> Compact size</label>
    <label><input type="radio" name="priority"> Image quality</label>
    <label><input type="radio" name="priority"> Video</label>
  </fieldset>
  <button>Show me</button>
  <div class="km-chooser__result">
    <strong>X100VI</strong> — fixed 23mm lens, hybrid viewfinder, perfect for travel and street.
  </div>
</section>

Fuji Comparison Table

Clean, full-width comparison table used in Fuji recipe and reference pages.

click to collapse

.fuji-table-wrapper
.fuji-table

Setting	Classic Negative	Acros +R
Highlight	-1	0
Shadow	-2	+1
Colour	+1	n/a
Noise reduction	-4	-4

Copy-paste markup

<div class="fuji-table-wrapper">
  <table class="fuji-table">
    <thead>
      <tr><th>Setting</th><th>Classic Negative</th><th>Acros +R</th></tr>
    </thead>
    <tbody>
      <tr><td>Highlight</td><td>-1</td><td>0</td></tr>
      <tr><td>Shadow</td><td>-2</td><td>+1</td></tr>
      <tr><td>Colour</td><td>+1</td><td>n/a</td></tr>
      <tr><td>Noise reduction</td><td>-4</td><td>-4</td></tr>
    </tbody>
  </table>
</div>

Images

Editorial Image Frame

Quiet framed image treatment with paper inset, thin border and subtle shadow. Multiple crop and treatment modifiers.

click to collapse

.km-editorial-image
.km-editorial-image--offset
.km-editorial-image--flat
.km-editorial-image--print
.km-editorial-image--landscape
.km-editorial-image--portrait
.km-editorial-image--square
.km-editorial-image--horizontal
.km-editorial-image--horizontal-soft
.km-editorial-image--cinematic
.km-editorial-image__frame
.km-editorial-image__label

Editorial image preview — An optional caption sits below the frame in editorial monospace.

Copy-paste markup

<figure class="km-editorial-image km-editorial-image--landscape">
  <span class="km-editorial-image__frame">
    <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="Editorial image preview">
    <span class="km-editorial-image__label">Fig. 01 · Wiltshire</span>
  </span>
  <figcaption>An optional caption sits below the frame in editorial monospace.</figcaption>
</figure>

Labels & badges

Wedding Tips Small Label Box

Small outlined uppercase label used for category tags.

click to collapse

.km-wpt-label-box
.km-wpt-label-box-wrap--center

Wedding tips

Copy-paste markup

<div class="km-wpt-label-box-wrap--center">
  <span class="km-wpt-label-box">Wedding tips</span>
</div>

Inline Content Label

Small boxed label with supporting mono description.

click to collapse

.km-inline-label
.km-inline-label--center
.km-inline-label--right
.km-inline-label__tag
.km-inline-label__text

Featured A small contextual label beside supporting text.

Copy-paste markup

<div class="km-inline-label km-inline-label--center">
  <span class="km-inline-label__tag">Featured</span>
  <span class="km-inline-label__text">A small contextual label beside supporting text.</span>
</div>

Dark Section Label

Small uppercase label that matches the footer / dark-section heading style.

click to collapse

.km-dark-label
.km-dark-label-wrap--center
.km-dark-label-wrap--right

For Photographers

Copy-paste markup

<div class="km-dark-label-wrap--center">
  <a class="km-dark-label" href="#">For Photographers</a>
</div>

Hero Meta Badges

Compact metadata badges that sit on top of a hero image.

click to collapse

.km-hero-meta-wrap
.km-hero-meta

From £450 UK-wide 2hr or 8hr sessions

Copy-paste markup

<div class="km-hero-meta-wrap">
  <div class="km-hero-meta">
    <span>From £450</span>
    <span>UK-wide</span>
    <span>2hr or 8hr sessions</span>
  </div>
</div>

Links & utilities

Vertical Rule Utility

Simple vertical divider with soft gradient — useful between two side-by-side blocks.

click to collapse

.km-vertical-rule
.km-vertical-rule--short
.km-vertical-rule--tall
.km-vertical-rule--dark
.km-vertical-rule--long
.km-vertical-rule--medium
.km-vertical-rule--left
.km-vertical-rule--right

Left content

Right content

Copy-paste markup

<div style="display:flex;align-items:stretch;gap:32px;justify-content:center;height:140px;">
  <div style="align-self:center;">Left content</div>
  <hr class="km-vertical-rule km-vertical-rule--medium">
  <div style="align-self:center;">Right content</div>
</div>

Hero Scroll Cue

Minimal scroll prompt for Squarespace background-image hero sections. Position absolutely inside the hero.

click to collapse

.km-scroll-cue-wrap
.km-scroll-cue

Scroll

Copy-paste markup

<div class="km-scroll-cue-wrap" style="position:relative;height:120px;">
  <a class="km-scroll-cue" href="#next" style="position:absolute;left:22px;bottom:24px;">Scroll</a>
</div>

Optional Dropcap Prose

Opt-in prose block with editorial drop cap on the first paragraph.

click to collapse

.km-dropcap-prose
.km-dropcap-prose--dark

This paragraph starts with a drop cap and can be used for editorial introductions or letter-style intros at the top of a long-form page.

Use sparingly, ideally near the beginning of a page.

Copy-paste markup

<div class="km-dropcap-prose">
  <p>This paragraph starts with a drop cap and can be used for editorial introductions or letter-style intros at the top of a long-form page.</p>
  <p>Use sparingly, ideally near the beginning of a page.</p>
</div>

Mono Underline Link

Small monospace link with underline and nudging arrow. Has dark variant for dark backgrounds.

click to collapse

.km-mono-link
.km-mono-link--dark
.km-mono-link-wrap
.km-mono-link-wrap--left
.km-mono-link-wrap--center
.km-mono-link-wrap--right
.km-mono-link__arrow

Read the full guide →

Copy-paste markup

<div class="km-mono-link-wrap km-mono-link-wrap--center">
  <a class="km-mono-link" href="#">Read the full guide <span class="km-mono-link__arrow">→</span></a>
</div>

Explore Link

Small uppercase editorial link with arrow nudge.

click to collapse

.km-explore-link
.km-explore-link__arrow

Explore this section

Copy-paste markup

<a class="km-explore-link" href="#">
  <span>Explore this section</span>
  <span class="km-explore-link__arrow" aria-hidden="true">→</span>
</a>

Button Arrow Hover

Adds a gentle right-shift (or down-shift) to arrow characters inside Squarespace buttons on hover.

click to collapse

.sqs-block-button-element
.km-arrow
.km-arrow-down

Primary button →

Copy-paste markup

<div>
  <a class="sqs-block-button-element sqs-button-element--primary sqs-editable-button" href="#" style="display:inline-flex;align-items:center;padding:14px 26px;background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;">Primary button <span class="km-arrow">→</span></a>
</div>

Secondary Button Hover Invert

Secondary buttons invert to dark on hover.

click to collapse

.sqs-button-element--secondary

Secondary button →

Copy-paste markup

<div>
  <a class="sqs-block-button-element sqs-button-element--secondary sqs-editable-button" href="#" style="display:inline-flex;align-items:center;padding:14px 26px;text-decoration:none;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;">Secondary button <span class="km-arrow">→</span></a>
</div>

Lite YouTube Embed

Styles a lightweight YouTube placeholder component with play button and title.

click to collapse

.yt-lite
.lty-playbtn
.lty-title

Behind the lens — a wedding day in Bath

Copy-paste markup

<div class="yt-lite" style="aspect-ratio:16/9;background:#222;position:relative;">
  <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3Crect%20width='1200'%20height='800'%20fill='%23e4dbc4'/%3E%3Cpath%20d='M0%20650%20L340%20380%20L520%20520%20L720%20310%20L1200%20690%20V800%20H0Z'%20fill='%23b89968'%20opacity='.42'/%3E%3Ccircle%20cx='850'%20cy='230'%20r='90'%20fill='%235c4b2e'%20opacity='.35'/%3E%3Ctext%20x='50%25'%20y='50%25'%20font-family='Georgia'%20font-size='52'%20fill='%235c564b'%20text-anchor='middle'%3EReplace%20image%3C/text%3E%3C/svg%3E" alt="Video poster">
  <button class="lty-playbtn" aria-label="Play"></button>
  <div class="lty-title">Behind the lens — a wedding day in Bath</div>
</div>