Snippet Examples

This is text outside of a section snippet, this will look very awkward since it's not padded on the top, bottom or sides. Most snippets should be used either inside of the body of a page (for things like accordions) or in a section snippet. When editing a full width content area, it's always advised to at least start with a full section snippet.

Full Section Examples

The following examples are of "Full Sections", or snippets that go the full width of the page. These snippets are not designed to be used inside of another full width or section snippet.

Section Snippet

background color: bg-white

top/bottom padding: std-pad

Bottom Accent Border: no-border

Section Snippet

background color: bg-district

padding: md-pad

Bottom Accent Border: border-district-green bottom-accent-border

Section Snippet

background color: bg-district-light

top/bottom padding: sm-pad

Bottom Accent Border: border-district-orange bottom-accent-border

Tabs Section

Tab 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id recusandae alias illum, deserunt a at sit aliquid, pariatur, eaque quaerat corrupti eveniet delectus enim. Iusto libero aliquid ratione sint suscipit dicta! pariatur, eaque quaerat corrupti eveniet delectus enim. Iusto libero aliquid ratione sint suscipit dicta! Consequuntur ullam saepe cupiditate?

Tab 2

Tab 3

Tab 4

Image Content Section - Image Left

This is an example of the "Image Content Section - Image Left" snippet. This snippet has an image with a "border-district-light left-accent-border" style applied as well as a "primary" button below.

Primary Button

Image Content Section - Image Right

This is an example of the "Image Content Section - Image Right" snippet. This snippet has an image with a "border-district-orange right-accent-border" style applied as well as a "secondary" button below.

Text Link

Featured Section with Parallax Image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab hic eos beatae, inventore recusandae quaerat blanditiis perspiciatis distinctio? Laudantium suscipit unde magnam optio ad amet velit esse veniam, similique, excepturi sunt illo mollitia, consequuntur reprehenderit fugit consequatur omnis. Fuga, delectus reprehenderit! Labore facilis ad officia tenetur officiis tempore nisi rerum!

Call To Action

Layouts

Below are the different layout types that exist as snippets. In each of these layouts, we'll use the "top border card" snippet as our example element.

The "top border card" snippet allows you to put in a heading, short piece of text and a call to action link.

grid-50-50-enforced sm-gap

this is a 50-50 grid with a small gap

Heading Text

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit necessitatibus commodi perspiciatis nobis et optio quasi reprehenderit itaque alias tempore.

College	col1	col2	col3	col4	col5
SDCC	Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea corrupti aperiam rem ipsam nam? Ab sint voluptas nam in alias?	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tempora veniam enim esse amet eum, ipsum suscipit possimus. Perspiciatis fugit at, itaque debitis in dolores!	itaque debitis in dolores	test	test
SDMC	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tempora veniam enim esse amet eum, ipsum suscipit possimus. Perspiciatis fugit at, itaque debitis in dolores!	test	test	test	test
SDMiC	test	test	Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea corrupti aperiam rem ipsam nam? Ab sint voluptas nam in alias?	test	test
SDCCE	test	test	test	test	test

Snippet Examples

Full Section Examples

Section Snippet

Section Snippet

Section Snippet

Tabs Section

Tab 1

Tab 2

Tab 3

Tab 4

Image Content Section - Image Left

Image Content Section - Image Right

Featured Section with Parallax Image

Layouts

grid-50-50-enforced sm-gap

Heading Text

Heading Text

grid-50-50-auto md-gap

Heading Text

Heading Text

grid-60-40-enforced Lg-gap

Heading Text

Heading Text

grid-40-60-enforced xl-gap

Heading Text

Heading Text

grid-33-33-33-enforced sm-gap

Heading Text

Heading Text

Heading Text

grid-50-25-25-enforced sm-gap

Heading Text

Heading Text

Heading Text

grid-25-25-50-enforced sm-gap

Heading Text

Heading Text

Heading Text

grid-25-25-25-25-enforced sm-gap

Heading

lorem ipsum

Heading Text

Heading Text

Content Elements

Accordions

Resource List

Buttons

Button Rows

College Button Row

Social Icons

Images

border-district-green left-accent-border

border-district-Orange Right-accent-border

Tables

Table with Column and Row Headers

Table with Column Headers Only

Need Assistance?