OU Snippets: (Table Transformations)

Intro Text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet interdum ex. Maecenas maximus, magna rhoncus venenatis suscipit, justo lorem bibendum magna, eget mollis lacus purus sed tellus. Fusce et ante quis lectus tincidunt rhoncus ut ac magna.

Fusce maximus purus sed nisi blandit sodales. Sed volutpat orci sem, eget condimentum mi tempor egestas. Vivamus molestie at magna quis maximus. Suspendisse vulputate purus ut pulvinar semper. Donec libero sem, consequat ut felis at, faucibus varius felis. In ligula felis, auctor consectetur ex at, gravida semper orci. Ut ac pretium felis. Donec et justo blandit, congue justo in, dapibus leo. In finibus lacus ac enim pharetra dictum. Nam in viverra ante, at sagittis est. Nulla vel laoreet felis, et pulvinar eros.

Gray Note Box:

  

Blue Note Box:

 

Note Box - 1 Column

Note Box - 2 Column

 

Quote Callout 

Orientation Choices: right | left 

Sample Paragraph:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet interdum ex. Maecenas maximus, magna rhoncus venenatis suscipit, justo lorem bibendum magna, eget mollis lacus purus sed tellus. Fusce et ante quis lectus tincidunt rhoncus ut ac magna. Nulla facilisi. In facilisis ultricies ipsum, et aliquam ligula consectetur id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dictum at magna id dignissim.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Fusce maximus purus sed nisi blandit sodales. Sed volutpat orci sem, eget condimentum mi tempor egestas. Vivamus molestie at magna quis maximus. Suspendisse vulputate purus ut pulvinar semper. Donec libero sem, consequat ut felis at, faucibus varius felis. In ligula felis, auctor consectetur ex at, gravida semper orci. Ut ac pretium felis. Donec et justo blandit, congue justo in, dapibus leo. In finibus lacus ac enim pharetra dictum. Nam in viverra ante, at sagittis est. Nulla vel laoreet felis, et pulvinar eros.

 

Quote Callout with Citation

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

 

 

Author's Name

  

 

Responsive Table:

Use the Snippet called Responsive Table to insert a table on your page. After the snippet is placed on your page, you can use the Table tool  to add or remove rows and columns. Your content will reflow on mobile devices.

Note: Tables should be used only for data, not for design layouts.

Title	Content	Link
Title	Content	Link

 

Faculty Contact List (Snippet)

Name	Title	Office Location	Office Hours	Email	Website	Phone
Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____

 

Faculty Contact List with photos(Snippet)

Photo	Name	Title	Office Location	Office Hours	Email	Website	Phone
	Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
	Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
	Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
	Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____
	Name	Title	Office Location	Office Hours	email@mtsac.edu	Faculty Website	(909) 274 - ____

 

Green Chevron List (Snippet)

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

 

Green Chevron List 2- columns(Snippet)

 

Green Chevron List 3- columns(Snippet)

 

Full Width Accordian

• • Edit Title
    Edit/Insert Content
  • Edit Title
    Edit/Insert Content
  • Edit Title
    Edit/Insert Content

2 Columns Accordian

3 Columns Accordian

• • Accordion 1

    Panel 1.

    

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
  • Accordion 2

    Panel 2.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
  • Accordion 3

    Panel 3.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
• • Accordion 4

    Panel 4.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
  • Accordion 5

    Panel 5.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
  • Accordion 6

    Panel 6.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
• • Accordion 7

    Panel 7.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
  • Accordion 8

    Panel 8.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.
  • Accordion 9

    Panel 9.

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Ut gravida tortor sit amet felis consectetur, sit amet gravida purus congue. 
    • Proin dictum leo at hendrerit laoreet.
    • Quisque porta sem quis suscipit dictum.
    • Curabitur a leo sed nunc porta convallis.
    • Proin a eros et felis scelerisque tincidunt.
    • Vivamus non ante ornare urna tincidunt pellentesque vitae at orci.

column-count (Add style class)

You can simply add an enclosing <div> with the following class.
<div class="text2columns">...</div>

5 Columns: text5columns

 

5 Columns: text5columns

 

4 Columns: text4columns

 

3 Columns: text3columns

 

2 Columns: text2columns