Pattern Library

Code samples and other things

Basic Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text

The Quick Brown Fox Jumped Over the Lazy Dog

Links

Buttons

Form Elements

Text Inputs

Radio Buttons

Day Night

Checkboxes

Spring Summer Fall Winter

Lists

Lists are unstyled by default.

  • Blue
  • Purple
  • Green

Lists within .rich-text-content are styled

  • Blue
  • Purple
  • Green

Utility

Section

Uses .section block and the section mixin. Wrap around any content you want to be centered on the page with a max width of page width.

Content
Content
Content

Rich Text Content

Uses .rich-text-content block.

Wrap this class around user-generated-content coming from wysiwyg forms in the admin. It will apply standard content styling for lists, links, etc

Fruit!

Fruit is great. Here's a whole wiki about it.

Favorite Fruits

  • Watermelon
  • Cantoloupe
  • Oranges
  • Grapes

Articles

Articles Grid With 3 articles

Articles Grid With 6 articles

displays 2 wide @medium Breakpoint when the number of articles is divisible by 2

Articles List

Article List Panels

Testimonials

We have great chemistry with the Relay team. They’ve been instrumental in helping us collect more patients’ consent.

Mike Einodshofer, Chief Pharmacy Officer at Maxor

We see Relay as a true extension of our team.

Ray Nasto, Executive Director of Customer Experience at Comcast

Relay provided more than just technology. They gave us insightful guidance on how the whole customer experience should be managed.

Tae Kim, COO at AAA Western and Central NY

Content Blocks

Text Block

Uses .text-block block along with .rich-text-content. Generic text block that's restricted to 768px width.

Our Team

Part industry expert. Part project manager. Your all-around program champion.

Our clients love us for the industry knowledge and customer experience consulting we provide. You will partner with a Client Success Manager that specializes in your industry and understands the best ways to solve your unique pain points. Your dedicated Client Success Manager will:

  • Set up your program and help your team make the most of it
  • Identify integration points to optimize performance
  • Recommend improvements to your overall customer experience and look for growth opportunities to maximize your ROI

Number Block

Uses .number-block block along with .rich-text-content. Used on the 'Why Relay' Page

It's a Complete Solution

  • Provides an end-to-end engagement platform, from adoption to optimization
  • Captures mobile numbers and consents to increase your mobile reach
  • Activates a secure Customer Feed that's more powerful and engaging than text solutions
  • Empowers you to solve your most challenging customer engagement moments
  • Helps you maintain compliance with TCPA, HIPAA and PCI
2

Logos

Link List

Pop Hover Cards

«

Feature Showcase

Even the most sophisticated customer engagement solutions rely on the same cluttered communication channels. Only Relay activates a dedicated feed for every customer for truly personalized experiences.

Banks put too much pressure on customers to navigate multiple experiences, and Relay’s solution addresses this directly by “piecing together all the information a customer actually needs without them having to go and look for it themselves.
Tiffani Montez
Senior Analyst

Even the most sophisticated customer engagement solutions rely on the same cluttered communication channels. Only Relay activates a dedicated feed for every customer for truly personalized experiences.

Banks put too much pressure on customers to navigate multiple experiences, and Relay’s solution addresses this directly by “piecing together all the information a customer actually needs without them having to go and look for it themselves.
Tiffani Montez
Senior Analyst

Quote

With no image or logo

What I love about the Relay team is their strong desire to understand our goals and improve the customer experience through product enhancements. We see Relay as a true extension of our team.

Ray Nasto, Executive Director of Customer Experience at Comcast

With image and logo

With an industry (healthcare) and 'reverse' switched on

wyg block

(To Do)

What you get

Mobile Number Analysis

Quickly determine your eligible recipients with an instant mobile number analysis of your customer records.

Secure Customer Feed™

Send text message notifications and securely engage customers with a branded message feed.

Quick Stand Up

Get started quickly with templated experiences already vetted and proven in your industry.

Robust Reporting

Track your program’s success in real time to easily report results and make informed decisions.

Dedicated Client Success Manager

Your dedicated Client Success Manager will stand up your program in 30 days so you can start seeing results immediately.

No Download Required

Circumvent adoption challenges and deliver personalized, actionable messages directly to customers’ mobile devices.

Two Col Section

3 variations - with icon, without icon, and with card

(To Do)

Drag-and-drop mobile experience creation tools built for teams

  • Intuitive tools that any team can use to create and design experiences
  • Takes out the guesswork by showing what your customers will see
  • Dynamic message content and actions to increase customer engagement

Onboarding

Improve customer onboarding to build trust, deepen engagement and increase customer lifetime value

  • Create a positive first time user experience
  • Increase adoption of your app and portal
  • Drive account activation

Industry Visual

Turnkey energy and utility customer engagement solutions that go beyond the limitations of legacy channels

Pre-templated messages already proven to work in your industry. More engaging than text, more proactive than portals, and more useful than the email inbox.

Forms

Request Case Study Form

Uses .case-study-form and .form-group blocks

Download the Full Case Study

  • Learn the details of the full mobile engagement solution that boosted renewals to 16% for the hardest-to-reach customers
  • Find out how a natural disaster can put the solution to the test, and supported customers through a difficult situation
  • Discover how existing tools were integrated in 30 days

Request Onboarding form

Uses .form-group block and .form-group--hero modifier

Submit your mobile number for an invite to experience Relay for yourself
You’ll receive one message for demo purposes only. Message and data rates may apply.
Terms of Use Privacy Policy

Request Demo Form - Footer & Request A Demo page

Uses .demo block and .form-group block with .form-group--demo modifier

Putting full forms here with all the context for testing purposes

See a Demo

Interested in finding out how Relay can improve your customer experience?

Contact us to see how it works.