window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-VW9LZGJRZE'); Style Guide - Beach List Direct

Style Guide

Colors

Hex Values

$blue
#2F4E6F
$blue-lt
#C8D7E3
$red
#BD3D15
$white
#fff
$off-white
#EDEDE2
$tan
#EAE6DC
$gray-60
#707070
$gray
#525252
$black
#000
$green
#539864

Classes

default Paragraph Text

.blue Paragraph Text

.blue-lt Paragraph Text

.red Paragraph Text

.white Paragraph Text

.off-white Paragraph Text

.tan Paragraph Text

.gray-60 Paragraph Text

.gray Paragraph Text

.black Paragraph Text

.green Paragraph Text

Backgrounds

.bg--blue
.bg--blue-lt
.bg--tan
.bg--red

Font Styles

Achieve these styles by using: h1, .h1, or span.h1

H1 Heading Styles.

H2 Heading Styles.

H3 Heading Styles.

H4 Heading Styles.

H5 Heading Styles.
H6 Heading Styles.

Body Styles


p

This is the default size and styling for paragraph body copy throughout the site. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.


p.big

This text is larger paragraph text, good for the introductory paragraph of longer content.


p.small

This text is small paragraph text.


p.smaller

This text is an even smaller paragraph text.


p.heading

To change the font from Overpass to Chakra, use the class .heading


p a

This text is a hyperlink using the a element.


mark

This text is highlighted using the mark element.


blockquote
"Blockquote suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."
Blockquote Footer, Author

Lists

  • This is an Unordered List.

  • This is an Unordered List.
    • This is a nested Unordered List.
    • This is a nested Unordered List.
  • This is an Unordered List.
  • This is an Unordered List.
  • This is an Unordered List.
  1. This is an Ordered & Unordered List.

  2. This is an Unordered List.
    • This is a nested Ordered List.
    • This is a nested Ordered List.
  3. This is an Ordered List.
  4. This is an Ordered List.
  5. This is an Ordered List.
  1. This is an Ordered List.

  2. This is an Ordered List.
    1. This is a nested Ordered List.
    2. This is a nested Ordered List.
  3. This is an Ordered List.
  4. This is an Ordered List.
  5. This is an Ordered List.

Logos

Form Elements


Buttons & Styled Links

Showing the various ways buttons can be created with HTML and CSS classes through the content editor

p a.button

Click Me Button

p a.button.secondary

Click Me Button

p a.button.secondary.active

Click Me Button

Content Blocks

Proprietary mailing lists managed by Beach List Direct are available for list brokers and list industry professionals. Our managed lists provide records in a variety of categories. Proprietary mailing lists managed by Beach List Direct are available for list brokers and list industry professionals.

Our managed lists provide records in a variety of categories.

Proprietary mailing lists managed by Beach List Direct are available for list brokers and list industry professionals. Our managed lists provide records in a variety of categories. Proprietary mailing lists managed by Beach List Direct are available for list brokers and list industry professionals.

Our managed lists provide records in a variety of categories.