Demo ModeViewing as: Enterprise plan

UI & Components

Approved digital components for consistent online brand representation.

This section outlines the approved interface components used across our digital environments. It exists to ensure consistency and recognisability across all online touch points, independent of platform or execution.

Buttons

Primary Button

<a class="wp-pill-link" href="#">
  <span>Download now</span>
</a>

Secondary (Outlined)

<button class="btn btn-secondary">
  Learn More
</button>

Ghost Button

<button class="btn btn-ghost">
  Cancel
</button>

Disabled State

<button class="btn btn-primary" disabled>
  Unavailable
</button>

Iconography

6 of 11 icons

Eye

Eye

Photo

Photo

Typography

Typography

Document

Document

Social Network

Social Network

Attachment

Attachment

Navigation

Previous and next navigation arrows
Minus and plus navigation marks
Circular down navigation button
Chevron down navigation icon

Preview — Primary Navigation

<header class="nav-header">
  <a href="/" class="nav-logo">
    <img src="/images/logo.webp" alt="Wetpaint" />
  </a>
  <nav class="nav-links">
    <a href="/about" class="nav-link">About</a>
    <a href="/services" class="nav-link">Services</a>
    <a href="/work" class="nav-link">Work</a>
    <a href="/contact" class="nav-link">Contact</a>
  </nav>
  <a href="/contact" class="nav-cta">Get in Touch</a>
</header>

Card & Content Blocks

01

Lorem ipsum dolor sit amet, consetetur

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

02

Lorem ipsum dolor sit amet, consetetur

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

03

Lorem ipsum dolor sit amet, consetetur

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Client One

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Avatar placeholder

Name

Position

Client Two

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Avatar placeholder

Name

Position

Tile Cards

Lorem Ipsum Dolor Sit Amet

— Lorem ipsum dolor sit

— Consetetur sadipscing

— Diam nonumy eirmod

— Invidunt ut labore

— Diam voluptua At

— Et accusam et

— Dolores et ea

Lorem Ipsum Dolor Sit Amet

— Lorem ipsum dolor sit

— Consetetur sadipscing

— Diam nonumy eirmod

— Invidunt ut labore

— Diam voluptua At

— Et accusam et

— Dolores et ea

Lorem Ipsum Dolor Sit Amet

— Lorem ipsum dolor sit

— Consetetur sadipscing

— Diam nonumy eirmod

— Invidunt ut labore

— Diam voluptua At

— Et accusam et

— Dolores et ea

Lorem Ipsum Dolor Sit Amet

— Lorem ipsum dolor sit

— Consetetur sadipscing

— Diam nonumy eirmod

— Invidunt ut labore

— Diam voluptua At

— Et accusam et

— Dolores et ea