Paragraph copy: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta rhoncus dapibus. Duis molestie neque porta, convallis diam vitae, mollis quam. Nulla et rutrum eros. Sed mi metus, volutpat sed Leo et, pellentesque venenatis tellus. Phasellus in imperdiet felis.

<!-- The script tag should live in the head of your page if at all possible -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>

<!-- Put this wherever you would like your player to appear -->
<img
  style="width: 100%; margin: auto; display: block;"
  class="vidyard-player-embed"
  src="https://play.vidyard.com/ZXN1ambWcQEzwQ9tpM91op.jpg"
  data-uuid="ZXN1ambWcQEzwQ9tpM91op"
  data-v="4"
  data-type="inline"
/>

<!-- The script tag should live in the head of your page if at all possible -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>

<!-- Put this wherever you would like your player to appear -->
<img
  style="width: 100%; margin: auto; display: block;"
  class="vidyard-player-embed"
  src="https://play.vidyard.com/ZXN1ambWcQEzwQ9tpM91op.jpg"
  data-uuid="ZXN1ambWcQEzwQ9tpM91op"
  data-v="4"
  data-type="inline"
/>

New Tag
<span class="resource-listing__item__new"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"> <rect width="30" height="30" fill="#0b3b5d" opacity="0"></rect> <path d="M701.3,24.011a.99.99,0,0,1-.425-.095l-6.136-2.876L688.6,23.916a1,1,0,0,1-1.407-1.093l1.145-5.948-4.873-4.234a1,1,0,0,1,.527-1.747l6.834-.885,3.035-5.482a1.04,1.04,0,0,1,1.75,0l3.035,5.482,6.833.885a1,1,0,0,1,.528,1.747l-4.873,4.234,1.145,5.948a1,1,0,0,1-.982,1.188m-6.561-5.075a.99.99,0,0,1,.425.095l4.783,2.242-.883-4.586a1,1,0,0,1,.326-.943l3.627-3.152-5.127-.664a1,1,0,0,1-.746-.508l-2.405-4.344-2.4,4.344a1,1,0,0,1-.746.508l-5.127.664,3.627,3.152a1,1,0,0,1,.326.943l-.883,4.586,4.783-2.242a.99.99,0,0,1,.425-.095" transform="translate(-680.123)" fill="#0b3b5d"></path> </svg>NEW</span>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, nihil. Provident excepturi accusamus minus distinctio autem recusandae repellendus? Atque obcaecati repellat consectetur magni sequi! Eaque explicabo quia saepe esse non!

Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh.

Large button style
<p><a href="enter url here" class="button">Enter button text</a></p>

Learn More

Large button style
<p><a href="enter url here" class="button button--arrow">Enter button text</a></p>

Learn More

Small button style
<p><a href="enter url here" class="button button--small">Enter button text</a></p>

Learn More

Custom buttons:

SMB Homepage 2

<p><a href="enter url here" class="button button--small button--arrow home-header-cta-2">Enter button text</a></p>

Enter button text

SMB Homepage 1

<p><a href="enter url here" class="home-header-cta-1 h6">Enter button text</a></p>

Enter button text

Eyebrow text
<span class="eyebrow">Enter text here</span>

Used above headlines

H1 Style

Used for headlines in the hero section

H2 Style

Used minimally for headline text in the page content

H3 Style with Horizontal Line

Used for section headers with a horizontal line in the page content

H4 Style

Used for headline text in the page content

H5 Style

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

H6 Style

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

Paragraph Style

Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Lorem ipsum dolor sit amet. Consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh.

Hide entire section on mobile

Add periods between multiple selectors
Add a comma between multiple sections

Page Settings > Advanced Options > Additional code snippets > Head HTML

Autobooks Web Style Guide

H5 Headline placeholder copy on two lines for longer items

H5 Headline placeholder copy on two lines for longer items

H5 Headline placeholder copy on two lines for longer items

H5 Headline placeholder copy on two lines for longer items

Text Styles

Used for headlines in the hero section

Used minimally for headline text in the page content

Used for section headers with a horizontal line in the page content

Used for headline text in the page content

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

(Optional) H5 Attribution

Text Styles, Dark Mode

Used for headlines in the hero section

Used minimally for headline text in the page content

Used for section headers with a horizontal line in the page content

Used for headline text in the page content

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

Used for a subhead with H2-H4 headlines, or used as a headline over a paragraph

Colors

Modules

Testing

Optional subheadline text goes here

Optional subheadline text goes here

Optional subheadline text goes here

Optional subheadline text goes here

Optional subheadline text goes here

Optional subheadline text goes here

Optional subheadline text goes here

Optional subheadline text goes here

Hide section background image on mobile

Hide entire section on mobile

Non-breaking hyphen

Solutions for your Customers

Solutions for Financial Institutions

Autobooks Packages

Create a Successful Program

Partner Resources

Autoboooks Resources

Demand Banking

The Autobooks Blog for Financial Institutions

About Autobooks