Paragraph Examples
Group
A group must start every page.
Some paragraphs need to be in groups. Others can not be in a group.
Examples:
- Normal:
- 2 Groups (Normal + Narrow):
Narrow:
- /news/2024/10/jim-julie-higgins-hobo-day-plaza-dedicated-sdsu
- /fishback-center-early-childhood-education/fishback-center-enrollment-process
- /office-multicultural-affairs-accessibility/omaa-student-organizations
Teaser
Group: Inside only.
Example:
- Heading + Linked Text + both Buttons: /admissions
- Heading + Button:/ness-school-management-economics/first-dakota-national-bank-etrading-lab
- Heading + Button: /fishback-center-early-childhood-education
- Heading + Linked Text: /office-academic-affairs
- Used to divide sections: /housing-residential-life
- No Buttons: /welcome
- No Heading: /student-life/student-activities
Cards
Group: Inside only.
Examples:
- 4 card layout + titles:/school-health-human-sciences/school-health-human-sciences-research
- 3 card layout: /office-multicultural-affairs-accessibility/disability-services/disability-services-resources
- 2 card layout: /office-general-counsel
- Multi-card layout: /school-health-human-sciences
- 2 cards + 3 cards (5 cards) /emergency-management-preparedness/university-police
- 1 card layout: /school-education-counseling-human-development/teacher-education-program/teacher-education-graduate
- Links in description text: /school-education-counseling-human-development/teacher-education-program/teacher-education-graduate
- Cards with videos: /office-multicultural-affairs-accessibility/disability-services
- Card with button: /office-multicultural-affairs-accessibility/disability-services
- Cards no titles: /housing-residential-life
- Multiple groups of cards:/school-education-counseling-human-development/teacher-education-program
Cards No Images
Group: Inside only.
Examples:
- 2 cards no links: /school-health-human-sciences/aviation-program
- No links, links in description:/school-health-human-sciences/athletic-training-program
- Link in description vs linked carded:/school-health-human-sciences/leadership-management-nonprofit-organizations-program
- No link w/linked cards: /transfer-student-information
Testimonial
Group: Both inside/outside.
Examples:
- Quote with video:
- Quote with image:
- Quote in a group:
- Quote with button
Image Promo
Group: Both inside/outside - only inside normal group.
Examples:
- With video: /school-health-human-sciences/exercise-science-program
- 2 links: /fishback-center-early-childhood-education
- Outside group white:
- Inside group: /school-performing-arts/music-sdsu/sdsu-band-ensembles
Outside group bone:
Lead Gen
Group: Outside only.
Examples:
Button Bar
Group: Outside only.
Examples:
- With description and secondary buttons:/school-health-human-sciences/aviation-program
- Title, no description:/school-education-counseling-human-development/teacher-education-program/teacher-education-graduate
- Primary and Secondary buttons: /continuing-distance-education
- No title: /housing-residential-life
Gallery
Group: Outside only.
Examples:
Office Directory
Group: Outside only.
Examples:
- /graduate-school/apply-graduate-school
- /oscar-larson-performing-arts-center
- Office different than what it is under: /academics
Notes:
- Related to information in the office directory. /office-directory
- Contact websupport@sdstate.edu to correct/change things.
- Goes at the bottom of the page.
Person Spotlight
Group: Both inside/outside.
Examples:
Upcoming Events
Group: Both inside/outside.
Examples:
**Will not be tagged to correct department until after we launch.**
Event Promo
Group: Both inside/outside.
Horizontal Card
Group: Inside only
Examples:
Accordions
Group: Both inside/outside.
Examples:
- Centered, inside group: /military-science/distinguished-army-rotc-alumni
- Right aligned, inside group: /military-science/army-rotc-faqs
- **Generally, we aren't using the title with the right aligned and use text or teaser before it if needed.
- Left aligned, outside group:
- Left aligned, inside group: /school-education-counseling-human-development/teacher-education-program/teacher-education-graduate
Callout Box
Group: Both inside/outside.
Examples:
- Blue
- Bone
- Blue and Bone
Accordion + Link List
Group: Outside only.
Examples:
- /admissions
- /student-life
- /office-academic-affairs/student-success-model
- /child-family-resource-network
Statistics
Group:
- Without an image - Both inside/outside.
- With an image - Outside only.
Examples:
- Without image
- With image
- Without image, inside group
Paragraph Use with Group Chart
| Paragraph Type | Use in Group? | Use outside Group? |
| Accordions | Yes | Yes |
| Accordion + Link List | No | Yes |
| Button Bar | No | Yes |
| Callout Box | Yes | Yes |
| Cards | Yes | No |
| Cards (No Image) | Yes | No |
| Custom Slider | No | Yes |
| Degree Explorer | No | Yes |
| Event Promo | Yes | Yes |
| Gallery | No | Yes |
| Horizontal Card | Yes | No |
| Image Promo | Yes *Normal Group only | Yes |
| Lead Gen Promo | No | Yes |
| Link List | Yes *Narrow Group | Yes |
| Office Directory | No | Yes |
| Person Spotlight | Yes | Yes |
| Single Item Slider | Yes | Yes |
| Statistics | Yes *Only without image in Group. | Yes |
| Teaser | Yes | Yes |
| Testimonial | Yes | Yes |
| Text | Yes | No |
| Upcoming Events | Yes | Yes |
If a paragraph has a color option of bone and it is put in a group, it will be made white.
