Hero banners are large, prominently displayed sections at the top of a webpage, often spanning the full width of the screen.
Hero banners are the first thing visitors see when they land on a webpage. They create a powerful and visually appealing introduction to your website, immediately capturing attention and setting the tone for the overall user experience.
We have created two similar Hero banners, the simple one, and a more complex banner with intro body copy and buttons, in case it's needed.Here we are listing all the versions we are currently using, the only difference is the background image.
👉 Keep in mind hero banners are exclusively at the very beginning of the page.
👉 The top margin we are using on all Hero banners is important, do not delete nor edit this.
The "Split Content" layout is a common design pattern used to display content in a divided or asymmetrical manner. It allows you to present different types of content side by side, such as text, images, or other elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
Duis venenatis turpis eu tellus faucibus, vel molestie dui congue. Donec ut facilisis urna. Cras sodales, augue quis rhoncus varius, nibh metus consequat lacus, in blandit mi orci eget quam. Sed magna sapien, fermentum ut ante a, pharetra viverra odio. In interdum risus nisi, eu eleifend elit dapibus quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
Duis venenatis turpis eu tellus faucibus, vel molestie dui congue. Donec ut facilisis urna. Cras sodales, augue quis rhoncus varius, nibh metus consequat lacus, in blandit mi orci eget quam. Sed magna sapien, fermentum ut ante a, pharetra viverra odio. In interdum risus nisi, eu eleifend elit dapibus quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
Duis venenatis turpis eu tellus faucibus, vel molestie dui congue. Donec ut facilisis urna. Cras sodales, augue quis rhoncus varius, nibh metus consequat lacus, in blandit mi orci eget quam. Sed magna sapien, fermentum ut ante a, pharetra viverra odio. In interdum risus nisi, eu eleifend elit dapibus quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
Duis venenatis turpis eu tellus faucibus, vel molestie dui congue. Donec ut facilisis urna. Cras sodales, augue quis rhoncus varius, nibh metus consequat lacus, in blandit mi orci eget quam. Sed magna sapien, fermentum ut ante a, pharetra viverra odio. In interdum risus nisi, eu eleifend elit dapibus quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
Duis venenatis turpis eu tellus faucibus, vel molestie dui congue. Donec ut facilisis urna. Cras sodales, augue quis rhoncus varius, nibh metus consequat lacus, in blandit mi orci eget quam. Sed magna sapien, fermentum ut ante a, pharetra viverra odio. In interdum risus nisi, eu eleifend elit dapibus quis.
Yawkey Sports Training Center
512 Forest Street
Marlborough, MA 01752
Our phone number is: 508-485-0986
Card components are commonly used to display organized and visually appealing content in a grid or list format. They are versatile elements that can be used to showcase various types of information, such as products, articles, team members, or portfolio items.
For this website refresh, we included different type of cards, specially to show relevant information, display some numbers/stats, or even to list member of the SOMA staff.
All different types of cards are listed here:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum. Sed quam odio, commodo vel odio eget, mollis egestas ex. Maecenas magna felis, rhoncus ut sapien quis, rutrum malesuada mauris. Proin at purus diam.
ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum.
Learn more →Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum.
Learn More →Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum.
Learn More →Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a venenatis purus, in malesuada arcu. Donec ligula diam, pharetra sit amet pharetra ac, ultrices a ipsum.
Learn More →Stat text
Stat text
Stat text
Stat text
Stat text
Stat text
Stat text
Stat text
Stat text
Tabs are interactive user interface elements that allow users to switch between different sections or content within a single space without reloading the page. They are often used to organize and present a large amount of information or multiple views in a compact and intuitive manner.
We have two different options for tabs: horizontal and vertical.
Horizontal tabs are mainly used on the Sport Leagues pages, and Vertical tabs are being used on pages like "Inclusive Schools" and "Athlete Leadership" to explain the different programs and their details.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, ipsum vel ullamcorper scelerisque, urna magna placerat mi, et tempor ipsum nibh aliquet ex. Phasellus at sagittis metus. Aliquam et luctus massa. Morbi augue tellus, varius ut placerat ut, venenatis quis urna. Duis consectetur ipsum et viverra mollis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc imperdiet, lectus vel tincidunt lacinia, sapien est volutpat neque, ut fringilla nibh elit facilisis diam. Morbi vitae ex scelerisque, feugiat urna sit amet, pulvinar metus.Sed consequat metus mollis, tristique neque at, tempus eros. Duis placerat dui sit amet odio pellentesque, tempus volutpat elit finibus.
Phasellus ut diam rutrum, vehicula arcu vel, finibus enim. Nam felis lacus, venenatis at aliquam id, auctor semper libero. Donec et magna condimentum, sodales eros quis, feugiat turpis. Sed justo diam, efficitur non efficitur semper, sollicitudin a ligula. Nam venenatis tortor non lobortis rhoncus. Suspendisse quis gravida velit, ut eleifend orci. Pellentesque blandit quam rhoncus purus feugiat, eget efficitur ante vestibulum. Pellentesque ut sem eu orci porta malesuada nec at mi. Aenean vitae venenatis augue. Vivamus in laoreet arcu.
Donec at massa orci. Morbi pellentesque eu justo eu pulvinar. In hac habitasse platea dictumst. Vestibulum in tellus ligula. Donec et hendrerit ex, ut accumsan arcu. Sed suscipit lorem a ultrices varius. Donec finibus leo enim, ut scelerisque risus euismod vel. Vivamus at egestas odio. Nulla condimentum, turpis a laoreet vestibulum, purus sem tempus tellus, ut eleifend dolor lectus in est. Nam et dolor consectetur, interdum nisl id, pharetra justo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, ipsum vel ullamcorper scelerisque, urna magna placerat mi, et tempor ipsum nibh aliquet ex. Phasellus at sagittis metus. Aliquam et luctus massa. Morbi augue tellus, varius ut placerat ut, venenatis quis urna. Duis consectetur ipsum et viverra mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc imperdiet, lectus vel tincidunt lacinia, sapien est volutpat neque, ut fringilla nibh elit facilisis diam.
Morbi vitae ex scelerisque, feugiat urna sit amet, pulvinar metus.Sed consequat metus mollis, tristique neque at, tempus eros. Duis placerat dui sit amet odio pellentesque, tempus volutpat elit finibus. Phasellus ut diam rutrum, vehicula arcu vel, finibus enim. Nam felis lacus, venenatis at aliquam id, auctor semper libero. Donec et magna condimentum, sodales eros quis, feugiat turpis. Sed justo diam, efficitur non efficitur semper, sollicitudin a ligula. Nam venenatis tortor non lobortis rhoncus. Suspendisse quis gravida velit, ut eleifend orci. Pellentesque blandit quam rhoncus purus feugiat, eget efficitur ante vestibulum. Pellentesque ut sem eu orci porta malesuada nec at mi. Aenean vitae venenatis augue. Vivamus in laoreet arcu.
Donec at massa orci. Morbi pellentesque eu justo eu pulvinar. In hac habitasse platea dictumst. Vestibulum in tellus ligula. Donec et hendrerit ex, ut accumsan arcu. Sed suscipit lorem a ultrices varius. Donec finibus leo enim, ut scelerisque risus euismod vel. Vivamus at egestas odio.
We require all Unified Champion Schools to complete a mid and end of year survey to keep us informed on how your school is meeting the 3 components of Unified Sports, Youth Leadership and Whole School Engagement. The End of Year Survey for schools to complete will be ready soon!
In order for your school to be an official Unified Champion School, you must demonstrate the following 3 components. Once your school has these components, you can apply to become a Unified Champion School.
Special Olympics Unified Sports is a component of the Unified Champion Schools program that engages students with and without intellectual disabilities on the same sports team. Unified Sports provides valuable social inclusion opportunities for all teammates to build friendships on and off the playing field. Through modeling genuine inclusion for the entire school community, all teammates are challenged to improve their sports skills and fitness. In the process, young adolescents with and without intellectual disabilities increase their positive attitudes and perceptions toward their peers and establish friendships.
For other great examples of what unified sports looks like at the Middle School level, please check out the Middle Level Playbook.
We require all Unified Champion Schools to complete a mid and end of year survey to keep us informed on how your school is meeting the 3 components of Unified Sports, Youth Leadership and Whole School Engagement. The End of Year Survey for schools to complete will be ready soon!
In order for your school to be an official Unified Champion School, you must demonstrate the following 3 components. Once your school has these components, you can apply to become a Unified Champion School.
Fans in the Stands
MASC Plunge
School-Wide R-word Pledge
Respect/Pep Rally
College and university campuses across the country have a long history with Special Olympics, from UCLA, to Notre Dame, to Harvard. College campuses were some of the first places to let Special Olympics host games and training. Today, the role of colleges and universities has grown to College Clubs and Unified Sports offered on campuses, that connect college students and individuals with intellectual disabilities through sports to build friendships.
In order for your school to be an official Unified Champion School, you must demonstrate the following 3 components. Once your school has these components, you can apply to become a Unified Champion School.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, ipsum vel ullamcorper scelerisque, urna magna placerat mi, et tempor ipsum nibh aliquet ex. Phasellus at sagittis metus. Aliquam et luctus massa. Morbi augue tellus, varius ut placerat ut, venenatis quis urna. Duis consectetur ipsum et viverra mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc imperdiet, lectus vel tincidunt lacinia, sapien est volutpat neque, ut fringilla nibh elit facilisis diam.
Morbi vitae ex scelerisque, feugiat urna sit amet, pulvinar metus.Sed consequat metus mollis, tristique neque at, tempus eros. Duis placerat dui sit amet odio pellentesque, tempus volutpat elit finibus. Phasellus ut diam rutrum, vehicula arcu vel, finibus enim. Nam felis lacus, venenatis at aliquam id, auctor semper libero. Donec et magna condimentum, sodales eros quis, feugiat turpis. Sed justo diam, efficitur non efficitur semper, sollicitudin a ligula. Nam venenatis tortor non lobortis rhoncus. Suspendisse quis gravida velit, ut eleifend orci. Pellentesque blandit quam rhoncus purus feugiat, eget efficitur ante vestibulum. Pellentesque ut sem eu orci porta malesuada nec at mi. Aenean vitae venenatis augue. Vivamus in laoreet arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, ipsum vel ullamcorper scelerisque, urna magna placerat mi, et tempor ipsum nibh aliquet ex. Phasellus at sagittis metus. Aliquam et luctus massa. Morbi augue tellus, varius ut placerat ut, venenatis quis urna. Duis consectetur ipsum et viverra mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc imperdiet, lectus vel tincidunt lacinia, sapien est volutpat neque, ut fringilla nibh elit facilisis diam.
Morbi vitae ex scelerisque, feugiat urna sit amet, pulvinar metus.Sed consequat metus mollis, tristique neque at, tempus eros. Duis placerat dui sit amet odio pellentesque, tempus volutpat elit finibus. Phasellus ut diam rutrum, vehicula arcu vel, finibus enim. Nam felis lacus, venenatis at aliquam id, auctor semper libero. Donec et magna condimentum, sodales eros quis, feugiat turpis. Sed justo diam, efficitur non efficitur semper, sollicitudin a ligula. Nam venenatis tortor non lobortis rhoncus. Suspendisse quis gravida velit, ut eleifend orci. Pellentesque blandit quam rhoncus purus feugiat, eget efficitur ante vestibulum. Pellentesque ut sem eu orci porta malesuada nec at mi. Aenean vitae venenatis augue. Vivamus in laoreet arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, ipsum vel ullamcorper scelerisque, urna magna placerat mi, et tempor ipsum nibh aliquet ex. Phasellus at sagittis metus. Aliquam et luctus massa. Morbi augue tellus, varius ut placerat ut, venenatis quis urna. Duis consectetur ipsum et viverra mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc imperdiet, lectus vel tincidunt lacinia, sapien est volutpat neque, ut fringilla nibh elit facilisis diam.
Morbi vitae ex scelerisque, feugiat urna sit amet, pulvinar metus.Sed consequat metus mollis, tristique neque at, tempus eros. Duis placerat dui sit amet odio pellentesque, tempus volutpat elit finibus. Phasellus ut diam rutrum, vehicula arcu vel, finibus enim. Nam felis lacus, venenatis at aliquam id, auctor semper libero. Donec et magna condimentum, sodales eros quis, feugiat turpis. Sed justo diam, efficitur non efficitur semper, sollicitudin a ligula. Nam venenatis tortor non lobortis rhoncus. Suspendisse quis gravida velit, ut eleifend orci. Pellentesque blandit quam rhoncus purus feugiat, eget efficitur ante vestibulum. Pellentesque ut sem eu orci porta malesuada nec at mi. Aenean vitae venenatis augue. Vivamus in laoreet arcu.
This 3-column component allow us to preview some of the recent posts we have uploaded to the CMS. We can customize it so it features specific categories.
If you ever need to change the category featured on this section, follow these steps once you have copied and pasted this component into the page you want
1. Select the "blog-post-list" component.
2. Go to the settings panel (⚙️)
3. Scroll to "Filters"
4. We have already set one category-filter, you can pick any other category you want. You can also add a new filter if you want two categories featured here.
Jimena rolled to gold at her first Summer Games! Cheered on in ASL, this 9-year-old superstar finished with two medals and one big kiss on the cheek from her biggest fan...her little sister.
Amos stopped with 25 meters left in his race. One by one, the crowd started cheering. When he finally let go of the wall and finished, the entire pool erupted. He didn’t win gold—but that moment meant everything.
Team Massachusetts is heading to the 2026 USA Games! Holden Soccer, Bridgewater-Raynham Flag Football, Bowling, & Cambridge Warriors Basketball are in. More athletes to be announced after Summer Games!
A "FAQ component" is a feature or element commonly used on websites to display frequently asked questions and their corresponding answers. It is designed to provide quick access to helpful information and address common inquiries that users may have about a product, service, or topic.
The FAQ component often employs an accordion or toggle functionality, where the answers are initially hidden and can be expanded or collapsed to conserve space and improve user experience. This allows visitors to quickly scan through the questions and expand only the ones they are interested in.
You can add or remove these accordions depending on how many FAQ you have.
Couldn’t find what you were looking for? write to us at Ops@SpecialOlympicsMA.org
Couldn’t find what you were looking for? write to us at Ops@SpecialOlympicsMA.org
A "fullwidth image divider" typically refers to a design element that spans the entire width of the webpage and serves as a visual separator or divider between sections. It is commonly used to add visual interest, break up content, or create a distinct visual hierarchy on a page.
We have been using this component on content-heavy pages to create a visual break for the users.
A lightbox is a user interface element commonly used in web design to showcase images, videos, or other media content in an overlay or popup window. When a lightbox is triggered, it typically darkens the background and brings the media content to the forefront, providing a focused and immersive viewing experience.
In the context of websites, a lightbox allows users to view images or media without navigating away from the current page. When a user clicks on an image or a designated trigger element (such as a button or thumbnail), the lightbox opens, presenting the media content in a larger format. This prevents the need for the user to open a new page or interrupt the browsing flow.
The purpose of modals can be summed up in one word: focus. If you need visitors to focus on something simple, a modal window is one of the most effective means to do so.