Skip to Content
Aquinas Academy Catholic Grade School
Main Content

Styleguide

Please wait while we gather your results.

The following are the general styles, some blocks or blocks within a certain zone may have different styles, they will be noted as such further in this style guide.

Fonts

Text-

color: rgba(51,51,51,1);
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 1.6rem;
line-height: 1.4;
font-weight: 400;

Blockquotes
This is a blockquote. It uses the same styles as paragraphs, but indents the text on the left and right.
Unordered Lists
  • Unordered
  • List
Ordered Lists
  1. Ordered
  2. List
Horizontal Lines

 

Links

Sample link

 

Navigation Zones:

 

For Top Main nav and 1st child drop down nav use Top

For Utility nav use Utility

For Footer Bottom nav use Bottom

For Left nav use Side on Parent and Child

Only uncheck TOC if you never want the page to be displayed in a List Block (TOC, Filter)

 

 

Headers float50

The following headers, h1-h6, can be applied using the text editor's Format drop down menu in the Freeform, Form Editor and FAQ blocks. 

heading1 Amiri Font

heading1

heading2

heading2

heading3 Amiri Font

heading3

heading4

heading4

heading5
heading5
heading6
heading6

Text Editor Style

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

FloatLeft Images will float to the left of your content
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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Bsunt in culpa qui officia deserunt mollit anim id est laborum.unt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.t cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.unt in culpa qui officia deserunt mollit anim id est laborum.

onsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

FloatRight Images will float to the right of your content
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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ksunt in culpa qui officia deserunt mollit anim id est laborum.unt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.t cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.unt in culpa qui officia deserunt mollit anim id est laborum.

onsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Button

- highlight link and apply button Style

This is a button

 

Image Sizes

 

Large - width 640px

Medium - width 320px

Small - width 160px

Thumbnail - width 80px height 80px

Circles

Stripes can be used on Center Layout

This is a StripeDark

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a StripeMedium

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a StripeLight

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

FeatureOverlayDark# Block Stlye puts an opacity over the FeatureImage:

In this example you can see white with 20, 40, 70 overlays

 

 

Open AllClose All
  Question 1 Head

Forem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna

  Lorem ipsum dolor
Nullam varius mollis massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna
  Nullam varius mollis
Lorem massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna
  • Question 1 Head
  • Lorem ipsum dolor
  • Nullam varius mollis

Forem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna

Nullam varius mollis massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna
Lorem massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna

CardBackground with an H4

Lorem massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urnamassa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna

CardBackground with an H4

Lorem massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urnamassa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna

CardBackground with an H4

Lorem massa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urnamassa, molestie lacinia urnaadipiscing elit. Quisque pretium in quam sit amet tristique. Nullam varius mollis massa, molestie lacinia urna