colors

▼
  • 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

headings

▼

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

Heading

▼

By Default headings are an H2 Element with H2 appearance

heading h2 link

▼

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

heading h3 variation

▼

H2 Element w/ H3 Appearance

heading t1

▼

H1 - Title 1 appearance

heading t2 link

▼

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

heading t2

▼

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

heading t3 link

▼

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

heading t4 anchor

▼

H4 Element w/anchor ID, Title 4 Appearance

heading t4 link

▼

H4 Element w/ link, Title 4 Appearance

inline elements

▼

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

paragraph

▼

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.

preformatted text

▼ 
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 { | } ~

hr

▼

art bg

▼

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

Button (Default)

▼
Default Button

button wrapping

▼
Default Button with really long text to show wrapping

button secondary

▼
Secondary Button

button link

▼
Link Button

button link secondary

▼
Secondary Link Button

button link secondary white

▼
Secondary Link Button - White Variation

button menu primary

▼
Primary Menu Button

button menu secondary external

▼
Secondary Menu Button

button menu secondary

▼
Secondary Menu Button

button menu tertiary

▼
Priority Plus Menu Button

button icon expand

▼

button icon square

▼
Hidden text

button icon toggle

▼

chip

▼
Tag Label

chip link

▼
Tag links to List

date calendar

▼
24
Apr

date

▼
February 1, 2018

date day range

▼
February 1-3, 2018

date month range

▼
February 20 - March 2, 2018

date year range

▼
December 31, 2017 - January 20, 2018

Icon w/ Accessible Title

▼
Report Document

icon no title xsml

▼
Report Document

icon no title sml

▼

icon med

▼
Report Document

icon xmed

▼
Report Document

icon lrg

▼
Report Document

icon xlrg

▼
Report Document

sprite-ui icon set

▼

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

image

▼

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.

link icon blue

▼
letterWrapExample@reallyReallyLongDomainName.com

link icon

▼
letterWrapExample@reallyReallyLongDomainName.com

link red

▼
letterWrapExample@reallyReallyLongDomainName.com

list

▼
  • 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.

list ordered white

▼
  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.

list ordered

▼
  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.

list white

▼
  • 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.

tables

▼
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

table~ long

▼
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.

table~ price

▼
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

token

▼

token small

▼

token large

▼

Video (16x9 Default)

▼

Video (4x3)

▼

accordion item

▼

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.

accordion item cards

▼

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
(416) 623-1685
(416) 623-1685
(416) 623-1685
Learn More
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
(416) 623-1685
(416) 623-1685
(416) 623-1685
Learn More
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
(416) 623-1685
(416) 623-1685
(416) 623-1685
Learn More

accordion item process

▼
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.

blockquote

▼

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)

blockquote link

▼

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)

pullquote

▼

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

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

card

▼

Default Card Title

Card Subtitle

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

Learn More

card 1 no link

▼

Card without a button

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

card 2 title only

▼

Card with only title

card 3 title with button

▼

Card title with button

Learn more

card 4 3 feature horizontal map

▼

Feature Contact Card Title

Feature Contact Card Subtitle
RM303, Woodsworth College Annex 123 St. George Street, Toronto ON
(416) 623-1685
(416) 623-1685
(416) 623-1685
Learn More

card 4 4 feature

▼

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.

Learn More

card 4 feature

▼

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.

Learn More
Residence
WCSA

card 5 1 feature horizontal

▼

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.

Learn More

card 5 feature horizontal

▼

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.

Learn More
Residence
WCSA

card 6 feature horizontal blue

▼

Feature Contact Card Title

Feature Contact Card Subtitle
RM303, Woodsworth College Annex 123 St. George Street, Toronto ON
(416) 623-1685
(416) 623-1685
(416) 623-1685

card 7 feature horizontal blue

▼

Card

This is the subtitle
Learn more

card 8 call to action

▼

Call to Action Card - Large Text

Title type t2

Default Button

card 9 contact

▼

Contact Card

119 St. George St.
(416) 946-7397
(416) 946-7397
(416) 946-7397
Default Button

card course

▼
WDW151H1
WDW151H2

Course Card Title

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

Learn More
Card Token Title, PhD
Card Token subtitle

card token

▼
Card Token Title, PNI
Card Token subtitle

card highlight

▼

Card Highlight

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

Default Button

card person

▼
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
(416) 623-1685
(416) 623-1685
(416) 623-1685
Learn More

card person minimal

▼
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.

Learn More

card popup

▼
Pop-up Card Title

card event

▼

February 1, 2018

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

card event minimal

▼

February 1, 2018

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

card color

▼

Default Color Card

Card Subtitle
Learn More

card color 1 teal

▼

Teal Color Card

Learn More

card color 2 yellow

▼

Yellow Color Card

Learn More

card color 3 red

▼

Red Color Card

Learn More

card color 4 horizontal

▼

Color Card Horizontal Default

Learn More

card color 5 horizontal teal

▼

Color Card Horizontal Teal

Learn More

card color 6 horizontal yellow

▼

Color Card Horizontal Yellow

Learn More

card color 7 horizontal red

▼

Stay Connected

Sep 30 - Annual Saul Goldstein Memorial Lecture
July 22 - Alumni-Students Mentorship Program News

input

▼

input is invalid

▼

input submit text

▼

label

▼

label required

▼

select

▼

select grey

▼

form item checkbox

▼

form group checkbox

▼
Title of the checkbox group*
This is the description of a checkbox group

form item radio

▼

form group radio

▼
Title of the radio group*
This is the description of a radio group

textarea

▼

listing item

▼
  1. June 10, 2018
    Spotlight: How Indigenous studies helped Julie Blair connect with her culture

listing item 1 tags

▼
  1. February 28, 2018
    The Changing Face of Work - CIRHR Exhibit at Woodsworth College
    Residence
    WCSA

listing item 2 news long

▼
  1. February 28, 2018
    The Changing Face of Work - CIRHR Exhibit at Woodsworth College

    Cras mattis consectetur purus sit amet fermentum.

    Residence
    WCSA

listing item 1 course

▼
  1. The Changing Face of Work - CIRHR Exhibit at Woodsworth College
    POL 101Y1
    (Full-Year Course)

listing item 2 event

▼
  1. 28
    Sep
    The Changing Face of Work - CIRHR Exhibit at Woodsworth College
    Co-curricular
    WDW ONE

listing item 3 event on blue

▼
  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

listing item 4 event on blue

▼
  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

listing item 5 event on blue

▼
  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

message

▼
Call To Action
Have a Question about your application
Contact Us

message critical

▼
Critical
Summer Sessions Applications Open
February 20 - March 2, 2018

message medium

▼
Medium
Fall winter application deadline extention

Fall semester applications are now due on March 31, 2018

message browser

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

breadcrumbs

▼

menu inline

▼

menu inline secondary

▼

menu main

▼

menu mobile

▼

menu secondary mobile

▼

menu secondary

▼

priority plus

▼

tabs

▼

Pager

▼

Pagination

First Page
Page 1
Current page 2
Page 3
Page 4
Page 5
Page 6
Last Page

pager mini

▼

Pagination

First Page
Page 1
Page 2
Page 3
Current page 4
Page 5
Page 6
Last Page

search mobile

▼

share

▼

share blue

▼

snippet

▼

Pattern Lab

snippets

▼

status

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

tag filter

▼

Applied Filters:

token group

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

accordion

▼

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 process

▼

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.

content

header

▼

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!

header medium

▼

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

header minimal

▼

Recent News

mosaic

▼

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.

Learn more

Current Student

Card Subtitle

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

Learn more

Stay Connected

News & Events
Learn More

First Year Programs

Learn more

Candidates not in highschool

Learn more

Make a Difference

Give Today

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.

Learn more

quote

▼

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)

text

▼

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.

text image

▼

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.

text image right

▼

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.

listing

▼

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)

listing single card

▼

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.
Read More
View All News

listing single card events

▼

Upcoming Events

See All Upcoming Events

listing single card no feature

▼

Related News

See All Related News

listing card list

▼

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.

Test Button
WDW151H1
WDW151H2

Course Card Title

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

Learn More
Card Token Title, PhD
Card Token subtitle
WDW151H1
WDW151H2

Course Card Title

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

Learn More
Card Token Title, PhD
Card Token subtitle

listing card list 3col

▼

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.

Test Button
WDW151H1
WDW151H2

Course Card Title

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

Learn More
Card Token Title, PhD
Card Token subtitle
WDW151H1
WDW151H2

Course Card Title

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

Learn More
Card Token Title, PhD
Card Token subtitle
WDW151H1
WDW151H2

Course Card Title

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

Learn More
Card Token Title, PhD
Card Token subtitle

listing contact

▼

Contact Card

119 St. George St.
(416) 946-7397
(416) 946-7397
(416) 946-7397
Default Button

Contact Card

119 St. George St.
(416) 946-7397
(416) 946-7397
(416) 946-7397
Default Button

Contact Card

119 St. George St.
(416) 946-7397
(416) 946-7397
(416) 946-7397
Default Button

text list

▼

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

text list 1col

▼

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.

text list 3col

▼

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

site header

▼
Search this site

l form

▼
Fieldset Legend
Fieldset Description - this fieldset contains a "container" element; which contains 2 form elements

grid

▼
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 (default - 1 col)

▼

Main Header

Main Content

Main Footer

main 2col

▼

main 2col

▼

Main Header

Main Content

Main Footer

main front

▼

Stay Connected

News & Events
Learn More

page

page

▼
Search this site
Page Content Goes Here
Copyright © Woodsworth College, University of Toronto. All rights reserved.

WYSIWYG

▼

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.

animations

▼
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)

u bg

▼

Clearfix

▼

Remove child margin top and bottom

▼

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.

text hide

Text Hide

▼

Visually Hidden

▼

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

Unset by applying visually show class -> Visually Shown Text

Word Break

▼
University of Mainspring 123 Street Toronto Ontario, Canada