Style Guide 

This is a block of text that has padding, a heading and content. It is intended to use inside of a column. The pattern serves to separate content that is related to an article but does not fit in as body text. There are three styles. 

Styles are applied on the group containing the block.

Quicklinks have three patterns. They are identical but have different numbers of columns. Quicklink lists should only contain links with link text. No images or other text.

This lets you add an image and set a link. The text will be hidden on the published page. It is present to create the link. If you want text over an image, use the ‘cover block.’ 

Set or remove cover image link

Section Title

Content description. This should only contain text elements and links. Only use bold or italic styles. Do not set colour or background. Filler text for demonstration now Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

This is the same as the above content card but has overlay image and a different hover effect.

Link added in the paragraph

Title for the card

Content description. This should only contain text elements and links. Only use bold or italic styles. Do not set colour or background. Filler text for demonstration now Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Use to provide links, descriptions and a featured item. 

Blue Feature blocks provide an interesting way to relate a page to other resources available. Do not add images or non-text content.

Only pattern with round corners. Use in sidebar. Do not add inside of other patterns with a background colour. 

FEATURED RESOURCE

Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt.

Frequently Asked Questions

Resource Link

Resource Link

Only used for specific page patterns. Do not use.

EVENTS

Lorem ipsum dolor sit amet, elit, do tempor incididunt ut ero labore et dolore aliqua or submit an event.

See All Events

Title

May 2, 2022

Title

May 2, 2022

Add items to the event list above. Do not use outside of the event list pattern.

Only used for specific page patterns. Do not use.

FACULTY & STAFF SPOTLIGHT

Lorem ipsum sit amet, elit, do ut ero labore or one-on-one lorem ipsum dolor sit amet staff spotlight.

• 

  You are invited: Celebrating 75 years of excellence across British Columbia

  Join us as we mark the Faculty’s 75th anniversary around the province.

• 

  Celebrating partnerships to save more lives, sooner

  Partners from across the life sciences sector came together to celebrate the progress of Canada’s Immuno-Engineering and Biomanufacturing Hub.

• Office Moving Procedures

  Below you will find answers to some commonly asked questions about what goes on behind the scenes when you request assistance in moving to a new office.  Before Your Move  How much notice should I give MedIT when I plan to re-locate my unit/office/department/staff?Please provide no less than one month advance notice of your impending…

Can be placed either below content or in a sidebar. The content will adapt to the container it is placed. Do not change the order of the columns. If you do not have an image then remove the column. You may need to adjust the column widths in the block settings.

Contact

Graham Douglas

Systems Analyst II, Digital Solutions

graham.douglas@ubc.ca 

778 772 6970

Additional Information

If you have issues with the use of these patterns I apologize.

Use this pattern to add video from a hosted option. If using Panopto for video you will need to publish a podcast link for it to work. The caption below the video is optional.

A minimal starting point. Provides a space for introductory text and then an open ended content section.

Similar to the one column page layout but with the inclusion of a second column. Use this pattern when creating multi-column pages. This will keep content columns consistent across the site.

Main column has a maximum width of 785 pixels. 

If a page is set to full width (no side nav) the max width is 1175px.

---

Section heading

Section introduction text. This is a suggestion on how to structure a page.

Heading inside of a section.

Content about the section. Note that in this example the sidebar has a lot of content but the main content area does not. Avoid this by balancing your content across columns. On narrow devices the sidebar will stack below this column.

Sidebar has a maximum width of 350 pixels.

This is the second column and can contain any form of content. Be aware of the width limitation when adding content into this area.

Contact

Graham Douglas

Systems Analyst II, Digital Solutions

graham.douglas@ubc.ca

Additional Information

If you have issues with the use of these patterns I apologize.

Sidebar Block

This is the sidebar block in it’s natural habitat. Please enjoy it’s varieties and it disseminates content.

Sidebar Block

This is the sidebar block in it’s natural habitat. Please enjoy it’s varieties and it disseminates content.

Sidebar Block

This is the sidebar block in it’s natural habitat. Please enjoy it’s varieties and it disseminates content.

This pattern provides navigation for subpages. Do not use this as a content page it is intended to be a navigation tool. The column count per row must be 3. Do not add or remove columns. You can add or remove rows as needed. Do not add images into the grid. That is reserved for the Overview Page Pattern.

Headings in this pattern must be links. Keep headings short.

Limit descriptions to one paragraph.

Content can be nested inside of accordions. The pattern adds a ‘expand all’ and ‘collapse all’ function to the accordion block. The pattern relies on the accordions plugin being activated on the site. 

Accordions can be link to directly by setting the ‘anchor’ in the advanced section of the block setting. That will create a unique url to the accordion. E.g. Accordion 1, Accordion 2

This can be added at the top of any page or ‘copy pasted’ into a widget for sitewide usage. The alert can be dismissed by clicking on the ‘x’. Only use text in this pattern. Columns, rows and grouping are allowed.

Pattern used to add a content area and an after content area. Read More link is intended to be a link to an external article. 

This pattern queries a category and adds a content footer using the blue feature blocks

These patterns have interactive features.

This post is intended for a spotlight post. The pattern includes a sidebar which is no longer useful. This pattern needs to be updated before it can be used. Use as a reference only. The post image can be made to span the full width if desired. The button link 

Interesting information about the person.

Expanded details

Question

Answer

---

Contact information about the persons

See All Spotlights

About

Spotlight is a series aimed at getting ‘behind the scenes’ with Faculty and Staff in the Faculty of Medicine.

• 

  Spotlight Series

  Chris Morrow

  Meet Dr. Chris Morrow, Executive Medical Director, Continuing Professional Development.

• 

  Spotlight Series

  James Lee

  Meet Dr. James Lee, Clinical Assistant Professor in the Department of Pediatrics & Director of the Pediatric Neurology Residency Program.

• 

  Spotlight Series

  Chiara Singh

  Meet Chiara Singh, Clinical Associate Professor in the Department of Physical Therapy.

• 

  Spotlight Series

  Jordan Hamden

  Meet Dr. Jordan Hamden, Postdoctoral Fellow in the Department of Biochemistry & Molecular Biology.

• 

  Spotlight Series

  One-on-One with Laura Farrell

  Meet Dr. Laura Farrell, Regional Associate Dean, Vancouver Island.

• 

  Spotlight Series

  Meet Dr. Rachel Murphy

  Drs. Rachel Murphy (pictured) and Andrew Roth (not pictured) are recipients of the 2022/2023 Precision Health Catalyst Grant award for their project entitled “Improving Breast Cancer Screening Efficiency with Administrative Health Data” Read a summary of the project here. “This project aims to use administrative health data to a) develop individualized risk assessment models that…

• 

  Spotlight Series

  Meet Drs. Wang & Dubland

  Drs. Ying Wang (left) and Joshua Dubland (right) are recipients of the 2022/2023 Precision Health Catalyst Grant award for their project entitled “Who will benefit from colchicine to reduce heart attacks? Characterizing the baseline inflammation status of patients with coronary atherosclerosis” Read a summary of the project here. “This project aims to provide molecular insights…

• 

  Spotlight Series

  Meet Drs. McGinnis & Stubbins

  Drs. Eric McGinnis (left) and Ryan Stubbins (right) are recipients of the 2022/2023 Precision Health Catalyst Grant award for their project entitled “Rapid targeted gene sequencing and high-resolution optical genome mapping to optimize selection of targeted therapies in acute myeloid leukemia” Read a summary of the project here. “This project aims to: 1) Evaluate the…

• 

  Spotlight Series

  Meet Dr. Annie Ciernia

  Drs. Annie Ciernia (pictured) and Sheila Teves (not pictured) are recipients of the 2022/2023 Precision Health Catalyst Grant award for their project entitled “Human SPI1 variants alter microglial immune memory to promote neuroinflammation” Read a summary of the project here. “This project aims to identify how GWAS hits in non-coding regions confer disease risk or…

• 

  Spotlight Series

  Meet Dr. Anna Blakney

  Drs. Anna Blakney (pictured) and Jayachandran Kizhakkedathu (not pictured) are recipients of the 2022/2023 Precision Health Catalyst Grant award for their project entitled “Next-generation anti-cancer antibody formats enabled through development of novel low immunogenic RNA delivery” Read a summary of the project here. “This project will develop a low immunogenic novel delivery platform that enables…

• 

  Spotlight Series

  Mathieos Belayneh

  Meet Dr. Mathieos Belayneh, Clinical Instructor in the Department of Medicine.

• 

  Spotlight Series

  Lauren MacHattie

  Meet Lauren MacHattie, Clinical Instructor in the Midwifery Program, Department of Family Practice.

• 

  Spotlight Series

  Jackie Howard

  Meet Jackie Howard, Director, Continuing Professional Development.

• 

  Spotlight Series

  Meghan MacGillivray

  Meet Meghan MacGillivray, Indigenous Student Initiatives Manager.

• 

  Spotlight Series

  Meet Stuart Turvey

  Professor, Division of Allergy and Immunology, Department of Pediatrics, Faculty of Medicine UBC Faculty of Medicine Precision Health Co-Lead

• 

  Spotlight Series

  Dr. Robyn Hutchings appointed Associate Dean, Student Affairs, MD Undergraduate Program

  A message from Roger Wong, Vice Dean, Education.

• 

  Spotlight Series

  Dr. Ahmer Karimuddin appointed Head, Department of Surgery

  A message from Dermot Kelleher, Dean, Faculty of Medicine and Vice-President, Health, UBC.

• 

  Spotlight Series

  Congratulations Dr. Brodie Sakakibara

  Learn how UBCO’s Health Research of the Year is empowering stroke survivors.

View All Spotlights

---

Get Involved

If you are interested in being profiled as part of the spotlight series or would like to nominate a colleague: Email: communications.med@ubc.ca

The column on this post is better addressed with a widget. Use as reference only

Reserved for use on the homepage.

Used inside of the announcement block

Used inside of the announcement block, right column.

Use on pages that display post content. Defaults to use an image. The image can be removed from the ‘post template.’ 

This pattern has issues. Do not use. It is an amalgamation of the announcement and blue feature block patterns.