Snippet Instructions
In September 2024, the San Diego Community College District website, sdccd.edu, was updated and launched to provide a more student-centered experience with a modern, interactive design.
Utilizing the District’s current content management system, Omni CMS, new elements were built to help present content in more usable, accessible, and interactive ways for both users utilizing the website on the front end and for content editors on the back end. The following documentation provides instructions for how to add and edit these new elements as well as best practices for when to utilize them.
Learning how to use the different snippets, sections, and elements is best learned through practice and trial and error, though the amount of practice needed is minimal. That is why we recommend creating a test page in the _examples folder to test out the different snippets. The _examples folder is not part of the navigation of the live SDCCD website so any mistakes you make on your test page will not cause issues to the live website.
View the Snippet Examples webpage for more examplesSnippets
Snippets are pre-built blocks of content that can be easily inserted into web pages to streamline the content creation process. Snippets act as reusable templates for common elements such as buttons, images, content sections, and other layout components. By using snippets, content editors can quickly add complex design elements without needing to write any code, ensuring consistency across the site and reducing the chance of errors.
Snippets can be customized based on the needs of the page while maintaining the District website's design standards. They also save time by allowing editors to efficiently manage content, especially in situations where the same structure or functionality is needed on multiple pages. Additionally, snippets ensure that the design and functionality are responsive, user-friendly, and accessible, adhering to best practices.
Accessible Table
| text | text | text | text |
|---|---|---|---|
| 1 | 3 | 5 | 9 |
| 2 | 4 | 6 | 8 |
| 3 | 6 | 9 | 12 |
Accordions
It is best to use the accordion snippet on a page when you need to organize and present large amounts of related content. Accordions allow users to expand or collapse sections as needed, and are useful for Frequently Asked Question (FAQ) sections, step-by-step processes, or when users might only need specific details at a time. Ensure that your accordions have appropriate headings that accurately describe the content within and that your style of heading is consistent across all accordions used on the page to help make them easier to scan.
One thing to note is that you should avoid overusing accordions, as they can hide important information or make content difficult to scan.
Accordion Content
Accordion Content
Accordion Content
Accordion Content
‘Accordion Titles’ can only be filled in with text but the ‘Accordion Content’ section can be filled in with text, images, and other snippets such as tables and buttons. Accordions cannot be nested within one another, however, so you cannot have an accordion within an accordion as the page will become unusable and inaccessible.
Once you have inserted the accordion snippet, you will see that only one accordion row is provided at a time. To add additional accordions, follow these steps:
Adding a Button, College Button Row, Button Row
Buttons are used throughout the SDCCD redesigned website to indicate a call to action. When adding a button to a page, you are provided with several different options:
Primary button
The primary button option gives you a black button with white text. Primary buttons, typically more prominent in color and placement, create a clear hierarchy, making it easier for users to identify the main task. They signal the most important actions that users should take such as “Apply Now”.
Visit the SDCCD homepageSecondary Button
The secondary button option gives you a white button with black text and a black border. Secondary buttons indicate less important or alternative actions like "Learn More," allowing users to distinguish between urgent and non-urgent tasks.
Learn more about financial aid optionsCollege Buttons
The College button options in the rest of the dropdown list give you the ability to add a button in the primary color of that College. College buttons should be used when providing a direct link to the relevant College website.
Primary City College Button
Visit the City College websitePrimary Mesa College Button
Visit the Mesa College websitePrimary Miramar College Button
Visit the Miramar College websitePrimary Continuing Education Button
Visit the Continuing Education websiteCollege Button Row
To add a quick, horizontal list of all four of the College buttons, you can use the “College Button Row” snippet.
Button Row
To add two buttons next to each other in a row, use the “Button Row” snippet.
Example 1:
Example 2:
Contact Card
The contact card snippet is best used to provide quick and accessible contact information for individuals or departments. It is especially useful on service-based pages where users may need to reach out for assistance. The Contact Card snippet provides the option of displaying the details like a persons name and title, phone number, email, their office location, and a website link.
If there is an input for a piece of information that you do not want to provide, such as a website link or office location, just leave the input space blank and it will not appear in the card once published. You do not need to link email addresses, or phone numbers as those will be hyperlinked automatically once published. However, website links must have the URL and the text provided for them to appear correctly in the card.
Contact card snippets should be placed in intuitive locations, such as at the bottom of relevant pages or to the side of the main content, as that is where most users look for contact information. It's also important to keep the information up to date to ensure reliability
Contact the City College Financial Aid Office
Float Image Left, Float Image Right
Float Image Left
Float Image Right
Image Card
Heading Text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur tempora provident deleniti quo exercitationem! Fugit magni voluptates laudantium maiores at!
Image with Accent Border
Resource List
- City College Financial Aid
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis error sint nulla necessitatibus rerum reiciendis, saepe ex veritatis cum iusto. Consequatur voluptate molestiae vero optio, obcaecati harum, nemo nam sequi tempore ipsam mollitia tempora iste a? Harum vero tempora distinctio!
- City College Financial Aid
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis error sint nulla necessitatibus rerum reiciendis, saepe ex veritatis cum iusto. Consequatur voluptate molestiae vero optio, obcaecati harum, nemo nam sequi tempore ipsam mollitia tempora iste a? Harum vero tempora distinctio!
- City College Financial Aid
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis error sint nulla necessitatibus rerum reiciendis, saepe ex veritatis cum iusto. Consequatur voluptate molestiae vero optio, obcaecati harum, nemo nam sequi tempore ipsam mollitia tempora iste a? Harum vero tempora distinctio!
Simple Card
lorem ipsum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum voluptate saepe delectus alias necessitatibus ipsam possimus assumenda fuga aliquam doloremque!
Card LinkSocial Icon Row
Top Border Card
Heading Text
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit necessitatibus commodi perspiciatis nobis et optio quasi reprehenderit itaque alias tempore.
LinkColumns
Column snippets are layout elements that allow content to be divided into multiple columns within a section, offering a structured and organized way to present information side by side. These snippets are particularly useful for organizing related content in a way that is easy for users to scan and engage with. Columns can be divided into halves, thirds, or quarters, depending on the content and design needs.
Ensure that content within each column is balanced, both visually and in terms of text, so that no one column overwhelms the others. Avoid placing too much content in each column to prevent clutter and maintain readability. It’s important to maintain consistency in styling, such as using uniform heading sizes, images, and spacing across all columns, to create a cohesive look.
2 Column Snippet
Content 1
Content 2
3 Column Snippet
Content 1
Content 2
Content 3
4 Column Snippet
Content 1
Content 2
Content 3
Content 4
Sections
A section is a full-width content area that spans the entire width of the page. They are used to divide a webpage into meaningful segments, such as call-to-action areas, featured content, or visual breakpoints between different topics.
Since section snippets are designed to span the full width of the page, avoid embedding them within other full-width sections to maintain proper spacing and layout integrity.
Apply section snippets when introducing new themes or content areas on the page, such as testimonials or a featured section. This helps break up content visually and improves the user’s ability to digest information. The background of section snippets can be changed to three different color options (white, SDCCD blue, or light blue) to help enforce that visual break. By alternating background colors, you can create a subtle contrast that helps guide users through different areas of the page without overwhelming them.
Examples of different section snippets are provided below. Reminder: Sections cannot be embedded within one another.
Standard Section
Image Content Section - Left
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia sequi fugit, nam facilis modi culpa sit tempore maxime quam autem vitae doloribus voluptates minima dignissimos dolor repellat suscipit aut. Molestiae praesentium officia quam natus blanditiis temporibus, asperiores nemo ad, laboriosam maiores quas illum adipisci veritatis rerum debitis! Tempora, dolores alias!
Image Content Section - Right
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia sequi fugit, nam facilis modi culpa sit tempore maxime quam autem vitae doloribus voluptates minima dignissimos dolor repellat suscipit aut. Molestiae praesentium officia quam natus blanditiis temporibus, asperiores nemo ad, laboriosam maiores quas illum adipisci veritatis rerum debitis! Tempora, dolores alias!
Tabs Section
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sequi blanditiis placeat quis ratione esse at, ducimus ut porro temporibus corrupti neque quae illo rerum iste necessitatibus ipsam facilis beatae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sequi blanditiis placeat quis ratione esse at, ducimus ut porro temporibus corrupti neque quae illo rerum iste necessitatibus ipsam facilis beatae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sequi blanditiis placeat quis ratione esse at, ducimus ut porro temporibus corrupti neque quae illo rerum iste necessitatibus ipsam facilis beatae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam sequi blanditiis placeat quis ratione esse at, ducimus ut porro temporibus corrupti neque quae illo rerum iste necessitatibus ipsam facilis beatae.
Parallax Image Section
Need Assistance? Link Section
Page Templates
Page templates are predefined layouts that provide a structured framework for creating different types of web pages, ensuring consistency and adherence to design standards across the District site. Each template is tailored for specific content needs, making it easier for content editors to build pages without starting from scratch.
New Department Landing Page Template
This template should be used for creating a landing page for a specific department. The design features a left-side navigation and the ability to add multiple sections/rows of content which can be tailored to that department.
[example]
New Landing Page (with sidebar) Template
Use this page template when you want to create a landing page for ______. This template features a left-side navigation for the folder/section the page is built in.
[example]
New Landing Page (without sidebar) Template
Use this page template when you want to create a landing page for ______. The Landing Page without sidebar template is suited for focused content that doesn’t require extra navigation, such as a promotional campaign or a single topic, allowing for a cleaner and more immersive user experience.
[example]
New Interior Page Template
This template is designed for standard content pages within the site, such as informational or resource pages.
[example]
New Section (with Index Page)
This template is used for creating a new section on the site and includes an index page as well as a _sidenav.inc file that allows for navigation items to be added and updated, as needed.
[example]
New File
This template is typically used for
[example]
Additional Resources
SDCCD Website Training Videos (September 2024)
Helpful Links
- html-cleaner.com
- HTML Cleaner is a tool that helps users quickly clean and format HTML code by removing unwanted tags, empty lines, and formatting inconsistencies, making it useful for tidying up and optimizing backend code.
- med.unc.edu/webguide/accessibility/headings
- This site provides guidance on using headings to improve web accessibility and create clear, organized content structure.
- sfs.mit.edu/how-to-pay/paying-your-bill/payment-deadlines-and-requirements
- MIT's student services site is a good example for ideal page length.