Skip to main content

Spotlight

Spotlight

Serve as the hero anchor of your page with high-impact visuals, dynamic multi-image slideshows, and flexible text overlays. Designed primarily for homepages and primary landing sections, the Spotlight component offers four distinct height and layout options in both full-bleed and contained formats to capture visitor attention immediately.

Component Features & Options

Check out the features that make Spotlight such a versatile component.

A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Hero Section & Main Announcements: Create a commanding entrance for homepages with bold imagery and high-priority messaging.

A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Video & Image Slideshows: Cycle through an unlimited series of high-resolution photos or video slides to showcase campus life and events.

A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Mission & Core Values Split: Pair rotating visuals with static text blocks to present school mission statements, vision pillars, or leadership messages.

A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Testimonials & Success Stories: Highlight student, parent, or alumni quotes alongside compelling portrait imagery.

A blurry, low-resolution image of an indistinct yellow shape against a dark background. Four Layout Styles: Choose between Large (700px tall), Medium (500px tall), Small (split screen with rotating image and text side-by-side), or Small with Component Body (split screen with rotating images alongside static text).

A blurry, low-resolution image of an indistinct yellow shape against a dark background. Contained vs. Uncontained: Display as a full-bleed banner stretching across the browser width or keep contained within standard page margins.

A blurry, low-resolution image of an indistinct yellow shape against a dark background. Unlimited Image Slideshow: Add as many images as needed to create a continuously auto-scrolling visual story.

 

A blurry, low-resolution image featuring a solid yellow diamond shape. Overlay Text Styling: For Large and Medium layouts, overlay text over a black gradient or within a semi-transparent dark box for maximum readability.

A blurry, low-resolution image featuring a solid yellow diamond shape. Flexible Text Alignment: Position your overlay messaging on the left, right, center, or bottom of the frame to align with your image's focal point.

A blurry, low-resolution image of a solid golden-yellow shape on a dark background. None (Display As-Is): Show uploaded images in their original proportions without scaling or background fills.

A blurry, low-resolution image of a solid golden-yellow shape on a dark background. Blur Background: Fill any surrounding container space with a soft, blurred version of your image for a modern, polished look.

A blurry, low-resolution image of a solid golden-yellow shape on a dark background. Crop to Fit: Scale and crop your photos automatically so they fill the entire component frame seamlessly.

Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.

 

View Spotlight Help Article

  • A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Hero Section & Main Announcements: Create a commanding entrance for homepages with bold imagery and high-priority messaging.

    A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Video & Image Slideshows: Cycle through an unlimited series of high-resolution photos or video slides to showcase campus life and events.

    A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Mission & Core Values Split: Pair rotating visuals with static text blocks to present school mission statements, vision pillars, or leadership messages.

    A blurry, low-resolution image showing a solid yellow shape, possibly a square or diamond rotated on its side. Testimonials & Success Stories: Highlight student, parent, or alumni quotes alongside compelling portrait imagery.

  • A blurry, low-resolution image of an indistinct yellow shape against a dark background. Four Layout Styles: Choose between Large (700px tall), Medium (500px tall), Small (split screen with rotating image and text side-by-side), or Small with Component Body (split screen with rotating images alongside static text).

    A blurry, low-resolution image of an indistinct yellow shape against a dark background. Contained vs. Uncontained: Display as a full-bleed banner stretching across the browser width or keep contained within standard page margins.

    A blurry, low-resolution image of an indistinct yellow shape against a dark background. Unlimited Image Slideshow: Add as many images as needed to create a continuously auto-scrolling visual story.

     

  • A blurry, low-resolution image featuring a solid yellow diamond shape. Overlay Text Styling: For Large and Medium layouts, overlay text over a black gradient or within a semi-transparent dark box for maximum readability.

    A blurry, low-resolution image featuring a solid yellow diamond shape. Flexible Text Alignment: Position your overlay messaging on the left, right, center, or bottom of the frame to align with your image's focal point.

  • A blurry, low-resolution image of a solid golden-yellow shape on a dark background. None (Display As-Is): Show uploaded images in their original proportions without scaling or background fills.

    A blurry, low-resolution image of a solid golden-yellow shape on a dark background. Blur Background: Fill any surrounding container space with a soft, blurred version of your image for a modern, polished look.

    A blurry, low-resolution image of a solid golden-yellow shape on a dark background. Crop to Fit: Scale and crop your photos automatically so they fill the entire component frame seamlessly.

  • Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.

     

    View Spotlight Help Article

Examples

An aerial view of the Parent Square Schools building, featuring a large brick and glass exterior with a circular driveway.

Large Spotlight

Scroll through the slider to check out some Photo Fill options. This is a large spotlight with a bottom, gradient caption.

A vibrant, colorful playground sits outdoors next to a school building on a sunny day.

Photo Blur

When an image falls short of recommended dimensions, apply the background blur option to automatically fill remaining canvas space. This ensures a complete layout without cropping out key details from your original photo.

A diverse group of smiling high school students stand together in a school hallway lined with green lockers.

Photo Crop

Prefer a crisp, edge-to-edge photo without a blurred background? Select Crop under Photo Fill options to automatically fill the image frame. Keep in mind that outer edges of your photo will be trimmed to fit the dimensions.

An aerial view of the Parentsquare Schools building with buses and cars parked outside.

Large Contained

The taller height with added white margins around the photos.

A colorful, modern playground features slides, climbing structures, and a vibrant multi-colored ground surface outdoors.
A diverse group of smiling high school students stands in a school hallway lined with green lockers.
An aerial view of the Parentsquare Schools building with yellow buses and cars parked outside.

Medium Spotlight

Left align content with a gradient background and button link

Call to Action
A vibrant, colorful playground features a green twisting slide, climbing structures, and a brightly painted ground.
A diverse group of five smiling high school students stand together in a brightly lit hallway lined with green lockers.
A woman with long brown hair smiles gently against a textured purple background.

Testimonial

"Watching students make meaningful connections between classroom lessons and real-world challenges is what makes teaching here so rewarding. Our district gives us the resources, technology, and support we need to ensure every single child thrives."

A portrait of a young man with a warm smile, wearing a blue sweater over a plaid shirt against a purple backdrop.

Testimonial

"From advanced placement courses to our championship robotics team, there’s a place for everyone to find their passion here. The teachers don’t just prepare us for college—they actually listen to us and encourage us to lead."

A smiling man with blonde hair and glasses poses against a purple background.

Testimonial

"Our mission extends beyond academic excellence; we are building a safe, inclusive community where every family feels connected. When parents and schools partner together, there is no limit to what our students can achieve."

An aerial view of the Parentsquare Schools building, with yellow school buses and cars in the driveway.
A colorful, modern playground features a green twisting slide, climbing structures, and bright flooring.
Three smiling students stand together in a school hallway with green lockers.

A colorful logo for Smart Sites Public Schools featuring an open book with green leaves and a blue wave.

Small Spotlight with Component Body

Highlight a logo larger with the Mission and Vision statement. Mammoth is a great example of this component type.

An aerial view of the Parent Square Schools building, featuring a large brick and glass structure with yellow school buses parked outside.

Large Contained Spotlight

Title and body copy are right aligned with a call-to-action button.

Call To Action