LeadsNearby Website Style Guide

Contents

• Colors
• Elements
  • Typography
    • Headings
    • Body
  • Buttons
  • Icons
  • Custom Fusion Elements
  • Fusion Element Modifications
  • Nearby Now Widget
• Layouts

Colors

Brand Colors

	Name	Hex Code
	Yellow	#ffa400

Reference Colors

	Name	Hex Code
	Black	#000000
	Dark Gray	#1a1a1a
	Medium Gray	#333333
	Gray	#cccccc
	Light Gray	#e5e5e5
	Lightest Gray	#efefef
	Dark Red	#a01d20
	Red	#f43127
	Pink	#f62459
	Orange	#ff6a2b
	Yellow	#ffd058
	Green	#00972f
	Lime Green	#94cc61
	Navy Blue	#1e2b43
	Medium Blue	#004983
	Cobalt Blue	#006ada
	Light Blue	#aec6d8
	Grape	#a338c4
	Violet	#9a88c5

// SCSS Color Variables
$yellow-lnb: #ffa400;
$black: #000000;
$gray-dark: #1a1a1a;
$gray-medium: #333;
$gray: #cccccc;
$gray-light: #e5e5e5;
$gray-lightest: #efefef;
$red-dark: #a01d20;
$red: #f43127;
$pink: #f62459;
$orange: #ff6a2b;
$yellow: #ffd058;
$green: #00972f;
$green-lime: #94cc61;
$blue-navy: #1e2b43;
$blue-medium: #004983;
$blue-cobalt: #006ada;
$blue-light: #aec6d8;
$grape: #a338c4;
$violet: #9a88c5;

/* CSS Color Variables */
:root {
    --color-yellow-lnb: #ffa400;
    --color-black: #000000;
    --color-gray-dark: #1a1a1a;
    --color-gray-medium: #333;
    --color-gray: #ccc;
    --color-gray-light: #e5e5e5;
    --color-gray-lightest: #efefef;
    --color-red-dark: #a01d20;
    --color-red: #f43127;
    --color-pink: #f62459;
    --color-orange: #ff6a2b;
    --color-yellow: #ffd058;
    --color-green: #00972f;
    --color-green-lime: #94cc61;
    --color-blue-navy: #1e2b43;
    --color-blue-medium: #004983;
    --color-blue-cobalt: #006ada;
    --color-blue-light: #aec6d8;
    --color-grape: #a338c4;
    --color-violet: #9a88c5;
}

Elements

Typography - Source Code

Note: In most cases, typography styles should already be defined in Avada Theme Options, making the inclusion of these styles unnecessary

Headings

h1, h2, h3, h4 {
    color: #333;
    text-align: left;
    text-transform: none;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1em;
}

h1 {
    font-size: 2.45em;
}

h2 {
    font-size: 1.953em;
}

h3 {
    font-size: 1.563em;
}

h4 {
    font-size: 1.25em;
}

Body

body {
    color: #333;
    text-align: left;
    text-transform: none;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

Buttons

Icons

Custom Fusion Elements

Custom Image Frame

Options

Examples

Source Code

Fusion Element Modifications

Nearby Now Widget

The Nearby Now widget element is bundled in the lnb-nn-integration Wordpress plugin. See plugin repository for more detailed information. Example widget code is pasted below for reference and to show the structure of the HTML and styling is designed to be easy to modify.

<div class="lnbReviewsWidget lnbReviewsWidget--block" style="--accent-color:#000;--stars-color:#fee300;">
    <h3 class="lnbReviewsWidget__title">Company Name</h3>
    <svg class="lnbReviewsWidget__stars" id="lnb-review-widget-stars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 35">
        <path d="M20.5.4L26 11.6l12.4 1.8-9 8.7 2.2 12.3-11.1-5.8-11 5.8 2.1-12.3-9-8.7L15 11.6zM60.1.4l5.6 11.2L78 13.4l-8.9 8.7 2.1 12.3-11.1-5.8-11 5.8 2.1-12.3-8.9-8.7 12.3-1.8zM99.8.4l5.5 11.2 12.3 1.8-8.9 8.7 2.1 12.3-11-5.8-11.1 5.8 2.1-12.3-8.9-8.7 12.3-1.8zM139.4.4l5.5 11.2 12.4 1.8-9 8.7 2.1 12.3-11-5.8-11.1 5.8 2.1-12.3-8.9-8.7 12.4-1.8zM179 .4l5.5 11.2 12.4 1.8-9 8.7 2.2 12.3-11.1-5.8-11 5.8 2.1-12.3-9-8.7 12.4-1.8z"></path>
    </svg>
    <span class="lnbReviewsWidget__data">Rated 5.0 out of 15,000 reviews</span>
</div>

Layouts