CharacterLab - SPX Platform

Pattern Library

Overview

Introduction

A styleguide and pattern library for CharacterLab - SPX Platform.

Branding

Colors
Blue #3F55A0
Navy #070539
Mid Gray #C1C1CD
Light Gray #F0F0F3
Turquoise #0AAEA9
Red #CF2160

Typography

Extra Large Title

Gotham Medium 60px / 70px line height / 1 letter spacing


                            

Large Title

Gotham Medium 46px / 60px line height / 0 letter spacing


                            

Medium Title

Gotham Medium 26px / 30px line height / 0 letter spacing


                            

Small Title

Gotham Medium 18px / 24px line height / 0 letter spacing


                            

Extra Small Title
Gotham Medium 14px / 20px line height / 0 letter spacing

                            
Button Title

Gotham Medium 18px / 24px line height / 10 letter spacing


                            

Section Title
Gotham Medium 14px / 20px line height / 10 letter spacing

                            
Large Text

Sentinel Book 40px / 64px line height / 1 letter spacing


                            

Medium Text

Sentinel Book 28px / 50px line height / 1 letter spacing


                            

Small Text

Sentinel Book 20px / 34px line height / 1 letter spacing


                            


                            

{% import 'macros/link.html' as link with context %}

{{ link.render({
  link: {
    linkUrl: '#',
    linkText: 'Button Text',
    linkType: 'custom',
    linkTarget: false
  },
  type: 'button'
}) }}



                          

                            

{% import 'macros/link.html' as link with context %}

{{ link.render({
  link: {
    linkUrl: '#',
    linkText: 'Link text lorem ipsum',
    linkType: 'custom',
    linkTarget: false
  },
  arrow: true,
  type: 'text'
}) }}



                          

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Inline link text lorem ipsum


                            

{% import 'macros/link.html' as link with context %}

{{ link.render({
  link: {
    linkUrl: '#',
    linkText: 'Inline link text lorem ipsum',
    linkType: 'custom',
    linkTarget: false
  },
  type: 'inline'
}) }}



                          

                            

{% import 'macros/link.html' as link with context %}

{{ link.render({
  link: {
    linkUrl: '#',
    linkText: 'Anchor link text',
    linkType: 'custom',
    linkTarget: false
  },
  type: 'anchor'
}) }}



                          

Widgets

Header

                            

{% import 'macros/header.html' as header with context %}

{{ header.render({
  navItems: []
}) }}



                          
Footer

                            

{% import 'macros/footer.html' as footer with context %}

{{ footer.render({
  navItems: [],
  address: {},
  contact: {},
  copyright: {}
}) }}