style-guide-and-templates

OptimizedImage,Optimized

style-guide-and-templates

  • Home
  • style-guide-and-templates

IN THIS SECTION

General

Getting Started

Heading 1 : 100px

Heading 2 : 100px

Heading 3 : 60px

Heading 4 : 50px

Heading 5: 40px
Heading 6: 35px

Fonts

Heading Font: Open Sans

Paragraph font: Raleway

Paragraph

Lorem ipsum dolor sit amet molestie cursus aliquet. Placerat bibendum fringilla torquent rhoncus nisi vitae aliquam felis maximus suscipit.

Interdum at magnis augue condimentum auctor ante. Non netus euismod purus finibus dui.

Sample Text

Social Icons

class: site-social-primary

instagramlinkedinyoutubetiktok

class: site-social-secondary

Block Quotes

Nulla quis nibh a enim lobortis gravida et et orci. Praesent quis hendrerit nulla. Cras convallis ac risus non elementum. Sed ligula nisl, luctus a ornare eget, elementum ultrices justo.

CITATION

Nulla quis nibh a enim lobortis gravida et et orci. Praesent quis hendrerit nulla. Cras convallis ac risus non elementum. Sed ligula nisl, luctus a ornare eget, elementum ultrices justo.

CITATION

Colors

  • Primary (main color): #003A70
  • Secondary: #C8102E
  • Text (Default text color): #000000

Ordered List

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

Unordered List

  • 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.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buttons

site-button-primary

site-button-secondary

site-button-full-primary

site-button-full-secondary

SITE-BUTTON-WHITE-BORDER-PRIMARY

SITE-BUTTON-WHITE-BORDER-SECONDARY

SITE-BUTTON-FULL-WHITE-BORDER-PRIMARY

SITE-BUTTON-FULL-WHITE-BORDER-SECONDARY

Dynamic Modal Buttons

Youtube Video

Vimeo Video

Normal Video

Gallery Options

Number of thumbnails to show on desktop:
Clases: site-thumbnail-dt-1 site-thumbnail-dt-6 (variation of 1 to 6)

Number of thumbnail to show on Mobile:
Clases: site-thumbnail-mob-1 site-thumbnail-mob-6 (variation of 1 to 6)

BlackBaud Options

Classes you can use:

  • To make directory image round: site-bb-image-round
  • To load directory into normal grid view: site-bb-image-grid
  • Show 2 directory in row with list view : site-bb-directory-list-2
  • Show list view: site-bb-directory-list
  • Team roster stack view: site-feature-table-stack

Components

Page Classes
  • custom-hide-search (hides search)
  • hide-in-menu (hide page from menu)
  • custom-sidebar-right (use when the sidebar needs to be on the right side)
  • custom-last-link (set's these pages as mini links at the bottom of the navigation)
  • custom-unclickable (prevents link from being clicke)
Gallery Features
  • Feature Name: custom-header-logo
  • Collection: gallery
  • Class:  custom-header-logo

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-hero-gallery
  • Collection: gallery
  • Class:  custom-hero-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-landing-gallery
  • Collection: gallery
  • Class:  custom-landing-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-two-col-gallery
  • Collection: gallery
  • Class:  custom-two-col-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-body-gallery
  • Collection: gallery
  • Class:  custom-body-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-tabbed-content-gallery
  • Collection: gallery
  • Class:  custom-tabbed-content-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-grid-gallery
  • Collection: gallery
  • Class:  custom-grid-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-search-gallery
  • Collection: gallery
  • Class:  custom-search-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-stacked-middle
  • Collection: gallery
  • Class:  custom-stacked-middle

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-last-big
  • Collection: gallery
  • Class:  custom-last-big

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-equal-width
  • Collection: gallery
  • Class:  custom-equal-width

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-footer-gallery
  • Collection: gallery
  • Class:  custom-footer-gallery

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-quarter
  • Collection: gallery
  • Class:  custom-quarter

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-side-by-side
  • Collection: gallery
  • Class:  custom-side-by-side

GO TO SETTINGS

OptimizedImage,Optimized

 

Addon Classes:

  • custom-athletics-logo (scrolling to a feature with custom-logo-swap will swap between main and this logo)
  • custom-hide-line (custom-hero-gallery)
  • custom-half (custom-hero-gallery)
  • custom-reverse (custom-hero-gallery, swap caption order)
  • custom-first-big (custom-landing-gallery)
  • custom-half-left (custom-landing-gallery)
  • custom-half-right (custom-landing-gallery)
  • custom-featured-image (custom-hero-gallery sidebar pages)
  • custom-button-inline (more description) 
  • custom-slicked (enable slick)
  • custom-modal-slideshow (link slideshow, enables popup of the link)
  • custom-theme-primary (custom-hero-gallery changes the bar color)
  • custom-theme-secondary (custom-hero-gallery changes the bar color)
  • custom-hide-gradient (content hero banner)
Display Features
  • Feature Name: custom-display
  • Collection: display
  • Class:  custom-display

GO TO SETTINGS

OptimizedImage,Optimized

 
Text Features
  • Feature Name: custom-footer-logo
  • Collection: text
  • Class:  custom-footer-logo

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-footer-content
  • Collection: text
  • Class:  custom-footer-content

GO TO SETTINGS

OptimizedImage,Optimized

 

  • Feature Name: custom-footer-copyright
  • Collection: text
  • Class:  custom-footer-copyright

GO TO SETTINGS

OptimizedImage,Optimized

 
Table Classes
  • custom-table-structure (table used side by side columns)
Other Feature Classes
  • custom-hide-separator (hide feature line)
  • custom-separator-primary (feature line color primary)
  • custom-separator-secondary  (feature line color secondary)
  • custom-pinned (used in landing or homepages to layer and pin features)
  • iframe-resize
  • iframe-resize-video
  • custom-hero-video (add class to video feature when you need the hero gallerto use an iframe video, feature must be in the same zone as the hero gallery feature)
Footer Features

Adding this to a paragraph within a text feature will keep the year up to date with the current year, regardless of the year typed into the span.
<span id="current-year">2022</span>

Example (set to 2022): 2022

Table Widths

50% 50%
33% 33% 33%

Table with the same width columns

Class: site-table-same-width

Heading 1 Heading 2 Heading 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Responsive table in mobile

Class: site-table-mobile

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Responsive table with same width in mobile

Class: site-table-same-width site-table-mobile

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Responsive table mobile stacked

Class: site-table-mobile-stack

ID NAme Subject Grade School section
1 Jo Subj 1 Grade 1 Senior
2 Sean $2,443 Grade 2 Prep
3 Rosie $1,181 Grade 1 Junior
4 Jorge $842 Grade 3 Senior
5 Felipe $99 Grade 3 Junior

Table Accordion

Class: site-table-accordion

Accordion Title 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Table Accordion

Class: site-table-accordion site-table-accordion-arrow-first

Accordion Title 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Accordion Title 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

SG - Site Feature Accordion

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.

SG - Site Feature Accordion

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.

Search Our School

Important Notice Popup

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tellus risus, congue et lorem sed, eleifend sagittis ex. Proin ac quam ac turpis fringilla tristique. Morbi et dapibus nibh. Vestibulum tincidunt tellus in velit ultrices suscipit. Maecenas nec ipsum purus. Cras ac tincidunt nulla. Phasellus tempus tortor ac orci facilisis, eu pulvinar ex convallis. Sed in posuere massa. Vestibulum justo diam, suscipit ut auctor non, ultricies quis risus. In purus nisi, fringilla quis arcu nec, iaculis facilisis enim. Integer fringilla vitae purus et bibendum. Fusce cursus nisl felis, ut dapibus odio pellentesque non.