Launchpad Style Guide

Article card

Teaser card for Articles

YAML Example

Card - Available Size

image example
Stories & News
5 min read

Article Card lg

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director
image example
Stories & News
5 min read

Article Card md

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director
image example
Stories & News
5 min read

Article Card sm

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director

Card - Available variant

image example
Stories & News
5 min read

Article Card Padded

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director
image example
Stories & News
5 min read

Article Card No Padded

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director
Stories & News
5 min read

No Image, No Author, & No Padded

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

Example variants with all fields

This is a title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.
Stories & News

With Tags

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.
Stories & News
5 min read

With Date and Minimum Read Time

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.
Stories & News
5 min read

With Author No Image

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

Chris Newton

Executive Director
image example
Stories & News
5 min read

With Image No Description
image example
Stories & News
5 min read

With Author Image

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director
image example
Stories & News

Example for asset card

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, harum quam et error a maxime vitae enim tempora dolore ad mollitia laboriosam eos officiis fuga earum rerum nisi repellat ipsum.

image example
Chris Newton

Executive Director

image example
Andrea Bochelli

Chief Executive Editors

Figma reference

Menu

Pages

Sections

Components

Core Elements

Core Css