UTM Minor

This section has documentation related to legacy features, tools, and methods specific to UTM Minor theme. The pages in this section are also tagged as with the keyword UTM Minor.

Functionally, UTM Minor and Fawn share many similarities and most instructions work for both. Methods and tools specific to UTM Minor will be filed in this section.

 

Administrative Toolbar (UTM Minor)

When logged in the toolbar is found at the top of the site.

From this toolbar you can:

The website header with administrative toolbar
The administrative toolbar as it appears for a logged in user. View full-size image.

Call to Action (UTM Minor)

An example of a call to action
An example of a Call to Action block

Description

A Call to Action is intended to grab a user's attention and draw them to a particular page or site. All Call to Action content contains a mandatory title, an image that is no larger than 228px wide by 228px tall (larger images will be scaled accordingly), and a URL with a title. Optionally, you may also include a short blurb to appear before the link.

Usage

 

Creating the Call to Action content

From the Add Content dropdown menu on the administrative toolbar select Add Call to Action.

You will need to do the following:

  • Enter a Title. The one in the example is "Call to Action Example"
  • Upload an image that is at at least 228px wide and enter appropriate alternative text.
  • Optionally, enter a blurb. This should be kept short. In the example it is "This is a short blurb."
  • Enter a link and give the link a title. The link title should represent an action. In the example this is seen as "Learn more".
  • Scroll to the bottom and click the Save button.

Once you have saved your call to action, it's time to add it to some pages.

 

Adding the Call to Action to pages

  1. From your administrative toolbar select Blocks
  2. Scroll down to the section titled Disabled, you should find an item with the title of your call to action.
  3. Select configure at the end of the row containing your block.
  4. In the section labelled Region settings locate the theme with (default theme) next to it.
  5. In the dropdown below this theme, choose Right Sidebar.
    • You can set the remaining themes to Right Sidebar as well, but it is not necessary unless you plan on changing themes.
  6. To show this only on specific pages, under Show block on specific pages choose Only the listed pages
  7. In the textarea below, enter the path for each page you want your call to action to appear on (one per line). They should be relative paths of the form "path/to/your-page" excluding the "www.utm.utoronto.ca/your-subsite/" portion.
    Tip: You can enter <front> to place the block on the front page. See an example of block visibility.
  8. Click Save block at the bottom of the page.

Your call to action will now appear on every page you listed in step 7!

For more information on blocks see Managing Blocks.

 

Best Practices

  • Avoid images of text where possible. See more about images of text.
  • Keep the blurb short.
  • Your link title should represent an action (e.g. "Act now", "Register here", "Learn more", etc.).
  • If linking to a page within your site, try using a relative URL in the URL field
  • While Call to Action blocks can be placed on either the left or right sidebars, it is recommended that they be placed in the Right Sidebar region for your pages for consistent placement throughout the site.
  • When placing the Call to Action block, try to limit the placement to pages that are relevant to the URL it is linking to. For example, if your Call to Action is targeted at new students it might not make sense to have it appear on pages targeted to returning students.

 

Feature Image Content

A screenshot of a feature image from Biology's website

Description

This content type is designed to be used as a decorative banner for your site's front page. The display of these will cycle through all published content.

The dimensions of the images must be exactly 930px wide by 200px tall at 72 dpi.

A visual representation of the image dimensions.
A visual representation of the Feature Image dimensions. This image has been resized; view the full image.

Best Practices

  • Avoid the use of text in this content. It is intended as background and may be ignored by assistive technologies.
  • If you are using this to advertise events or services perhaps consider switching to the Subsite Feature Box.
  • Try to keep the number of feature images published to a maximum of five. Any more than this and users probably won't see them all anyway.
  • Use high quality images. You will have better results if scale down a higher resolution image than enlarging a low resolution one.

Feature Box Content

An example of a subsite feature box

Description

This content type is designed to act similar to a Call to Action as well as a banner on the front page. Use this content type to draw users to a specific page, website, or advertise an event.

The dimensions of the images for this content type must be 930px by 200px at 72dpi. The left-most 360px will be covered by an overlay and the text portion of the content will be placed here. See the figure below.

A demonstration of feature box dimensions
A visual demonstration of the Feature Box dimensions. View full size.

There is a maximum of 5 items of this type that will be displayed at a time.

Note: The view for this cannot be active at the same time as the Feature Image banner block.

 

Best Practices

A demonstration of feature box design best practices
A visual demonstration of the Feature Box design best practices. View full size.
  • Design elements should be kept to the right as there is an overlay that obscures the left-most 360 px. You should avoid text on your image on the left side for this reason as well.
  • Items should be changed frequently.

 

Site's Appearance (UTM Minor)

Selecting Appearance from the administrative toolbar will allow you to access theme settings.

As of the 2017-09-14 update, most sites will be using the UTM Minor theme. Within the appearance settings you can change the colour scheme of this theme. There are 5 colour schemes to choose from.

Note: Selecting a colour scheme from the dropdown will display a preview image of the selected scheme. This will not take effect on your site until the settings are saved.

Settings will only take effect after clicking on the Save Configuration button. 

News Content (UTM Minor)

A screenshot of a news article

Description

The news content type is used to publish stories about events, initiatives or people/groups.  It should be noteworthy, it should relate to something recent (not “old” news) and ideally it should quote individuals who are relevant to the story. It should also include a relevant image with sufficient alt-text (see: Accessible Images and Multimedia) for which your department, UTM, or U of T holds full rights.

Best Practices

  • News writing uses the “inverted pyramid” form of storytelling, which clusters the most important information at the beginning of the story (the “who/what/where/when/why”), followed by details of diminishing importance. Further information can be found at https://en.wikipedia.org/wiki/Inverted_pyramid and https://owl.english.purdue.edu/owl/resource/735/04/.

  • Keep news stories short, particularly on the web. Limit the word count to no more than 400-500 words. Titles and captions should also be short.
  • Use active verbs, and avoid long or convoluted sentences. Clarity is best.

  • Include links wherever relevant.

  • Put the names of U of T Mississauga faculty, staff or students mentioned in the copy in bold text.

  • If you are republishing the story from another source, ensure that you have permission to do so, and include the name of the author and a link to the original source.

Displaying News Content

As mentioned on the Available Content Types page, there is a pre-defined path for all news articles. You can access this by going to /<your-subsite>/news where <your-subsite> is replaced with the url for your Drupal subsite.

For example, http://www.utm.utoronto.ca/iits/news

In addition to this page there are three block options available for your subsite. Any of these can be added to your site by requesting it via the ticket system ( https://helpdesk.utm.utoronto.ca/helpdesk ).

  1. Headlines display
  2. Grid display
  3. News listing display

All of the listed blocks will display the previous 4 news articles sorted by the value of the Date field in the content.

Headlines Block

The headlines block can be placed either sidebar, but it is generally recommended that it be placed on the right sidebar on your main page.

An example of the headlines block

News Grid Block

Generally this block is placed on the main page of your subsite. 

An example of the news grid

News Listing Block

News listing block thumbnail
This image of a news listing block has been reduced in size, you can view the full-sized version.

Rich Text Editor (UTM Minor)

This page provides step-by-step instructions (with pictures) for inserting images and media into your content.

Jump to:

Inserting Images

The steps below will outline the process of adding a new image to your content. If your image has already been uploaded previously, you can skip from step x to step y.

  1. Click on the Image button
  2. In the image dialog window, click on the button labelled Browse Server. This will open a pop-up file browser in a new window.
  3. Select the folder you want the image to be uploaded to (or the location of the existing image if it has been previously uploaded) on the left-hand side in the Navigation window.
  4. Click on the Upload button in the upper left-hand corner on the file browser menu bar.
  5. Click on the Choose File button.
  6. Select your image and click open.
  7. Click on the button labelled Upload in the bottom of the upload dialog.
  8. Select your image file from the listing window in upper right quadrant.
  9. Click on the Insert file button with the green checkbox in the file browser menu bar. This will close the file browser window and fill in the path to your file in the editor field.
  10. Enter your Alternate text. For more on alternate text see Alternate Text.
  11. Press the OK button at the bottom of the image dialog window.
  12. Your image should now appear in the editor window.

In Images

Step 1 - Click on The Image Button

A screenshot of the CKEditor image button

Step 2 - Click on the Browse Server button

Browse button

Step 3 - Select folder to contain (or containing) image

Arrow pointing to folder navigation in IMCE

Step 4 - Click on Upload button on file browser menu

Upload button in IMCE highlighted in red

Step 5 - Click on Choose File

Choose file button circled in red

Step 6 - Choose your file

Choose File dialog on Windows 7
Open File Dialog on Windows 7
Choose File dialog on OSX
Open File Dialog on OSX

Step 7 - Click on the Upload button in the dialog

The upload button highlighted

Step 8 - Select your image in the file browser

An arrow pointing at selected file

Step 9 - Click on Insert file button

Upload button circled in red

Step 10 - Enter your alternate text

Alternative text highlighted in red

Step 11 - Click OK

The OK button circled in red

Step 12 - Your image should now appear in the editor window

CKEditor with an image in the editor

Wrapping Text Around Images

Step 1 - Select your image by clicking on it

An image is selected in the RTE

Step 2 - Click on the Styles dropdown button

'Left' being chosen from styles dropdown

Step 3 - Choose your style from the Object Styles section

For more information available image styles see the Image Style Cheatsheet.

An image on the left with text wrapping around it.

An image with the 'Left' style applied.

 

Inserting Media

You can embed media such as videos into your pages through the RTE as well. The embed must be using the <object> tag, if it is using the <iframe> tag, it will be stripped out by the editor (see known issues).

You need to use the Old Embed Code Utility to generate these embeds for YouTube videos.

YouTube Share Links
Step 1. Using YouTube's sharing url

Embedding a YouTube video

  1. From YouTube video, copy the sharing url that it provides
  2. Go to Old Embed Code Utility 
  3. In the "YouTube video code or URL" field, paste the sharing url you copied in Step 1
  4. Click the Generate Code button. This will generate the code that you need to use in Step 6
  5. In the edit page you want to embed the video in, click the Embed Media button
    edit media button
  6. Paste your embed code you generated in Step 4 into the textarea in the pop-up dialog window and press OK.
    The media embed textarea

Image Style Cheatsheet

This page is designed to demonstrate the various image layouts that can be achieved using the RTE. Text is shown to demonstrate how text will wrap with the image. For each example, the image is inserted before the first word in the first paragraph. Plain Image refers to an image being inserted with no styling options added.

Additionally, images can be wrapped in a figure tag with a caption via a figure tag and caption via a figcaption tag. This currently requires modification of generated HTML via the Source view.

Plain Image

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Left

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Right

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Center

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Framed Left

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Framed Right

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Framed Center

Drupal LogoLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.


 

To demonstrate the "Small" variants, a larger image will be used.

Plain Image (Larger Example)

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Small Framed Left

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Small Framed Right

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Small Framed Center

Patrick Gunning and Eugenia Duodu talkingLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Figure Example

Patrick Gunning and Eugenia Duodu talking
Patrick Gunning and Eugenia Duodu talking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Figure with class 'left'

Patrick Gunning and Eugenia Duodu talking
Patrick Gunning and Eugenia Duodu talking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.

Figure with class 'right'

Patrick Gunning and Eugenia Duodu talking
Patrick Gunning and Eugenia Duodu talking

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies at nisl ut dictum. Vivamus blandit lacus vel tincidunt fringilla. Etiam eu est lacus. Aliquam erat volutpat. Praesent mauris lectus, vestibulum sit amet tellus eu, facilisis hendrerit ipsum. Proin finibus, nibh eu placerat pellentesque, leo neque rutrum lectus, in consectetur sapien lorem id nunc. Pellentesque pellentesque lacus sed libero malesuada, sit amet auctor nulla dapibus. Nulla eget pellentesque ligula. Morbi pellentesque est sit amet tincidunt pretium. Phasellus finibus ex neque, nec tincidunt nisl varius consectetur. Praesent odio libero, mollis sit amet urna eget, luctus maximus eros. Curabitur aliquam nisl turpis, id euismod orci laoreet eget. Aliquam ornare tristique urna vitae euismod. Integer lacinia ex non posuere gravida. Praesent auctor dignissim enim, id sagittis arcu accumsan quis. Sed lobortis nisl et odio sagittis iaculis.

Duis varius semper tellus sed rhoncus. Duis vulputate, elit nec efficitur suscipit, sem nisl interdum nisl, nec mattis elit tellus et mauris. Suspendisse eu turpis condimentum nunc egestas interdum. Duis justo ex, venenatis eget nulla sit amet, varius porttitor elit. Sed sagittis risus a urna ultrices convallis. Duis ipsum urna, bibendum mattis ligula id, congue tempor est. Ut ac ante ultricies, laoreet lacus sed, consequat nisi. Sed ut mauris at nibh consequat tempor nec vitae lectus. Praesent tristique, nunc sed egestas scelerisque, tortor enim dignissim tortor, ut vestibulum magna orci vitae leo. Praesent non nibh eleifend, euismod lacus malesuada, convallis felis. Morbi elit ligula, gravida vel tincidunt ut, vestibulum vitae nulla.