This or That?

Which Component Should I Use?

Smart Sites currently offers 19 components. The Component Library classifies them into categories such as Text, Images, Links, and Files, and has tons of examples showing how they can be used and configured.

This guide is designed to help you choose between components when more than one could be appropriate.

Printable Version

Links vs. Icon Matrix Columns vs. Accordion & Tabs Spotlight vs. Horizontal Picture Series vs. Scroll Over Images Parallax vs. Banner in Columns

Links vs. Icon Matrix

Both of these integrate Font Awesome Icons.

Links

The Links component provides a quick, easy way to create polished link sections that look more elevated than standard plain text in a Columns layout. It offers flexible formatting across one, two, or three columns to neatly organize your content. Additionally, you can seamlessly combine Font Awesome and custom icons within the same display for enhanced visual appeal.

Icon Matrix

The Icon Matrix component offers expanded design flexibility, allowing you to display up to six items per row alongside custom background images and varied visual styles. It provides complete control over your layout, though you must select either custom or Font Awesome icons exclusively, as mixing icon types within the same component is not supported.

Links Example

Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est.
Integer habitasse
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend.
Aliquam facilisis
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis.

Icon Matrix Example

Lorem ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est.

Integer habitasse

Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend.

Tortor vel a

Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum.

Also Consider Buttons

Anywhere you see the rich text editor (Columns, Accordion & Tabs, Component Intros, etc.), you can insert buttons that link to a URL. Features:

A solid vibrant magenta shape centered against a black background. Slight animation on hover

A solid vibrant magenta shape centered against a black background. Three sizes and up to six colors (dependent upon your Site Design color palette)

A solid vibrant magenta shape centered against a black background. Option to make the button full-width

A solid vibrant magenta shape centered against a black background. Built-in logic automatically determines if the link should open in the same or a new tab

Small Default Large

Small, Full Width Default, Full Width

Large, Full Width

Columns vs. Accordion & Tabs

Columns

When working with concise text—such as one or two paragraphs—the Columns component is the ideal choice. It cleanly presents short content without overwhelming visitors browsing the page.

Accordion & Tabs

When managing large amounts of text, Accordion & Tabs break heavy content into distinct subtopics. Tabs suit short titles, while mobile screens automatically adapt tabs into accordion views.

Columns Example

Lorem ipsum odor amet

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.

Accordion Example

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.

Tabs Example

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.

Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.

Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis. Commodo pharetra arcu libero primis platea nostra mi. Primis pulvinar ipsum placerat luctus placerat senectus tincidunt et. Nascetur hac risus feugiat, vitae ut suspendisse habitant class. At odio dapibus lobortis sed porta.

Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum. Pellentesque litora eget nulla fermentum suscipit, tellus commodo diam. Ligula sit duis aliquam tristique mattis orci. Libero tellus ante dignissim nibh id cursus adipiscing dui ridiculus. Hendrerit mattis donec orci sit placerat congue. Quam iaculis arcu primis fringilla viverra ex suscipit sagittis in.

Lobortis et efficitur posuere feugiat purus curae elit habitasse magna. Luctus ipsum primis iaculis euismod neque. Facilisi a fringilla eu libero parturient. Urna class vestibulum mattis montes aptent condimentum inceptos commodo. Massa consequat fringilla accumsan convallis scelerisque. Sapien in euismod placerat efficitur lobortis ornare ligula. Ultricies fusce tempor ad auctor imperdiet egestas aptent torquent.

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.
Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.
Aliquam facilisis metus ipsum potenti gravida tristique. Nascetur magnis nascetur cras cursus taciti vehicula tristique magnis. Suscipit senectus risus auctor nascetur; habitant turpis. Commodo pharetra arcu libero primis platea nostra mi. Primis pulvinar ipsum placerat luctus placerat senectus tincidunt et. Nascetur hac risus feugiat, vitae ut suspendisse habitant class. At odio dapibus lobortis sed porta.
Tortor vel a, duis placerat urna ante convallis. Netus dis sollicitudin donec ante aliquet vehicula dictum platea volutpat. Vitae mollis sagittis cubilia euismod elit duis magna fermentum. Pellentesque litora eget nulla fermentum suscipit, tellus commodo diam. Ligula sit duis aliquam tristique mattis orci. Libero tellus ante dignissim nibh id cursus adipiscing dui ridiculus. Hendrerit mattis donec orci sit placerat congue. Quam iaculis arcu primis fringilla viverra ex suscipit sagittis in.
Lobortis et efficitur posuere feugiat purus curae elit habitasse magna. Luctus ipsum primis iaculis euismod neque. Facilisi a fringilla eu libero parturient. Urna class vestibulum mattis montes aptent condimentum inceptos commodo. Massa consequat fringilla accumsan convallis scelerisque. Sapien in euismod placerat efficitur lobortis ornare ligula. Ultricies fusce tempor ad auctor imperdiet egestas aptent torquent.

Also Consider: Icon Matrix

Ironically, you do not have to use icons! You can simply add boxes around/behind your text. Avoid this for text longer than a few sentences though.

Spotlight vs. Horizontal Picture Series vs. Scroll Over Images

All support adding a link: Spotlight via a button, HPS by clicking the image, and Scroll Over supports both.

Spotlight

Spotlight is designed for slideshows or standalone feature images, displaying unformatted visuals gracefully. It supports headline titles up to 500 characters and main body text up to 1,000 characters.

Horizontal Picture Series

Horizontal Picture Series displays up to six side-by-side images forced into equal widths with flexible ratios and corner rounding. It features optional captions up to 255 characters with fixed font styles.

Scroll Over Images

Scroll Over Images showcases up to eight uniform images arranged up to four across with adjustable height, margins, and corner rounding. It offers three shading options alongside customizable font styles.

Spotlight Example (Large)

A sunrise illuminates a forest with a soft, hazy light.

Lorem ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.

Risus nisi bibendum

A scenic view of mountains rising from the sea under a bright blue sky.

Integer habitasse

Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.

Malesuada hendrerit curabitur

Lorem ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Risus nisi bibendum montes integer amet, arcu primis volutpat ad. Eros eget luctus purus sit, sed primis euismod mi est. Sagittis turpis est, suspendisse euismod ullamcorper dictum massa. Tempor posuere dolor erat rutrum dui dictum maximus est. Suspendisse tincidunt platea cubilia tincidunt suspendisse scelerisque. Hac litora eu libero nisl consectetur egestas lacinia. Risus gravida hac ante mauris tellus dignissim placerat eu.

Risus nisi bibendum

Integer habitasse

Integer habitasse eleifend rutrum vel diam sollicitudin platea sem. Malesuada hendrerit curabitur magna sit euismod. Arcu feugiat nascetur facilisis sapien porttitor eleifend. Nam nec accumsan senectus volutpat, dictum vitae integer. Fermentum quis fermentum magna non ex et fames. Vulputate metus habitasse parturient enim, vestibulum vestibulum inceptos. Iaculis leo cubilia habitasse odio cras egestas luctus a! Maximus et consequat, sagittis enim imperdiet nostra. Senectus ultricies tincidunt felis ad massa convallis. Egestas placerat justo dolor, eleifend litora mollis hac dapibus.

Malesuada hendrerit curabitur

Horizontal Picture Series Example

Scroll Over Images Example

Also Consider Columns Component or Component Body

The Columns component text editor provides rich text editing that allows you to easily embed and hyperlink images. This is ideal for spotlighting a single featured visual or adding clickable graphics directly into a component body. Adding a link will give the photo a slight zoom animation. Beyond images, you can also format text, insert custom inline links, and craft clear call-to-action buttons all within a clean, flexible layout.

Superintendent's Message

Parallax vs. Banner Image in Columns

Parallax

Parallax components display graphics as fixed backgrounds with a subtle 3D scrolling effect, revealing image sections as visitors move down the page. Quick and simple to set up with streamlined settings, this option supports custom heights and optional copy subject to predefined text length and color options.

Banner Image

Columns components with background images display visuals trimmed for smaller screens rather than scaled down, maintaining defined height settings. Highly customizable and flexible, this option supports optional overlay text with complete design freedom and zero limitations on copy length or font color choices.

Parallax Image Example

Lorem Ipsum Dolor Sit Amet

Banner in Columns Example

Lorem Ipsum Dolor Sit Amet