This is a

Custom Message

For a header image...

Home » Typography and Style Guide

Website Logo, font(s), colors, and content styles:

company-logo-placeholder-gold
UPDATE: Primary Color (Hex Code):
#0b7b9c
Logo Color (Hex Code):
#455560
Secondary Color (Hex Code):
#0992b1
Light Background Color:
rgba(11,123,156,0.06)
Headings Font: Google font link »

Montserrat

Body Font: Open Sans
Google font link »

Additional Lighter Background Color:
#f4f4f4
Optional Pre-heading: Have only ONE H1 per page, for best SEO

H1 - Main page heading

Content area using INFOBOX - The most versatile component for presenting PRE-HEADING, HEADING, TEXT,  IMAGE and LINK, when desired (this instance is set-up as a simple Pre-heading, Heading, and Text presentation). Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. 

Side Bar Content Box

cta-main __ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit arcu vel nisi pellentesque ornare non eget metus. Nulla non turpis eu nisi egestas ornare eu vitae massa.

Nullam iaculis venenatis lacus non ornare. Nullam vitae porta dolor, non interdum magna.

unsplash_52d5b2dfdf619_1

H2 - Heading and content

PLACEHOLDER CONTENT: Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatuma.

H3 - Heading and content

PLACEHOLDER CONTENT: Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. At vero eos et accusamus et iusto odio dignissimos ducimus.

H4 Heading size 4

Content area using INFOBOX  
This instance is set-up as a simple heading and text presentation, with IMAGE and TEXT LINK.  

Read More »
H5 Heading

Content area using INFOBOX  
This instance is set-up as a simple heading and text presentation, with IMAGE and TEXT LINK.  

Read More »
H6 Heading

Content area using INFOBOX  
This instance is set-up as a simple heading and text presentation, with IMAGE and TEXT LINK.  

Read More »
Demo of off-canvas content

Dignissim molestiae ipsam minima sunt, reiciendis aliqua consectetur! Qui euismod, ipsa. Illum cumque? Dis. Nisl erat temporibus? Nascetur arcu rerum donec, nonummy proin eveniet exercitationem!

Nam, senectus, nihil! Interdum?

Quasi ut quidem, urna suscipit tristique nunc, iaculis fermentum deleniti. Amet consectetuer nulla. Ducimus hic. Turpis dolores occaecat necessitatibus aute aliquam? Eveniet ultricies dictumst aliquet accusamus, officiis morbi sapien occaecati cras, aperiam vestibulum, officiis qui quidem minim scelerisque explicabo, mi inceptos pulvinar quo diamlorem phasellus ut fugit perferendis dui nesciunt nobis, venenatis egestas aliquet cubilia! Fringilla, a aliqua veritatis aliquid cubilia sed, natus? Venenatis asperiores, sapiente error erat do auctor mollitia.

3-up infobox row

H3 Heading

Brief description text for this item.
NOTE: Set link & Icon/heading color/hover.

H3 Heading

Brief description text for this item.
NOTE: Set link & Icon/heading color/hover.

H3 Heading

Brief description text for this item.
NOTE: Set link & Icon/heading color/hover.

Customized 3-up row of UABB "interactive Banner 2" modules
demo-pic-002

Heading

Include a brief description for this item 

demo-pic-001

Heading

Include a brief description for this item 

demo-pic-000

Heading

Include a brief description for this item 

Accordion content

This is the content for the above heading (or question, when used as an FAQ). The settings for this module call for the first item to load in "open" mode, so that the visitor can easily see and interact with the functionality of this accordion content presentation. 

This is the content for the above heading (or question, when used as an FAQ). The settings for this module call for the first item to load in "closed" mode, so that the visitor can easily read the top item, then click this and other headings to open more accordion content. 

This is the content for the above heading (or question, when used as an FAQ). The settings for this module call for the first item to load in "closed" mode, so that the visitor can easily read the top item, then click this and other headings to open more accordion content. 

Call To Action

This kind of content is often used for a CALL TO ACTION (CTA), with which you may invite a visitor to click into a specific offer, or to your site's CONTACT page, to send you an email inquiry. Format the content as you wish, including:

  • Bulleted or numbered lists and links,
  • in addition to the  CTA Button. 

NetCrafters can help you customize colors & other styling. 

infoBox+accordion
demo-pic-004

H3 Heading for this block

Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.  

  • Phasellus vitae purus et ex imperdiet fringilla.
  • Sed sed turpis ultricies lectus pharetra dignissim at at enim.
  • Etiam vel urna eget velit mollis pulvinar.
  • Morbi lobortis est vitae cursus porta.

Read more »

demo-pic-004

H3 Heading for this block

Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.  

  • Phasellus vitae purus et ex imperdiet fringilla.
  • Sed sed turpis ultricies lectus pharetra dignissim at at enim.
  • Etiam vel urna eget velit mollis pulvinar.
  • Morbi lobortis est vitae cursus porta.

Read more »

demo-pic-004

H3 Heading for this block

Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.  

  • Phasellus vitae purus et ex imperdiet fringilla.
  • Sed sed turpis ultricies lectus pharetra dignissim at at enim.
  • Etiam vel urna eget velit mollis pulvinar.
  • Morbi lobortis est vitae cursus porta.

Read more »

Mixed: InfoBox + InfoList
800x800 placeholder

H2 Heading

Content area using INFOBOX  
This instance is set-up as a simple heading and text presentation, with IMAGE and TEXT LINK.  

Read More »
  • Info List H4 Heading

    This "Info List" module can present a number of intros to topics for a section of the site. It may set horizontally or vertically, with images or icons. 

  • Info List H4 Heading

    This "Info List" module can present a number of intros to topics for a section of the site. It may set horizontally or vertically, with images or icons. 

TAB SET CONTENT

Heading for this tab's content.

This is the content that appears for the selected tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading for this (SECOND) tab's content.

This is the content that appears for the selected tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading for this (THIRD) tab's content.

This is the content that appears for the selected tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTE: The row below is REFINED for optimal desk, tablet, and mobile display. To use this row of 4-up info boxes, it is best to copy as a whole row and update the images, links and content as coded. Copying or moving the boxes from column to column will break the carefully refined display settings for tablet and mobile display. You may DELETE this note. 

demo-pic-000

Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Read More »

demo-pic-002

Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Read More »

demo-pic-001

Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Read More »

demo-pic-000

Heading

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Read More »

Mixed: InfoBox + Accordion Lists

H2 section headline

Intro text for this two column accordion content (each column is its own list of topics).

Accordion Topic content 

content

content

content

content

content

H1 Headline

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.  

The
Balloon
Experts

Help with 
Changing
Seasons

Flip Boxes
company-logo-placeholder-gold

Intro text.

One line or so will do.

Tap or Hover for more

Flip Box Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

company-logo-placeholder-gold

Intro text.

One line or so will do.

Tap or Hover for more

Flip Box Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

company-logo-placeholder-gold

Intro text.

One line or so will do.

Tap or Hover for more

Flip Box Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  

HEADER EXAMPLES

The
Hiring
Experts

World
Class

Tools

Results to
Get Excited 
About

_Header - Wide Photo Right Overlay

LARGE TEXT HEADING

This header row is saved as:
_Header - Wide Photo Right Overlay

It will load on mobile with a portion of the photo and this text block beneath.

_Header - Wide Photo Left Overlay

LARGE TEXT HEADING

This header row is saved as:
_Header - Wide Photo Left Overlay

It will load on mobile with a portion of the photo and this text block beneath.

Pre-footer CTA (call to action)

NetCrafters Multisite

NetCrafters Multisite