Snippet Glossary
Welcome to the Snippet Glossary. This resource is intended to be a visual reference that displays how snippets, components and styles will look and operate on the page.
Visual Elements
Accordions
- Description
-
Creates collapsible content. The heading can only contain text. Add a new row to create another accordion tab.
- Developer Notes
-
Due to custom styling and the amount of script logic to make accordions accessible and also support Trumba spuds, do not embed accordions inside of accordions.
- ListItem1
- ListItem2
- ListItem3
- Description
-
Similar to the Accordion snippet, but instead of defined areas for each tab, headings are separated by a line.
- Developer Notes
- Due to custom styling and the amount of script logic to make accordions accessible and also support Trumba spuds, do not embed accordions inside of accordions.
- ListItem1
- ListItem2
- ListItem3
Alerts / Announcements
In Page Announcement Update
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci augue, dapibus nec lectus nec, volutpat bibendum ex.
Boxes
Buttons
Cards
Contact Boxes
Event Information
Icons
Lists
Photos / Image Elements
Quotes / Testimonials
Tabs
Tooltip
Video
custom class: btn btn-primary
custom class: btn btn-secondary
custom class: btn btn-secondary btn-sm
- Description
-
A styled button used for links.
Change to middle, or right-aligned, using the WYSIWYG text-align buttons. - Developer Notes
- For interactivity—changing states or JavaScript actions—use a
buttonwith the same classes.
- ListItem1
- ListItem2
- ListItem3
Contact Us
Advising Services
FOSS (5000) Bld., Room 5229- advising@shoreline.edu
- Phone
- 206-546-4559
- Fax
- 206-533-5101
Hours
- Monday - Thursday
- 8 a.m. - 5 p.m.
- Friday
- 8 a.m. - 4:30 p.m.
- Description
-
Table-less version of one column contact info
- Developer Notes
- ListItem1
- ListItem2
- ListItem3
Add your content here.
- Description
-
Table-less version of two-column contact info
- Developer Notes
- ListItem1
- ListItem2
- ListItem3
- Term
- Definition
- Term2
- Def2
- Description
-
A description list, with terms and descriptions
- Developer Notes
-
Multiple class styles can be added, separated by a space:
large-list list-bulleted list-orderedClass styles:
list-bulleted— Adds a disc icon similar to an unordered listlist-bulleted list-ordered— Changes disc icon to numbered list (1, 2, 3) similar to ordered list (both classes required)large-list— Increases the font size
- ListItem1
- ListItem2
- ListItem3
Transfer Planning
Tuesday, January 20
4:00pm - 5:00pm
Building | Room 101
- Description
-
Event feature (Manually populated)
- Developer Notes
- ListItem1
- ListItem2
- ListItem3
- Description
-
Places an embedded Formstack form, created given the Formstack ID and form name
- Developer Notes
-
Formstack ID— The ID is found in the form's URL: https://shoreline.formstack.com/forms/FORMSTACKID
- ListItem1
- ListItem2
- ListItem3
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
Column 2—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
- Description
-
Adds a green border to the left of column 2 content
- Developer Notes
- Not transforming
Applies a classRightCallOutGreenBorderto the div in the second column
- ListItem1
- ListItem2
- ListItem3
- Description
-
Creates a group of 5 linked icons
- Developer Notes
- Used on Current Students page
- ListItem1
- ListItem2
- ListItem3
Title H3
“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”
- Description
-
80% width of container—useful for larger video embeds
- Developer Notes
- ListItem1
- ListItem2
- ListItem3
- ListItem1
- ListItem2
- ListItem3
- Description
-
Creates an ordered list (1, 2, 3) allowing for optional classes to change the style
- Developer Notes
-
Multiple class styles can be added, separated by a space:
large-list list-expandedClass styles:
large-list— Increases number and font sizelist-expanded— Used for lists with larger text followed by a description
- ListItem1
- ListItem2
- ListItem3
Title
- ListItem1
- ListItem2
- ListItem3
- Description
-
Creates a list of quick tips; usually used within a column layout
- Developer Notes
- The title heading level can be changed using the element selector. See Unordered List (Custom) snippet for class options to use different icons.
- ListItem1
- ListItem2
- ListItem3
Page Column Layouts
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
- Description
-
80% width of container—useful for larger video embeds
- Developer Notes
- ListItem1
- ListItem2
- ListItem3
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
Column 2—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
Column 2—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
Column 2—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
Column 2—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Column 1—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
Column 2—Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat odio iste maiores quaerat excepturi sed. Repellat eligendi voluptatum vitae nesciunt quis consequatur laborum odio pariatur asperiores laudantium, nostrum ipsum eius! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Column 3—Quidem doloribus minus distinctio. Iusto pariatur facilis consequuntur itaque nihil amet magnam numquam voluptates? Aspernatur nulla doloribus autem eius dignissimos, maxime repellendus.
- List1
- List2
- List3
- List1
- List2
- List3
- List1
- List2
- List3
Tables
First column is locked. Right click a table cell to select deletion of a row or column.
| Film Title | Released | Studio | Budget |
|---|---|---|---|
| Frozen | 2013 | Disney | $150,000,000 |
| Toy Story 3 | 2010 | Disney Pixar | $200,000,000 |
| Minions | 2015 | Universal | $74,000,000 |
- Description
-
Freezes first column on horizontal scroll
- Developer Notes
- ListItem1
- ListItem2
- ListItem3
Right click a table cell to select deletion of a row or column in order to size the table according to your needs.
| Film Title | Released | Studio | Budget |
|---|---|---|---|
| Sources: Wikipedia & Box Office Mojo. Data is current as of September 1, 2015. | |||
| Frozen | 2013 | Disney | $150,000,000 |
| Toy Story 3 | 2010 | Disney Pixar | $200,000,000 |
| Minions | 2015 | Universal | $74,000,000 |
- Description
-
Creates stacked data on mobile devices.
- Developer Notes
- Requires visibility on-load within accordions in order to work. Stacked columns use
an added
data-titleattribute.
- ListItem1
- ListItem2
- ListItem3
| Head | Head | Head |
|---|---|---|
| Subject 1 | Subject 2 | Subject 3 |
| Subject 1 | Subject 2 | Subject 3 |
| Subject 1 | Subject 2 | Subject 3 |
| Subject 1 | Subject 2 | Subject 3 |
| Subject 1 | Subject 2 | Subject 3 |
- Description
-
General table with horizontal responsiveness built in.
- Developer Notes
- Always adds a horizontal scrollbar on tables, regardless of width.
- ListItem1
- ListItem2
- ListItem3
- 50/50 Two Column Text Snippet
- 50/50 Two Column Text Snippet (Reverse Layout on Mobile)
- Three Column Text Snippet
- Three Column List Snippet
- Accordion Snippet
- Image with Overlay Snippet
- Contact Info Two Column Snippet
- Contact Info One Column Snippet
- Courses
- Button Snippet
- Single Event Snippet
- Multiple Events Snippet
- News Feed Snippet
- OmniUpdate Support
- Green line on Left Snippet
- Two Column Snippet with 1/3 to 2/3 Width Ratio
- Two Column Snippet with 2/3 to 1/3 Width Ratio
- Two Columns with Quote on Right Side
- One Column Quote
- Quote - Testimonial Slider
- Rectangular Announcement with Button
- Square News/Announcement