Skip to main content

Component Examples

Accordion & Tabs - Component Example

The “Component Intro” area may be used as a written introduction to the content that follows.

  • Keep the default settings for the “Title Font” and “Color Scheme” to ensure a similar aesthetic throughout the website.

  • When possible, stick to a “One Column” or “Two Column” setup for this component.

  • When displaying this component on mobile, “Tabs” will revert to an “Accordion” style. To bypass potential issues, always use the “Accordion” style.

Announcements - Component Example

Best Practice

Best practice for the announcement component would be to set the “Announcement Change Interval” to “Do Not Auto Slide.”

Pause Feature

SmartSites has built-in pause functionality when displaying multiple announcements and setting the “Change Interval” to anything other than “Do Not Auto Slide.”

Change Interval

If auto slide is essential, keep in mind that reading speeds vary. You should select a setting that gives ample time for all reading abilities to process the content.

More Info Button

“More Info” is the default setting for the button to display. When utilizing this function, be sure to describe, within the text, where the button will lead the user. Click the “More Info” button below to visit the Accessibility Examples page.

Calendar Events - Component Example

Accessibility View of Full-Page Calendar

Below is the default “Calendar Events” component. No “Advance Options” need to be altered. Select a calendar and set the “Calendar Style” to one of the following options:

 

  • 4 Upcoming Events: Which will display a row of events, good to use as a condensed footer for a page.
  • 4 Upcoming Events, Full Calendar: Which is the default calendar setting on all of our pages.

Columns - Component Example

The “Columns” component is a widely used and versatile component, great for splitting content into aesthetic sections. No “Advanced Options” need to be selected. Choose a “Layout” and begin entering your content.

  • Photos, videos, links, buttons, text, and icons, and any combination of these, may be input into the columns.
  • Remember that on mobile, “Column 1 Content” will always display first, on top of additional columns.
  • When adding a button to any content, simply select both default values. If you need additional information about creating links and buttons, visit the “Accessibility Examples” webpage by clicking the button below.

Accessibility Examples

A great example of the “Columns Component” can be found on the BHSN website. The opening section titled “A Message from Matthew Stark” uses one column to write a welcome message and provide a clickable link to Principal Stark’s email. On the opposite side, there is an embedded video of Principal Stark. This is a good use of mixed media to share a message and information about the school. Click the button below to visit BHSN’s, Principal’s Welcome page.

 

BHSN - Principal's Welcome