Components Page

May 12

Tea and Bees: Picnic Fundraiser

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat purus quis risus pellentesque, eget blandit quam auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet lacinia sapien. Cras est leo, ullamcorper.
Read More

Colour

UBC Farm Green #9AC337

UBC Blue #002145

Orange #D95E4E

Dark Green #2B3C1C

Black #000

Pale Blue #99E9DE

Grey #F6FBFE

Buttons & Links

UBC Farm Button

Whitney Semibold, 18px

Feeding Growth Button

Whitney Semibold, 18px

Read More Text Only Button

Body Text Only Button

Text Only Link

Text Styles

H1: WHITNEY Semibold, 46/50PX, ALL CAPS,#002145

H2: Whitney Semibold, 32/36px, #002145

Lede / Introductory paragraph: Whitney,26/36px, #002145

Body Whitney, 16/24px, #000…. sit amet, consectetur adipiscing elit. Sample body text link sed aliquet t urpis, eget vulputate massa.Vivamus sed elit justo. In ullamcorper tellus ut suscipit suscipit. Vivamus at facilisis nulla. Donec pellentesque, liberoin vulputate luctus, metus mauris malesuada odio, a elementum dolor quam quis urna. Phasellus non luctus mauris,non lacinia lacus. Sed eget dolor ullamcorper, egestas dolor at, luctus mauris. Nulla quis ante sit amet auguevehicula efficitur. Quisque diam nisl, gravida at dui quis, fringilla convallis nulla. Nunc urna nibh, aliquet ac dolor sitamet, vulputate egestas nunc.

H4: Whitney Semibold, 22/24px, #002145

Sit amet, consectetur adipiscing elit. Sed aliquet t urpis, eget vulputate massa.Vivamus sed elit justo. In ullamcorper tellus ut suscipit suscipit. Vivamus at facilisis nulla. Donec pellentesque, liberoin vulputate luctus, metus mauris malesuada odio, a elementum dolor quam quis urna. Phasellus non luctus mauris,non lacinia lacus. Sed eget dolor ullamcorper, egestas dolor at, luctus mauris. Nulla quis ante sit amet auguevehicula efficitur. Quisque diam nisl, gravida at dui quis, fringilla convallis nulla. Nunc urna nibh, aliquet ac dolor sitamet, vulputate egestas nunc.

H6: WHITNEY, 50/52PX, ALL CAPS, #002145, CENTRED
H5: BODY SUBTITLES, GUARDIAN EGYPTIAN SEMIBOLD, 18/22PX, #002145

Sit amet, consectetur adipiscing elit. Sed aliquet t urpis, eget vulputate massa.Vivamus sed elit justo. In ullamcorper tellus ut suscipit suscipit. Vivamus at facilisis nulla. Donec pellentesque, liberoin vulputate luctus, metus mauris malesuada odio, a elementum dolor quam quis urna. Phasellus non luctus mauris,non lacinia lacus. Sed eget dolor ullamcorper, egestas dolor at, luctus mauris. Nulla quis ante sit amet auguevehicula efficitur. Quisque diam nisl, gravida at dui quis, fringilla convallis nulla. Nunc urna nibh, aliquet ac dolor sitamet, vulputate egestas nunc.

Photo Caption: Whitney, 14/18px, #000

CTA: WHITNEY SEMIBOLD, 30/34PX, #002145, CENTRED

Container Structures

All sections should be wrapped in both a row (<div class=”row-fluid expand row-padding-default”>)with a container (<div class=”container”>) inside. Most of the extra classes for the rows are already defined in the UBC CLF stylesheet, except for some regarding padding are in the main stylesheet for this site. The containers have two widths…normal (no added classes) and narrow (add class ‘narrow’). As with the rows,there are some extras that work with padding.

Regular width
Narrow width

Testimonial (Background:#F6FBFE)

Populated based on category name.

*Note these links:



must be added into bottom of editor section in order for it to work correctly.

*Should be added into main <head> but there is not accessible.

Name: Satisfy, 28px, #9AC337

ROLE: WHITNEY, 16PX, ALL CAPS, #002145

H3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis, eget vulputate massa. Vivamus sed elit justo. In ullamcorper tellus ut suscipit suscipit.

Name: Satisfy, 28px, #9AC337

ROLE: WHITNEY, 16PX, ALL CAPS, #002145

H3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis, eget vulputate massa. Vivamus sed elit justo. In ullamcorper tellus ut suscipit suscipit.

Name: Satisfy, 28px, #9AC337

ROLE: WHITNEY, 16PX, ALL CAPS, #002145

H3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis, eget vulputate massa. Vivamus sed elit justo. In ullamcorper tellus ut suscipit suscipit.

Link Lists + Accordions

H2: Accordion Titles

h5: Accordion Subtitles Example

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis,
eget vulputate massa. Vivamus sed elit justo.

h5: Accordion Subtitles Example

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis,
eget vulputate massa. Vivamus sed elit justo.

h5: Accordion Subtitles Example

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis,
eget vulputate massa. Vivamus sed elit justo.

h5: Accordion Subtitles Example

Body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed aliquet t urpis,
eget vulputate massa. Vivamus sed elit justo.

h4: Link List Titles

News/Events Module

h6: News/Events Titles

h4, centered: event title 1


h4, centered: event title 2


h4, centered: event title 3


h4, centered: news title

Body: News snippet of 40 words or less. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra neque dolor, quis malesuada sapien gravida vitae. Aliquam erat volutpat. Ut dapibus egestas nulla, non facilisis arcu suscipit eu.


h4, centered: news title

Body: News snippet of 40 words or less. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra neque dolor, quis malesuada sapien gravida vitae. Aliquam erat volutpat. Ut dapibus egestas nulla, non facilisis arcu suscipit eu.


h4, centered: news title

Body: News snippet of 40 words or less. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra neque dolor, quis malesuada sapien gravida vitae. Aliquam erat volutpat. Ut dapibus egestas nulla, non facilisis arcu suscipit eu.

Feeding Growth CTA Headline: Satisfy, 28/40px, #002145

h3: Feed Growth CTA body copy.