• white
    $white
  • black
    $black
  • rgba(0, 0, 0, 0.3)
    $shadow
  • #000000
    $black
  • #ffffff
    $white
  • #4a4a4a
    $grey-dark
  • #999999
    $grey
  • #e1e1e1
    $grey-light
  • #efefef
    $grey-xlight
  • #f8f8f8
    $grey-xxlight
  • #001a39
    $blue-dark
  • #002a5c
    $blue
  • #cadaed
    $blue-light
  • #f1f7ff
    $blue-xlight
  • #f7faff
    $blue-xxlight
  • #005e75
    $teal-xdark
  • #0080a3
    $teal-dark
  • #008bb0
    $teal
  • #ffd24f
    $yellow
  • #e31837
    $red
  • #961125
    $red-dark

To add to these items, use Sass variables that start with $ in ./components/_patterns/00-base/03-colors/_00-colors__vars.scss

This project assumes you apply a classes like "a-heading__h2" to every heading or used a scoped class as a wrapper like "s-wysiwyg". Without classes all headings look the same as below

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

By applying the classes like "a-heading__h2" the headings by default look the same as below

Titles are all-caps blocks appearing in UI components

Title 1

Title 2

Title 3

Title 4


Headings are inline headings appearing in content normally part of WYSWIYG text blocks

Heading 2
Heading 3

By Default headings are an H2 Element with H2 appearance

H2 Element w/ H3 Appearance

H1 - Title 1 appearance

H2 Element with link - Includes long text for viewing text wrapping

H4 Element w/anchor ID, Title 4 Appearance

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

Default Paragraph This is in Bold, consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

Small Paragraph, consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

Large Paragraph , consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

xLarge Paragraph , consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

'.a-type--no-trailer' Paragraph has no space after it. One paragraph runs into the next.

'.a-type--no-trailer' Paragraph has no space after it. One paragraph runs into the next.

'.a-type--no-trailer' Paragraph has no space after it. One paragraph runs into the next.

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Background artwork decorative illustrations. This element is always expected to be used with a section item. "List" "Card + List" or "Accordion".

Portrait images

Tower
1 girl on couch
1 guy 1 girl chat
1 guy reading
2 guys on phone
2 girls on laptop

Landscape images

1 girl at desk
1 guy 2 girls on phone
2 girls chat
2 girls 1 guy study
2 girls on phone
Conference Table
Tag Label
24
Apr
February 1, 2018
February 1-3, 2018
February 20 - March 2, 2018
December 31, 2017 - January 20, 2018
Report Document
Report Document
Report Document
Report Document
Report Document
Report Document

sprite-ui.svg

n/a

#ico-add-box
n/a

n/a

#ico-minus-box
n/a

n/a

#ico-arrow-down
n/a

n/a

#ico-arrow-left
n/a

n/a

#ico-arrow-right
n/a

n/a

#ico-arrow-up
n/a

n/a

#ico-chevron-down
n/a

n/a

#ico-chevron-left
n/a

n/a

#ico-chevron-right
n/a

n/a

#ico-chevron-up
n/a

n/a

#ico-quote-open
n/a

n/a

#ico-quote-close
n/a

n/a

#ico-search
n/a

n/a

#ico-chat-bubble
n/a

n/a

#ico-calendar
n/a

n/a

#ico-email
n/a

n/a

#ico-external-link
n/a

n/a

#ico-lightbulb
n/a

n/a

#ico-question
n/a

n/a

#ico-location
n/a

n/a

#ico-phone
n/a

n/a

#ico-fax
n/a

n/a

#ico-facebook
n/a

n/a

#ico-twitter
n/a

n/a

#ico-rss
n/a

n/a

#ico-drawer
n/a

50% width Image

This is my description Alt tag
This is my caption

Consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam.

Consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam.

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.Lorem ipsum dolor sit amet, consecvbnbv fgfhtetur adipiscing elit.

33% wide image

33 % image
This image is 33% of the width of the column.

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.Lorem ipsum dolor sit amet, consecvbnbv fgfhtetur adipiscing elit.

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.Lorem ipsum dolor sit amet, consecvbnbv fgfhtetur adipiscing elit.

25% wide image - No Caption

Sheep DogDonec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

100% Wide Image -

sdf sdfs dffsd
Don't align 100% wide images left or right!

Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.

Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor.

  • No Wrapping p tags - Lorem Pharetra Venenatis
  • Paragraph Wrapper vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  • Nested Unordered list with p tag wrappers

    • Morbi leo risus, porta ac consectetur
    • Ac, vestibulum at eros.
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  • Lorem Pharetra Venenatis
  • Nested ordered list
    1. Morbi leo risus, porta ac consectetur
    2. Ac, vestibulum at eros.
    3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  1. No Wrapping p tags - Lorem Pharetra Venenatis
  2. Paragraph Wrapper vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  3. Nested Unordered list with p tag wrappers

    • Morbi leo risus, porta ac consectetur
    • Ac, vestibulum at eros.
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  4. Lorem Pharetra Venenatis
  5. Nested ordered list
    1. Morbi leo risus, porta ac consectetur
    2. Ac, vestibulum at eros.
    3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  6. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  1. No Wrapping p tags - Lorem Pharetra Venenatis
  2. Paragraph Wrapper vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  3. Nested Unordered list with p tag wrappers

    • Morbi leo risus, porta ac consectetur
    • Ac, vestibulum at eros.
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  4. Lorem Pharetra Venenatis
  5. Nested ordered list
    1. Morbi leo risus, porta ac consectetur
    2. Ac, vestibulum at eros.
    3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  6. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  • No Wrapping p tags - Lorem Pharetra Venenatis
  • Paragraph Wrapper vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  • Nested Unordered list with p tag wrappers

    • Morbi leo risus, porta ac consectetur
    • Ac, vestibulum at eros.
    • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  • Lorem Pharetra Venenatis
  • Nested ordered list
    1. Morbi leo risus, porta ac consectetur
    2. Ac, vestibulum at eros.
    3. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
  • Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Default Table Header Column Narrow Column Narrow Column
Porta Yes Yes
Inceptos Yes No
Cras Elit Nullam Yes No
Nullam Foo Donis Yes No
Elit Yes No
George Brown - Transfer Credits. 6.00 Total Possible
George Brown Course Arts & Science Credit

SSCI 1012 Intro to Psychology I
+
SSC1 1015 Intro to Psychology II

PSY 100H1
+
TBB 1**H1

SSCI 1013 Intro to Sociology I
+
SSCI 1014 Intro to Sociology II
SOC 102H1 + SOC 103H1
Exclusion SOC 101Y1
or
SOC 101Y1
Exclusions SOC 102H1, SOC 103H1
HUMN 1033 Critical Approaches to Literature
+
HUMN 1034 Intro to Canadian Literature
ENG 1**H1
+
ENG 1**H1
Exclusion ENG 140Y1
GSCI 1024 Environmental Studies ENV 2**H1
GSSC 1055 Fundamental Themes in Geography GGR 1**H1
Exclusions GGR 100H1, GGR 107H1, GGR 124H1, Student should consult Department.
HUMN 1029 Intro to Phil I
+
HUMN 1030 Intro to Phil II
PHL 1**Y1
Exclusions PHL 100Y1, PHL 201H1
HUMN 1031 Canadian Studies
+
HUMN 1032 Foundations of Canadian Culture
UNI 2**Y1

Morbi leo risus, porta ac consectetur ac.

vestibulum at eros.

Donec ullamcorper nulla non metus auctor fringilla.

Morbi leo risus, porta ac consectetur ac.

vestibulum at eros.

Donec ullamcorper nulla non metus auctor fringilla.

Shared Suites

Session

Term

Rate

Full Summer

May 5 – August 19

$3,700

First Session

May 5 – June 29

$2,100

Second Session

July 1 – August 19

$2,100

Item 1

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Card Group

Kate Korycki, PhD
Assitant Professor

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

RM303, Woodsworth College Annex 123 St. George Street, Toronto ON
Kate Korycki, PhD
Assitant Professor

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

RM303, Woodsworth College Annex 123 St. George Street, Toronto ON
Kate Korycki, PhD
Assitant Professor

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

RM303, Woodsworth College Annex 123 St. George Street, Toronto ON
1

Item 1

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

There is no logical way to the discovery of these elemental laws. There is only the way of intuition, which is helped by a feeling for the order lying behind the appearance.

Albert Einstien - Personal Notes (1928)

This is a pull quote - Float Left (No styling)

"This is a pull quote - Float Right (No styling)"

Default Card Title

Card Subtitle

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card with only title

Card title with button

Feature Contact Card Title

Feature Contact Card Subtitle
RM303, Woodsworth College Annex 123 St. George Street, Toronto ON

Feature Card Title

June 1, 2018

Cras consectetur purus nec ultricies commodo. Cras ornare, enim ut vulputate interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula.

Feature Card Title

June 1, 2018

Cras consectetur purus nec ultricies commodo. Cras ornare, enim ut vulputate interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula.

Residence
WCSA

Feature Horizontal Card Title

June 1, 2018

Cras consectetur purus nec ultricies commodo. Cras ornare, enim ut vulputate interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula. Cras consectetur purus nec ultricies commodo. Cras ornare, enim ut vulputate interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula. Cras consectetur purus nec ultricies commodo. interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula.

Feature Horizontal Card Title

June 1, 2018

Cras consectetur purus nec ultricies commodo. Cras ornare, enim ut vulputate interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula.

Residence
WCSA

Feature Contact Card Title

Feature Contact Card Subtitle
RM303, Woodsworth College Annex 123 St. George Street, Toronto ON

Card

This is the subtitle

Call to Action Card - Large Text

Title type t2

WDW151H1
WDW151H2

Course Card Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card Token subtitle
Card Token subtitle

Card Highlight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi dolor, accumsan non nisi a, accumsan bibendum orci.

Kate Korycki, PhD
Assitant Professor

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

RM303, Woodsworth College Annex 123 St. George Street, Toronto ON
Kate Korycki

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

February 1, 2018

4:00 PM to 6:00 PM
FREE
William Waters Lounge, Woodsworth College Residence, 321 Bloor St. W.

February 1, 2018

4:00 PM to 6:00 PM
FREE
William Waters Lounge, Woodsworth College Residence, 321 Bloor St. W.

Default Color Card

Card Subtitle

Teal Color Card

Yellow Color Card

Red Color Card

Color Card Horizontal Default

Color Card Horizontal Teal

Color Card Horizontal Yellow

Title of the checkbox group*
This is the description of a checkbox group
Title of the radio group*
This is the description of a radio group
  1. February 28, 2018
    The Changing Face of Work - CIRHR Exhibit at Woodsworth College

    Cras mattis consectetur purus sit amet fermentum.

    Residence
    WCSA
  1. The Changing Face of Work - CIRHR Exhibit at Woodsworth College
    POL 101Y1
    (Full-Year Course)
  1. 28
    Sep
    Event Listing with single related person

    Aliquam imperdiet neque ut viverra volutpat. Vivamus sagittis arcu massa, id condimentum enim porta at. Mauris mattis justo ut ipsum feugiat, ultricies tempor nisi commodo. Sed vitae rutrum turpis. Aliquam imperdiet sem ullamcorper malesuada iaculis.

    Co-curricular
    WDW ONE
    Person Name
  1. 28
    Sep
    Event Listing with multiple people

    Aliquam imperdiet neque ut viverra volutpat. Vivamus sagittis arcu massa, id condimentum enim porta at. Mauris mattis justo ut ipsum feugiat, ultricies tempor nisi commodo. Sed vitae rutrum turpis. Aliquam imperdiet sem ullamcorper malesuada iaculis.

    Co-curricular
    WDW ONE
    Person Name, Person Two, New Person, Fourth Person, + 2 more
  1. 28
    Sep
    Event Listing with multiple people

    Aliquam imperdiet neque ut viverra volutpat. Vivamus sagittis arcu massa, id condimentum enim porta at. Mauris mattis justo ut ipsum feugiat, ultricies tempor nisi commodo. Sed vitae rutrum turpis. Aliquam imperdiet sem ullamcorper malesuada iaculis.

    Co-curricular
    WDW ONE
Call To Action
Have a Question about your application
Critical
Summer Sessions Applications Open
February 20 - March 2, 2018
Medium
Fall winter application deadline extention

Fall semester applications are now due on March 31, 2018

Unsupported Browser
Your Browser is out of date and is not supported by this website.
Please upgrade to Firefox, Chrome, or Microsoft Edge.
Primary tabs

Pattern Lab

This is a status message
This is a warning message
This is an error message

Applied Filters:

Person Name, Person Two, New Person, Fourth Person, + 1 more

Accordion Group

Praesent tincidunt scelerisque lectus, a vehicula urna posuere a. Vestibulum sit amet sodales massa. Quisque mollis sit amet ante a porta. Maecenas efficitur diam vitae gravida tempor.

Item 1 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Item 2 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Item 3 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Item 4 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Accordion Proccess Group

Praesent tincidunt scelerisque lectus, a vehicula urna posuere a. Vestibulum sit amet sodales massa. Quisque mollis sit amet ante a porta. Maecenas efficitur diam vitae gravida tempor.

1

Item 1 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

2

Item 2 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

3

Item 3 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

4

Item 4 label

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

A Conversation with the WCSA President

WCSA
August 28, 2017

President Ryan Minki Jeong discusses WCSA and what they do. For incoming students, adjusting to university life can be hard, but that's why student associations are here to help aid this transition! WCSA is the Woodsworth College Student Association and the association that brings to life Orientation Week around the college. In order for you to know more about your student association, we asked the president, Ryan Jeong, some questions on topics students want to hear about!

Co-Curricular Activities

Our weekly Co-Curricular activities have three objectives: to build community, to build academic skills, and to enhance course material. They include film screenings, academic workshops, field trips, guest speakers, and more. Here is a partial list of some of our past Co-Curricular activities

Recent News

A Place to explore ideas together

Future Students

Card Subtitle

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Current Student

Card Subtitle

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Stay Connected

News & Events

First Year Programs

Candidates not in highschool

Make a Difference

Residence

Card Subtitle

Cras consectetur purus nec ultricies commodo. Cras ornare, enim ut vulputate interdum, libero arcu rhoncus libero, vitae tristique nisl nunc sed ligula.

There is no logical way to the discovery of these elemental laws. There is only the way of intuition, which is helped by a feeling for the order lying behind the appearance.

Albert Einstien - Personal Notes (1928)

Section Text Title

Woodsworth College is located just a few minutes away from the Royal Ontario Museum, which boasts state-of-the-art galleries and exhibitions. As part of their discussion about innovation and social change, the students in the Order & Disorder stream recently visited the First Nations Exhibit at the ROM. They looked for evidence of technological innovation, and considered its impact on both indigenous and European communities. In addition, students identified the many ways in which societies record and explain the past.

Trip to the Royal Ontario Museum

Woodsworth College is located just a few minutes away from the Royal Ontario Museum, which boasts state-of-the-art galleries and exhibitions. As part of their discussion about innovation and social change, the students in the Order & Disorder stream recently visited the First Nations Exhibit at the ROM. They looked for evidence of technological innovation, and considered its impact on both indigenous and European communities. In addition, students identified the many ways in which societies record and explain the past.

Trip to the Royal Ontario Museum

Woodsworth College is located just a few minutes away from the Royal Ontario Museum, which boasts state-of-the-art galleries and exhibitions. As part of their discussion about innovation and social change, the students in the Order & Disorder stream recently visited the First Nations Exhibit at the ROM. They looked for evidence of technological innovation, and considered its impact on both indigenous and European communities. In addition, students identified the many ways in which societies record and explain the past.

Co-Requisite Courses

All students in this stream must also take at least two co-requisite First Year courses from the following list

  • Democracy, Dictatorship, War, and Peace:
An Introduction
    POL 101Y1
    (Full-Year Course)
  • Introduction to Philosophy
    (Full-Year Course)
  • Introduction to Sociology
    POL 101Y3
    (Half Credit Course – Fall)

News

Future Students

Card Subtitle
Woodsworth College at the University of Toronto invites applications for a continuing full-time teaching stream position in the area of Indigenous Cultures and Societies.

Core Courses

Students in this stream are required to take two half-credit courses (one in the fall term, one in the winter term). This counts as one total credit toward their undergraduate degree.

WDW151H1
WDW151H2

Course Card Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card Token subtitle
WDW151H1
WDW151H2

Course Card Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card Token subtitle

Core Courses

Students in this stream are required to take two half-credit courses (one in the fall term, one in the winter term). This counts as one total credit toward their undergraduate degree.

WDW151H1
WDW151H2

Course Card Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card Token subtitle
WDW151H1
WDW151H2

Course Card Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card Token subtitle
WDW151H1
WDW151H2

Course Card Title

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Card Token subtitle

Libero Facilisis

Vivamus eget commodo urna, et feugiat erat. Curabitur facilisis sem sed pharetra viverra. Maecenas porta odio id porttitor euismod. Suspendisse scelerisque lacinia metus.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12

This is my title

  • Item 1 Etiam porta sem malesuada magna mollis euismod.
  • Item 2 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla.
  • Item 3 Etiam porta sem malesuada magna mollis euismod.
  • Item 4 Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
  • Item 5 Nulla vitae elit libero, a pharetra augue.
  • Item 6 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  • Item 7 Maecenas faucibus mollis interdum.

This is my title

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
Fieldset Legend
Fieldset Description - this fieldset contains a "container" element; which contains 2 form elements
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
l-grid__alpha-omega - Edge to edge (Alpha is left, Omega is right)
l-grid__content - Spans content
l-grid__content - Spans content & Has 16 column sub-grid
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

l-grid__content-omega - Content regions + spans Omega (right page edge)

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Main Header

Main Content

Main Footer

Main Header

Main Content

Main Footer

Stay Connected

News & Events
Page Content Goes Here

This would be text from the WYSIWYG editor

It would have different paragraphs. Donec tristique nunc a congue tincidunt. Vestibulum tristique blandit magna ut tincidunt.

It could also have inline links. Pellentesque rhoncus molestie nisl quis blandit. Nam a euismod velit, eu tincidunt orci.

The general link style will apply unless custom btn styles are added in WYSIWIYG; like

a-btn style

Lists, both unordered and ordered will be styled as well.

Unorderd Lists

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.

Ordered List

  1. Vivamus vestibulum nulla nec ante.
  2. Praesent placerat risus quis eros.
  3. Fusce pellentesque suscipit nibh.
  4. Integer vitae libero ac risus egestas placerat.
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)

No Margins from children element are changed

Aliquam vitae ligula iaculis, sodales ligula facilisis, rhoncus lacus. Proin a eros erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent velit tellus, auctor sit amet dolor at, consequat pulvinar lacus.

Margin removed from childen elements

Top margin from first child elemnt and bottom margin from last child element are removed. liquam vitae ligula iaculis, sodales ligula facilisis, rhoncus lacus. Proin a eros erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent velit tellus, auctor sit amet dolor at, consequat pulvinar lacus.

This is followed by visually hidden text -> Visually Hidden Text

Unset by applying visually show class -> Visually Shown Text

University of Mainspring 123 Street Toronto Ontario, Canada