WYSIWYG Templates for Universal

This page is acting as a style guide for the WYSIWYG Templates that are available on the Universal Pages on the site. Templates are accessed via the second to last button on the WYSIWYG toolbar. Selecting one of the Templates from the list will insert a pre-formatted block of content into the editor, styled to match the design.

 

Below is the “Blockquote - full width” Template.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum natus, perspiciatis omnis asperiores numquam sapiente.

Author Name

Below is the “Blockquote - full width alternate style” Template.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus blanditiis quos repellat, quia quasi mollitia? Minima illo magni, odio voluptatem quis.

-Author’s Name

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum natus, perspiciatis omnis asperiores numquam sapiente.

Author Name

At right is the “Blockquote - right” Template. This Template is designed to sit flush right and inline with a paragraph of text and should be inserted before the paragraph in question. If there are a few paragraphs on your page, it is easiest to insert the Template before the first paragraph to obtain the desired wrapping effect.

At right is the “Blockquote - right” Template. This Template is designed to sit flush right and inline with a paragraph of text and should be inserted before the paragraph in question. If there are a few paragraphs on your page, it is easiest to insert the Template before the first paragraph to obtain the desired wrapping effect.

Below is an example of the “Columns - 2” Template. After inserting the Template into the editor, it’s important to be careful with placing your cursor inside the default text before changing it. Placing your cursor before or after the default text may lead to the content being placed outside of the div structure, and it will not be formatted correctly.

This is sample content placed into the left column.

This is sample content placed into the right column. Note that you can combine the column Template with other design elements such as Feature Blocks, Images, or buttons. This offers a lot of flexibility in building your pages.

 

Below is an example of the “Columns - 2 wide left” Template. Below is an example of the “Columns - 2 wide left” Template. Below is an example of the “Columns - 2 wide left” Template. Below is an example of the “Columns - 2 wide left” Template.

Note that this column is wide. It really is quite wide.

Note that this column is narrow.

 

Below is an example of the “Columns - 2 wide right Template. Below is an example of the “Columns - 2 wide right Template. Below is an example of the “Columns - 2 wide right Template. Below is an example of the “Columns - 2 wide right Template.

Note that this column is narrow.

Note that this column is wide. It really is quite wide.

 

Below is an example of the “Columns - 3” Template. Below is an example of the “Columns - 3” Template. Below is an example of the “Columns - 3” Template. Below is an example of the “Columns - 3” Template. Below is an example of the “Columns - 3” Template.

Column 1

Column 2

Column 3

 

Below is an example of the “Columns - 4” Template. Below is an example of the “Columns - 4” Template. Below is an example of the “Columns - 4” Template. Below is an example of the “Columns - 4” Template.

Column 1 Heading
Column 1 text text, text, text, text.

Column 2 Heading
Column 2 text, text, text, text and then more text.

Column 3 Heading
Column 3 text is basically the same as the other columns.

Column 4 Heading
Notice anything different about the heading in this column?

 

Below is an example of the “Feature block - brag box” Template.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Author Name

 

Below is an example of the “Feature block - image left landscape, text right” Template. Crop & resize your image to a 4:3 aspect ratio, preferably 1200 pixels wide x 900 pixels high, before uploading.

 

Profile
View All

Clifford J. Kavinsky, MD, PhD

Professor of Cardiology, Rush Medical College “Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.”

Read Profile

 

 
Below is an example of the “Feature block - image left portrait, text right” template. Crop & resize your image to 675 pixels wide x 900 pixels high before uploading.

photo placeholderAlumni Accomplishments
Class Notes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Submit a Class Note.

 

Below are examples of the “Feature block” template with different top border colors. Crop & resize your image to 600 pixels wide x 800 pixels high before uploading.

placeholder
Class Notes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Submit a Class Note.
placeholder
Class Notes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Submit a Class Note.
placeholder
Class Notes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Submit a Class Note.

Below is an example of the “Feature block - image with text below” Template. Crop & resize your image to 1200 pixels wide x 900 pixels high before uploading.

 

placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, error facilis similique maxime voluptas numquam beatae placeat neque autem.

 

Below is an example of the “Feature block - social media with icons” Template.

Below is an example of the “Image - full width with caption” Template. Crop & resize your image to 1200 pixels wide x 900 pixels high before uploading.

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, consequatur molestias dicta doloremque distinctio dolorem tempora tempore nulla soluta.

placeholder

At right is an example of the “Image - right aligned no caption” Template. Crop & resize your image to 800 pixels wide x 600 pixels high before uploading. Add the template before the paragraph you want it to sit to the right of.
At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned no caption” Template. Add the template before the paragraph you wantight of. 

placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, consequatur molestias dicta doloremque distinctio dolorem tempora tempore nulla soluta.


At right is an example of the “Image - right aligned with caption” Template. Crop & resize your image to 800 pixels wide x 600 pixels high before uploading. Add the template before the paragraph you want it to sit to the right of. 
At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. At right is an example of the “Image - right aligned with caption” Template. Add the template before the paragraph you want it to sit to the right of. 

Below is an example of the “Page element - accordion” Template.

Technology and Equipment

Lorem ipsum dolor sit.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum quos magnam veritatis!
  • Ad accusamus, illum libero, voluptates modi minima deserunt ipsa odio. Officiis, consectetur.
  • Ea quasi, sint ad doloribus tenetur non cupiditate impedit obcaecati officiis provident!
  • Iusto magnam hic aspernatur cupiditate accusamus tenetur atque vel dolore, blanditiis vitae.
  • Maxime eaque ipsa itaque accusantium perspiciatis quasi enim eos dolorem earum tempore.
  • Voluptatibus numquam sit deleniti illo obcaecati sint est excepturi quod similique fugit!
  • Sint dolorem expedita, numquam quos. Aut eaque sed voluptatibus! Excepturi, reprehenderit, culpa.
  • Sed voluptatem ut error architecto voluptatum ex facilis natus sit amet nulla.
  • Repellendus deleniti magnam commodi odio, consequuntur error est repudiandae quam! Quo, quidem.
  • Deserunt, nam. Alias ut distinctio id placeat vel iusto dolores quidem enim?
  • Quos voluptatem odit harum dignissimos non id quibusdam eveniet labore nobis facilis?
  • Voluptatem quidem dolore unde veniam fugit? Dolor iure voluptatibus incidunt eligendi facere.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto cumque ullam, velit necessitatibus unde nam facere sit optio reprehenderit reiciendis.

Training Services

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repudiandae unde eius. Aliquam inventore, deserunt voluptatibus reprehenderit, vero nisi adipisci.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id nam quia minus!
  • Consectetur, in, incidunt asperiores corporis quos aliquid. Minima excepturi, tempore voluptatum culpa!
  • Vel non consequuntur pariatur maxime et minima ad, omnis cupiditate quisquam atque?
  • Eos quasi aliquid in nihil autem unde cumque temporibus aperiam ipsa corrupti!
  • Quasi illum dolore libero quas voluptatibus at, nostrum eum nisi veritatis sint?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloribus eveniet, odio dolor, magni deserunt amet ducimus nemo minima tempora.

Tour Our Lab

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

Below is an example of the “Table - 2 columns” Template.

Column title Column title 2
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato

Below is an example of the “Table - 3 columns” Template.

Column title Column title 2 Column title 3
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato

Below is an example of the “Table - 4 columns” Template.

Column title Column title 2 Column title 3 Column title 4
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato
Column title Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato Column data lorem ipsum dolor sit amet calculato