Photo, info, and tabs

A portrait photo of the person alongside the top-level information. Below are tabs highlighting different areas of interest for the person.

You can view a live preview or take a look at the code required for this pattern. When viewing the code, you can copy it so that you can then paste it into your own site. Below the preview/code, you’ll see instructions on how to use block patterns on CMS.

Live Preview
OpenClose

Dr. Kit Smith MD, MSc(Epi), FCAP, FIAC

Academic Rank(s)

Clinical Professor of Pathology, University of British Columbia. Department Head, Pathology and Laboratory Medicine, Royal Columbian Hospital (RCH)

Affiliations(s)

Royal Columbian Hospital

Email

person.doesnotexist@ubc.ca

Open Hours

Mon: 11:00 – 12:00
Wed: 14:30 – 15:30

Short Bio
OpenClose

Dr. Smith is a leader with expertise in writing lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas efficitur vestibulum. Maecenas pellentesque arcu in tempus vulputate. Pellentesque dignissim magna et eros vulputate, in lacinia ante rhoncus. Proin pulvinar tempor lacinia. Nulla finibus libero mi, eget vestibulum lacus pretium vel. Praesent nec justo eget nisl congue condimentum eu eu ligula. Donec ullamcorper diam ut auctor sodales. Ut ac vestibulum libero, quis efficitur lectus. Mauris vel nisi eu sapien mollis hendrerit eu vel tellus. Duis vel nunc sed ante laoreet tempor.

Donec a ligula a urna commodo sodales. Mauris dictum ut eros a tristique. Aliquam odio leo, volutpat non sem et, congue dapibus nunc. Nunc ac turpis in felis fermentum dapibus in a mi. Nullam at iaculis tortor. Phasellus eget nisl id est consequat tincidunt id sit amet mi. Donec sagittis ligula sed lacus blandit finibus. Nunc eu lobortis urna. Duis eu faucibus quam. Cras tempor ex tincidunt, congue lorem vitae, bibendum urna. Praesent scelerisque neque id sapien tincidunt efficitur.

Academic
OpenClose

Etiam ullamcorper nulla vitae velit bibendum molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in sapien a odio imperdiet facilisis. Aenean ante turpis, varius sed enim ut, sagittis suscipit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor augue, pulvinar eu augue at, elementum interdum leo. In vitae leo placerat, tincidunt purus ac, auctor mauris. Etiam tempus tellus at varius condimentum. Sed eleifend ex nisl, vitae tempus augue iaculis eget.

Fusce luctus est libero, in venenatis purus venenatis et. Ut sed dolor libero. Nulla erat lorem, scelerisque id tortor ut, volutpat tempus mauris. Nulla bibendum semper interdum. Proin varius augue magna, dapibus viverra magna porttitor eget. Fusce viverra, risus ac hendrerit cursus, lorem urna tincidunt risus, sodales fermentum metus arcu in nibh. Nullam sit amet vulputate urna, eget dapibus arcu. Nullam egestas, enim ut lacinia venenatis, ligula nunc suscipit justo, efficitur posuere magna enim vel nisi. Nulla molestie risus vitae tempus feugiat. Pellentesque sed ligula vel ante molestie scelerisque. Aenean ultrices nec ligula vel interdum. Aliquam ullamcorper iaculis metus id elementum. Nullam turpis eros, molestie in tincidunt in, aliquam consectetur odio. Integer vulputate luctus felis, tincidunt eleifend purus porttitor a. Nam vel imperdiet tellus. Aenean ultrices, neque sed volutpat congue, nisi ante vulputate purus, sit amet hendrerit ante nulla sed mauris.

Research
OpenClose
  • Urologic, Breast and Gynecologic Surgical Pathology
  • Oncopathology and Epidemiology
  • Secondary use of administrative health databases
Teaching
OpenClose

Nullam at iaculis tortor. Phasellus eget nisl id est consequat tincidunt id sit amet mi. Donec sagittis ligula sed lacus blandit finibus. Nunc eu lobortis urna. Duis eu faucibus quam. Cras tempor ex tincidunt, congue lorem vitae, bibendum urna. Praesent scelerisque neque id sapien tincidunt efficitur.

Code
OpenClose
<!-- wp:group {"className":"ubc-basic-profile","layout":{"type":"constrained"}} -->
<div class="wp-block-group ubc-basic-profile"><!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"sizeSlug":"large"} -->
    <figure class="wp-block-image size-large"><img src="https://live.staticflickr.com/4105/5025638486_0e85e8c269_k.jpg" alt=""/></figure>
    <!-- /wp:image --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"75%"} -->
    <div class="wp-block-column" style="flex-basis:75%"><!-- wp:heading {"level":1,"fontSize":"medium"} -->
    <h1 class="wp-block-heading has-medium-font-size">Dr. Kit Smith MD, MSc(Epi), FCAP, FIAC</h1>
    <!-- /wp:heading -->
    
    <!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph -->
    <p><strong><i class="icon fa fa-address-book-o" aria-hidden="true"> </i> Academic Rank(s)</strong></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"75%"} -->
    <div class="wp-block-column" style="flex-basis:75%"><!-- wp:paragraph -->
    <p>Clinical Professor of Pathology, University of British Columbia. Department Head, Pathology and Laboratory Medicine, Royal Columbian Hospital (RCH)</p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph -->
    <p><strong><i class="icon fa fa-hospital-o" aria-hidden="true"> </i> Affiliations(s)</strong></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"75%"} -->
    <div class="wp-block-column" style="flex-basis:75%"><!-- wp:paragraph -->
    <p>Royal Columbian Hospital</p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph -->
    <p><strong><i class="icon fa fa-at" aria-hidden="true"> </i> Email</strong></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"75%"} -->
    <div class="wp-block-column" style="flex-basis:75%"><!-- wp:paragraph -->
    <p><a href="mailto:person.doesnotexist@ubc.ca">person.doesnotexist@ubc.ca</a></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:columns -->
    <div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:paragraph -->
    <p><strong><i class="icon fa fa-clock-o" aria-hidden="true"> </i> Open Hours</strong></p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"75%"} -->
    <div class="wp-block-column" style="flex-basis:75%"><!-- wp:paragraph -->
    <p>Mon: 11:00 - 12:00<br>Wed: 14:30 - 15:30</p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns -->
    
    <!-- wp:ubc/tabs {"tabs":[{"title":"Short Bio","id":"69fb4bff-b76f-42f8-bb7a-d88805a99810"},{"title":"Academic","id":"2103474e-daa6-4220-92b8-f8da66540340"},{"title":"Research","id":"0a844e0a-96d0-447f-8556-c83dd6b70135"},{"title":"Teaching","id":"0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89"}],"blockInitialized":true,"className":"is-style-clf","contentVisibilityRules":{"contentVisibilityRulesEnabled":false,"userAuthenticated":"","specialPage":{"pages":[],"specialPages":[],"posts":[],"categories":[],"tags":[]},"userRole":{},"dateTime":{"start":null,"end":null}}} -->
    <section class="wp-block-ubc-tabs ubc-accordion-tabs is-style-clf" data-selected-tab="0"><ul class="ubc-accordion-tabs__tab-list" role="tablist"><li role="presentation"><a role="tab" aria-controls="section-69fb4bff-b76f-42f8-bb7a-d88805a99810" aria-selected="true" class="ubc-accordion-tabs__tabs-trigger js-tabs-trigger" href="#section-69fb4bff-b76f-42f8-bb7a-d88805a99810">Short Bio</a></li><li role="presentation"><a role="tab" aria-controls="section-2103474e-daa6-4220-92b8-f8da66540340" aria-selected="false" class="ubc-accordion-tabs__tabs-trigger js-tabs-trigger" href="#section-2103474e-daa6-4220-92b8-f8da66540340">Academic</a></li><li role="presentation"><a role="tab" aria-controls="section-0a844e0a-96d0-447f-8556-c83dd6b70135" aria-selected="false" class="ubc-accordion-tabs__tabs-trigger js-tabs-trigger" href="#section-0a844e0a-96d0-447f-8556-c83dd6b70135">Research</a></li><li role="presentation"><a role="tab" aria-controls="section-0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89" aria-selected="false" class="ubc-accordion-tabs__tabs-trigger js-tabs-trigger" href="#section-0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89">Teaching</a></li></ul><!-- wp:ubc/tab {"index":0,"title":"Short Bio","id":"69fb4bff-b76f-42f8-bb7a-d88805a99810"} -->
    <section index="1" class="wp-block-ubc-tab ubc-accordion-tabs__tabs-panel js-tabs-panel active" id="section-69fb4bff-b76f-42f8-bb7a-d88805a99810" role="tabpanel" aria-labelledby="tab-69fb4bff-b76f-42f8-bb7a-d88805a99810"><div class="ubc-accordion-tabs__accordion-trigger js-accordion-trigger" aria-controls="section-69fb4bff-b76f-42f8-bb7a-d88805a99810" tabindex="0">Short Bio<div class="ubc-accordion-tabs__accordion-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20"><rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect><rect height="2" width="18" fill="currentColor" y="9" x="1"></rect></svg></div></div><div class="content"><!-- wp:paragraph -->
    <p>Dr. Smith is a leader with expertise in writing lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas efficitur vestibulum. Maecenas pellentesque arcu in tempus vulputate. Pellentesque dignissim magna et eros vulputate, in lacinia ante rhoncus. Proin pulvinar tempor lacinia. Nulla finibus libero mi, eget vestibulum lacus pretium vel. <strong>Praesent nec justo</strong> eget nisl congue condimentum eu eu ligula. <a href="#">Donec ullamcorper diam ut auctor sodales</a>. Ut ac vestibulum libero, quis efficitur lectus. Mauris vel nisi eu sapien mollis hendrerit eu vel tellus. Duis vel nunc sed ante laoreet tempor.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p>Donec a ligula a urna commodo sodales. Mauris dictum ut eros a tristique. Aliquam odio leo, volutpat non sem et, congue dapibus nunc. Nunc ac turpis in felis fermentum dapibus in a mi. Nullam at iaculis tortor. Phasellus eget nisl id est consequat tincidunt id sit amet mi. Donec sagittis ligula sed lacus blandit finibus. Nunc eu lobortis urna. Duis eu faucibus quam. Cras tempor ex tincidunt, congue lorem vitae, bibendum urna. Praesent scelerisque neque id sapien tincidunt efficitur.</p>
    <!-- /wp:paragraph --></div></section>
    <!-- /wp:ubc/tab -->
    
    <!-- wp:ubc/tab {"index":1,"title":"Academic","id":"2103474e-daa6-4220-92b8-f8da66540340"} -->
    <section index="2" class="wp-block-ubc-tab ubc-accordion-tabs__tabs-panel js-tabs-panel" id="section-2103474e-daa6-4220-92b8-f8da66540340" role="tabpanel" aria-labelledby="tab-2103474e-daa6-4220-92b8-f8da66540340"><div class="ubc-accordion-tabs__accordion-trigger js-accordion-trigger" aria-controls="section-2103474e-daa6-4220-92b8-f8da66540340" tabindex="0">Academic<div class="ubc-accordion-tabs__accordion-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20"><rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect><rect height="2" width="18" fill="currentColor" y="9" x="1"></rect></svg></div></div><div class="content"><!-- wp:paragraph -->
    <p>Etiam ullamcorper nulla vitae velit bibendum molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla in sapien a odio imperdiet facilisis. Aenean ante turpis, varius sed enim ut, sagittis suscipit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor augue, pulvinar eu augue at, elementum interdum leo. In vitae leo placerat, tincidunt purus ac, auctor mauris. Etiam tempus tellus at varius condimentum. Sed eleifend ex nisl, vitae tempus augue iaculis eget.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:paragraph -->
    <p>Fusce luctus est libero, in venenatis purus venenatis et. Ut sed dolor libero. Nulla erat lorem, scelerisque id tortor ut, volutpat tempus mauris. Nulla bibendum semper interdum. Proin varius augue magna, dapibus viverra magna porttitor eget. Fusce viverra, risus ac hendrerit cursus, lorem urna tincidunt risus, sodales fermentum metus arcu in nibh. Nullam sit amet vulputate urna, eget dapibus arcu. Nullam egestas, enim ut lacinia venenatis, ligula nunc suscipit justo, efficitur posuere magna enim vel nisi. Nulla molestie risus vitae tempus feugiat. Pellentesque sed ligula vel ante molestie scelerisque. Aenean ultrices nec ligula vel interdum. Aliquam ullamcorper iaculis metus id elementum. Nullam turpis eros, molestie in tincidunt in, aliquam consectetur odio. Integer vulputate luctus felis, tincidunt eleifend purus porttitor a. Nam vel imperdiet tellus. Aenean ultrices, neque sed volutpat congue, nisi ante vulputate purus, sit amet hendrerit ante nulla sed mauris.</p>
    <!-- /wp:paragraph --></div></section>
    <!-- /wp:ubc/tab -->
    
    <!-- wp:ubc/tab {"index":2,"title":"Research","id":"0a844e0a-96d0-447f-8556-c83dd6b70135"} -->
    <section index="3" class="wp-block-ubc-tab ubc-accordion-tabs__tabs-panel js-tabs-panel" id="section-0a844e0a-96d0-447f-8556-c83dd6b70135" role="tabpanel" aria-labelledby="tab-0a844e0a-96d0-447f-8556-c83dd6b70135"><div class="ubc-accordion-tabs__accordion-trigger js-accordion-trigger" aria-controls="section-0a844e0a-96d0-447f-8556-c83dd6b70135" tabindex="0">Research<div class="ubc-accordion-tabs__accordion-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20"><rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect><rect height="2" width="18" fill="currentColor" y="9" x="1"></rect></svg></div></div><div class="content"><!-- wp:list -->
    <ul><!-- wp:list-item -->
    <li>Urologic, Breast and Gynecologic Surgical Pathology</li>
    <!-- /wp:list-item -->
    
    <!-- wp:list-item -->
    <li>Oncopathology and Epidemiology</li>
    <!-- /wp:list-item -->
    
    <!-- wp:list-item -->
    <li>Secondary use of administrative health databases</li>
    <!-- /wp:list-item --></ul>
    <!-- /wp:list --></div></section>
    <!-- /wp:ubc/tab -->
    
    <!-- wp:ubc/tab {"index":3,"title":"Teaching","id":"0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89"} -->
    <section index="4" class="wp-block-ubc-tab ubc-accordion-tabs__tabs-panel js-tabs-panel" id="section-0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89" role="tabpanel" aria-labelledby="tab-0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89"><div class="ubc-accordion-tabs__accordion-trigger js-accordion-trigger" aria-controls="section-0e0b17ef-9f5d-4b16-b5a8-8126e0d0ea89" tabindex="0">Teaching<div class="ubc-accordion-tabs__accordion-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20"><rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect><rect height="2" width="18" fill="currentColor" y="9" x="1"></rect></svg></div></div><div class="content"><!-- wp:paragraph -->
    <p>Nullam at iaculis tortor. Phasellus eget nisl id est consequat tincidunt id sit amet mi. Donec sagittis ligula sed lacus blandit finibus. Nunc eu lobortis urna. Duis eu faucibus quam. Cras tempor ex tincidunt, congue lorem vitae, bibendum urna. Praesent scelerisque neque id sapien tincidunt efficitur.</p>
    <!-- /wp:paragraph --></div></section>
    <!-- /wp:ubc/tab --></section>
    <!-- /wp:ubc/tabs --></div>
    <!-- /wp:group -->

Prerequisites

You will need the following plugins activated on your site for the profiles to look like the preview:

  • UBC Block Styles
  • UBC Tab Block
  • JVM Rich Text Icons
  • (optional, but recommended) Gutenberg

Switch between the live preview and the code view to see what this might look like on your site and how to get it there

Available on every CMS website

How do I use block patterns on my site on CMS?

Block Patterns in WordPress are HTML with CSS (provided by special HTML comments). That means you’re able to simply copy a block (or selection of blocks) from one place, and paste them somewhere else, and they should look identical. In order to get the above block pattern on your site, try the following:

  1. Click the ‘Code’ tab above
  2. Click the ‘Copy to Clipboard’ icon in the top right of the code that is shown
  3. On your own site, add a new paragraph block to a post or a page
  4. Paste (ctrl+v on Windows, cmd+v on macOS) what you have on your clipboard
  5. Done!
View All Patterns

alternative options

Here are some block patterns similar to this one

  • Circular Photo, Bio, Contact Pullout

    A circular portrait photo of the person alongside their top-level information. Below is their education and interests with their contact details as a pull-out.