Get Your Free Early Bird Snow Quote

CSS Styling Guidelines

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Button Text

To update the header image, click the gear icon to the left and add "page-banner" to the id on the row. If there is an image in this row, it will be used in the page title section; otherwise a random image will be used. Any p tags in this section will be moved under the page title.

The site is set to rotate between 5 random images.  They can be found in the Files App in the "page-banners" folder.  The file names for the images need to be "banner-1.jpg", "banner-2.jpg", "banner-3.jpg", "banner-4.jpg" and "banner-5.jpg"

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

[top]


Paragraph

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

[top]


Buttons

Button Primary

Button Secondary

Button Success

Button Alert

Button Text

Showcase - Back

Showcase - Read More

[top]


Accordion

[top]


Tabs

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

[top]


Search Results

  1. Search Result 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...
    View Page
  2. Search Result 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...
    View Page
  3. Search Result 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...
    View Page

[top]


List Types

Definition List

Definition List Title
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

[top]


Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

[top]


Testimonial

  • Good morning Mr Noel. Your due diligence in clearing snow from my residence and the return by your team on multiple occasions to remove the snow bank formed by city street plowing has been phenomenal. I am pleased that I switched to your service for winter 2021-22 and will sign up for winter 2022-2023.
    A. Miller

[top]


Blog posts

Car Insurance for the Whole Family

Car Insurance for the Whole Family

Posted Feb 27th, 2019 in Sample

If your teen is about to begin driving then it's time to start thinking about car insurance for the whole family!

Read more

Why Quality Home Insurance Matters

Why Quality Home Insurance Matters

Posted Feb 27th, 2019 in Sample

Your home is possibly your biggest asset, that's why protecting your investment with quality home insurance coverage is so important. 

Read more

[top]

Callouts

class="callout"

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Button

Primary Button

Secondary Button

Success Button

Alert Button

class="callout calloutLeft"

calloutLeft can be used on any callout type.

Text Button

class="calloutPrimary"

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Button

Primary Button

Secondary Button

Success Button

Alert Button

class="calloutSecondary"

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Button

Primary Button

Secondary Button

Success Button

Alert Button

class="calloutSuccess"

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Button

Primary Button

Secondary Button

Success Button

Alert Button

Full Width Rows

H2 Lorem ipsum dolor sit amet

Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.

Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.

H2 Lorem ipsum dolor sit amet

Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.

Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.

H2 Lorem ipsum dolor sit amet

Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.

Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.

H2 Lorem ipsum dolor sit amet

Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.

Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.

H2 Lorem ipsum dolor sit amet

Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et odio eget sem sollicitudin tempus. Donec enim est, aliquet luctus nunc sit amet, consectetur auctor dolor. Sed gravida ultricies varius. Quisque odio leo, auctor et lorem id.

Duis erat purus, vestibulum in lorem non, fringilla facilisis nisi. Morbi non purus ac elit blandit ultrices. Nam in sodales odio, et interdum urna. Etiam imperdiet sem at turpis pellentesque, et eleifend sapien vehicula. Aliquam erat volutpat. In auctor ligula ac ante hendrerit porta. Duis eget fermentum ligula.

Some class names to use:

On the row:

Class name What it does Value
centre Centres all content in row. Can also be used on elements.
bg Adds a background colour (default is light grey) and will add top and bottom padding
bg bg--primary Background colour
bg bg--secondary Background colour
bg bg--success Background colour
padding-top-sm, padding-bottom-sm Changes top or bottom padding
NOTE: For use with the "bg" class name
reduce-spacing Will reduce the top spacing on the row
full-width Allows background colour to extend the full width of the screen
full-width-img Text constrained to grid, image extends outside grid. Only use with two columns.
NOTE: On the column that contains the text, add the class "full-width__text"
full-width-img--left Image is in the left column
full-width-img--right Image is in the right column

On the column:

Class name What it does Value
callout Adds a background colour, padding to a column and centres the text
calloutPrimary Adds a background colour, padding to a column and centres the text
calloutSecondary Adds a background colour, padding to a column and centres the text
calloutSuccess Adds a background colour, padding to a column and centres the text
calloutLeft Makes the text left aligned. Can be added to any callout style.

Wildcards:

Class name What it does Value
centre, center Centres content

Delivering Top Rated Snow Removal, Material Delivery, Demolition and Excavation Services for 20 Years.

Trust in Noel's to get the job done right. 

Contact Our Team