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.


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

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


Education

MSc

Epistemology, University of British Columbia, 2015

MD

Faculty of Medicine, University of Victoria, 2018

Research Interests

  • The interface between computing and healthcare
  • The use of Artificial Intelligence in patient care
  • Medical Sociology
  • Teaching and Learning in Medical Schools

Phone:

(604) 111-2222

Campus:

UBC Vancouver, Point Grey

Bio

Dr. Kit Smith is a distinguished doctor of medicine with a strong focus on the integration of artificial intelligence (AI) in patient care and the intersection of computing and healthcare. Throughout my career, I have been driven by a profound interest in harnessing technology to enhance the delivery of medical services and improve patient outcomes.

With a solid foundation in medical education, I have embarked on a dedicated exploration of the role of AI in healthcare. This journey has led me to develop a deep understanding of the potential benefits of AI algorithms and advanced computational techniques in medical decision-making, diagnostics, and treatment strategies. By leveraging these innovations, I strive to optimize patient care, enhance diagnostic accuracy, and drive advancements in medical practice.

As a physician, I firmly believe in the importance of maintaining a strong doctor-patient relationship while incorporating AI advancements. I place great emphasis on effective communication and empathy, recognizing that technology should always serve as a tool to support and empower patients. By staying at the forefront of AI research, fostering collaborations, and promoting ethical and responsible implementation, I am committed to shaping a future where AI and compassionate care harmoniously coexist, ultimately leading to better healthcare outcomes for individuals.

Code
OpenClose
<!-- wp:group {"className":"profile-circular-photo-bio-contact-pullout      ","layout":{"type":"constrained"}} -->
<div class="wp-block-group profile-circular-photo-bio-contact-pullout"><!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"photo-and-creds  ","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group photo-and-creds" style="margin-top:0;margin-bottom:0"><!-- wp:image {"width":100,"height":100,"sizeSlug":"large","style":{"layout":{"selfStretch":"fixed","flexSize":"100px"}},"className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://live.staticflickr.com/4105/5025638486_0e85e8c269_k.jpg" alt="" width="100" height="100"/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Dr. Kit Smith MD, MSc(Epi), FCAP, FIAC</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Clinical Professor of Pathology, University of British Columbia. Department Head, Pathology and Laboratory Medicine, Royal Columbian Hospital (RCH)</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"29px"} -->
<div style="height:29px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:spacer {"height":"29px"} -->
<div style="height:29px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"education-interests"} -->
<div class="wp-block-column education-interests"><!-- wp:heading -->
<h2 class="wp-block-heading">Education</h2>
<!-- /wp:heading -->

<!-- wp:group {"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">MSc</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Epistemology, University of British Columbia, 2015</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">MD</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Faculty of Medicine, University of Victoria, 2018</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Research Interests</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item {"fontSize":"medium"} -->
<li class="has-medium-font-size">The interface between computing and healthcare</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"fontSize":"medium"} -->
<li class="has-medium-font-size">The use of Artificial Intelligence in patient care</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"fontSize":"medium"} -->
<li class="has-medium-font-size">Medical Sociology</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"fontSize":"medium"} -->
<li class="has-medium-font-size">Teaching and Learning in Medical Schools</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"color":{"background":"#f7f7f7"}},"className":"profile-contact-pullout      ","layout":{"type":"constrained"}} -->
<div class="wp-block-group profile-contact-pullout has-background" style="background-color:#f7f7f7"><!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Phone:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">(604) 111-2222</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Email:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size"><a href="#">doesnotexist@ubc.ca</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Campus:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">UBC Vancouver, Point Grey</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|50"}}},"className":"","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Website</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size"><a href="#">https://website-url-here.ca/</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2 class="wp-block-heading">Bio</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Dr. Kit Smith is a distinguished doctor of medicine with a strong focus on the integration of artificial intelligence (AI) in patient care and the intersection of computing and healthcare. Throughout my career, I have been driven by a profound interest in harnessing technology to enhance the delivery of medical services and improve patient outcomes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">With a solid foundation in medical education, I have embarked on a dedicated exploration of the role of AI in healthcare. This journey has led me to develop a deep understanding of the potential benefits of AI algorithms and advanced computational techniques in medical decision-making, diagnostics, and treatment strategies. By leveraging these innovations, I strive to optimize patient care, enhance diagnostic accuracy, and drive advancements in medical practice.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">As a physician, I firmly believe in the importance of maintaining a strong doctor-patient relationship while incorporating AI advancements. I place great emphasis on effective communication and empathy, recognizing that technology should always serve as a tool to support and empower patients. By staying at the forefront of AI research, fostering collaborations, and promoting ethical and responsible implementation, I am committed to shaping a future where AI and compassionate care harmoniously coexist, ultimately leading to better healthcare outcomes for individuals.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></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!

alternative options

Here are some block patterns similar to this one

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