←︎ Brand assetsMW CODES / COMPONENTS

COMPONENTS

The parts the site is built from.

Buttons, labels, cards and forms, as they appear across mw.codes. Every example below is drawn by one stylesheet you can use yourself: link it, copy the markup, and it will look the same.

The stylesheet

<link rel="stylesheet" href="https://www.mw.codes/assets/mwc.css">Open the file ↗︎

Classes start with mwc-. Put mwc-scope on a wrapper for the brand type and colour, and load Inter — without it, the stylesheet falls back to the system font.

Actions

Every button on the site is one of these. The hard shadow is part of it: the button lifts off it on hover and presses flat when clicked.

Buttons

Primary for the one thing you want someone to do. Outline beside it for the second.

Let’s talk websites See our work 
<a class="mwc-button" href="/#contact">
  Let’s talk websites <span class="mwc-button__icon" aria-hidden="true">↗︎</span>
</a>
<a class="mwc-button mwc-button--outline" href="/#work">
  See our work <span class="mwc-button__icon" aria-hidden="true">↓︎</span>
</a>
<button class="mwc-button" type="button" disabled>
  Sending… <span class="mwc-button__icon" aria-hidden="true">↗︎</span>
</button>

On a light ground

Dark, with a clay arrow, wherever orange would sit on paper.

Explore website development 
<a class="mwc-button mwc-button--dark" href="/services/websites">
  Explore website development <span class="mwc-button__icon" aria-hidden="true">↗︎</span>
</a>

Small and utility controls

The navbar button, arrows for a carousel, and toggles that stay selected.

Let’s talk 
<a class="mwc-button mwc-button--small" href="/#contact">
  Let’s talk <span class="mwc-button__icon" aria-hidden="true">↗︎</span>
</a>
<button class="mwc-icon-button" type="button" aria-label="Previous">←︎</button>
<button class="mwc-icon-button" type="button" aria-label="Next">→︎</button>
<button class="mwc-toggle" type="button" aria-pressed="true">01 Spot it</button>
<button class="mwc-toggle" type="button" aria-pressed="false">02 Improve it</button>

Type and labels

Headings are Inter at weight 700 with tight tracking. The accent colour carries the emphasis — never italics.

Section heading

A label, a heading whose second half is in accent, and a short introduction.

Your business is busy enough

One less thing
on your to-do list.

Design, development, hosting, updates. We bring it all together, so you can get on with what you do best. 

<span class="mwc-label">Your business is busy enough</span>
<h2 class="mwc-heading">
  One less thing<br />on your <span class="mwc-accent">to-do list.</span>
</h2>
<p class="mwc-lede">
  Design, development, hosting, updates. We bring it all together, so you can get on with what you do best.
</p>

Pills sit above a hero heading. Text links are a second route, never the main action.

Independent web development, UK-wide Prefer WhatsApp? Say hello here ↗︎
<span class="mwc-pill">
  <span class="mwc-pill__mark" aria-hidden="true">✓</span> Independent web development, UK-wide
</span>
<a class="mwc-text-link" href="https://wa.me/441905917333">Prefer WhatsApp? Say hello here ↗︎</a>

Feature strip

Short facts separated by clay dots, usually under a hero.

Built around your business UK hosting included Unlimited revisions WhatsApp support 
<div class="mwc-features">
  <span>Built around your business</span>
  <i class="mwc-features__dot"></i>
  <span>UK hosting included</span>
  <i class="mwc-features__dot"></i>
  <span>Unlimited revisions</span>
  <i class="mwc-features__dot"></i>
  <span>WhatsApp support</span>
</div>

Cards and panels

Dark panels hold something to look at. Light panels ask for a decision.

Benefit card

A visual on top, then a heading and a sentence or two.

Can we update the website? Of course. What’s changing?

A real person. A simple conversation.

Someone on your side.

You work directly with the people building your website. Ask a question, share an idea or request a change. 

<article class="mwc-card">
  <div class="mwc-card__visual">
    <div class="mwc-bubbles">
      <span class="mwc-bubble">Can we update the website?</span>
      <span class="mwc-bubble mwc-bubble--reply">Of course. What’s changing?</span>
      <p class="mwc-bubbles__caption">A real person. A simple conversation.</p>
    </div>
  </div>
  <h3 class="mwc-card__title">Someone on your side.</h3>
  <p class="mwc-card__text">
    You work directly with the people building your website. Ask a question, share an idea or request a change.
  </p>
</article>

Service card

For a list of services. The link stays at the bottom however long the text runs.

Ongoing website care

Meet Max AI.

Our own website assistant. Helping with checks, articles and improvements, with our team overseeing the work.

Get to know Max 
<article class="mwc-service">
  <span class="mwc-service__label">Ongoing website care</span>
  <h3 class="mwc-service__title">Meet Max AI.</h3>
  <p class="mwc-service__text">
    Our own website assistant. Helping with checks, articles and improvements, with our team overseeing the work.
  </p>
  <a class="mwc-service__link" href="/max">Get to know Max <span aria-hidden="true">↗︎</span></a>
</article>

Checklist

What is included, on a paper panel. Each line gets a heading and one supporting sentence.

The good stuff, included
  • Bespoke design & development Designed and built around your business, not adapted from a template.
  • Unlimited revisions Ask for content and design changes as often as you need them.

We’ll agree the pages, features and care your business needs before we start.

<div class="mwc-checklist">
  <span class="mwc-checklist__label">The good stuff, included</span>
  <ul class="mwc-checklist__list">
    <li class="mwc-checklist__item">
      <span class="mwc-checklist__tick" aria-hidden="true">✓</span>
      <div>
        <strong>Bespoke design &amp; development</strong>
        <small>Designed and built around your business, not adapted from a template.</small>
      </div>
    </li>
    <li class="mwc-checklist__item">
      <span class="mwc-checklist__tick" aria-hidden="true">✓</span>
      <div>
        <strong>Unlimited revisions</strong>
        <small>Ask for content and design changes as often as you need them.</small>
      </div>
    </li>
  </ul>
  <p class="mwc-checklist__note">We’ll agree the pages, features and care your business needs before we start.</p>
</div>

Questions and forms

Native elements underneath, so they work with a keyboard and without JavaScript.

Questions

Native details elements. The plus turns into a cross when a question is open.

Can you replace my existing website?

Yes. We can design and build a new website, then handle the switchover when it’s ready.

How much will my website cost?

It depends on the size of the website and what it needs to do.

<div class="mwc-faq">
  <details open>
    <summary>Can you replace my existing website?<span class="mwc-faq__mark" aria-hidden="true">+</span></summary>
    <p>Yes. We can design and build a new website, then handle the switchover when it’s ready.</p>
  </details>
  <details>
    <summary>How much will my website cost?<span class="mwc-faq__mark" aria-hidden="true">+</span></summary>
    <p>It depends on the size of the website and what it needs to do.</p>
  </details>
</div>

Enquiry form

Labels wrap their fields, so the whole label is clickable. The submit button runs full width.

Tell us about your website

A few details are all we need to get started.

<form class="mwc-form">
  <h3 class="mwc-form__title">Tell us about your website</h3>
  <p class="mwc-form__intro">A few details are all we need to get started.</p>
  <div class="mwc-form__row">
    <label class="mwc-field">
      Your name
      <input name="name" autocomplete="name" placeholder="Your name" />
    </label>
    <label class="mwc-field">
      Email address
      <input type="email" name="email" autocomplete="email" placeholder="you@yourbusiness.co.uk" />
    </label>
  </div>
  <label class="mwc-field">
    Business name <span class="mwc-field__optional">(optional)</span>
    <input name="business" autocomplete="organization" placeholder="Your business" />
  </label>
  <label class="mwc-field">
    What do you have in mind?
    <textarea name="message" rows="3" placeholder="Tell us about your business…"></textarea>
  </label>
  <button class="mwc-button mwc-button--block" type="submit">
    Send your enquiry <span class="mwc-button__icon" aria-hidden="true">↗︎</span>
  </button>
</form>

Status messages

Shown under a form once it has sent, or when it has not.

Thanks — your enquiry has been sent. We’ll reply to the email address you provided.

Your enquiry couldn’t be sent. Your details are still here to try again. 

<p class="mwc-status mwc-status--success">
  Thanks — your enquiry has been sent. We’ll reply to the email address you provided.
</p>
<p class="mwc-status mwc-status--error">
  Your enquiry couldn’t be sent. Your details are still here to try again.
</p>

The site’s own stylesheets are the source for all of this. Built something with these that does not look right? Message 01905 917333 on WhatsApp.