Expert Profiles

Similar to an author profile, an expert profile allows you to give some background information on any experts you’ve quoted or interviewed in your piece, so readers unfamiliar with them can learn more and understand why they’re credible.

Examples

Profile on the side

How to make profile on the side

Profile on the full-width block with image and wiki profile structure

HTML

<div class="stk-snippets-expert-profile stk-container" data-ce-tag="container" data-container-name="Profile">
  <figure class="stk-reset stk-image-figure stk-snippets-expert-profile__photo" data-ce-tag="image-figure">
    <div data-ce-tag="mask" class="stk-mask"></div>
  </figure>
  <h4 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_0 stk-theme_00000__style_small_header stk-theme_00000__color_4507_custom_color_0">PROFILE</h4>
  <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05 stk-mobile-hidden">
  <h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_05 stk-theme_00000__style_medium_header">Neri Oxman</h3>
  <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_05">American–Israeli designer and professor at the MIT Media Lab</p>
  <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05">
  <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset">Born:</strong> February 6, 1976 (age 44), Haifa, Israel</p>
  <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_0"><strong class="stk-reset">Occupation:</strong> Associate professor of media arts and science</p>
  <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__mb_05"><strong class="stk-reset">Notable works:</strong> Silk Pavilion (2013), Wanderers (2015), Material Ecology (2020)
</p>
  <hr class="stk-reset stk-theme_00000__separator_basic_divider stk-theme_00000__mb_05">
  <p data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05">Follow Neri on <a class="stk-reset" href="https://example.com">Facebook</a>, <a class="stk-reset" href="https://example.com" target="_blank">Twitter</a>, <a class="stk-reset" href="https://example.com" target="_blank">Linkedin</a> and <a class="stk-reset" href="https://example.com" target="_blank">Instagram</a></p>
</div>
<p class="stk-reset"></p>

CSS

.stk-snippets-expert-profile {
  position: relative;
  --stk-snippets-expert-profile__top: 45px; /* Margin top */
  --stk-snippets-expert-profile__top-mobile: 150px; /* Margin top mobile */
  margin-bottom: var(--theme-bottom-indent);
  padding: 15px 0 30px;
  background: #F1F1F1; /* Background color */
}

.stk-snippets-expert-profile > :last-child {
  margin-bottom: 0;
}

.stk-snippets-expert-profile__photo,
.stk-snippets-expert-profile__photo .stk-mask,
.stk-snippets-expert-profile__photo img {
  width: 300px; /* image width */
  height: 340px; /* image height */
}

.stk-snippets-expert-profile__photo .stk-mask {
  clip-path: polygon(50% 0%,100% 27%,100% 73%,50% 100%,0% 73%,0% 27%);
}

.stk-snippets-expert-profile__photo img {
  object-fit: cover;
}

@media (min-width: 769px) {
  .stk-snippets-expert-profile {
    margin-top: var(--stk-snippets-expert-profile__top);
  }

  .stk-snippets-expert-profile  > *:not(hr) {
    margin-left: 400px;
  }

  .stk-image-figure.stk-snippets-expert-profile__photo {
    position: absolute !important;
    left: 50px;
    margin-top: calc(-1 * var(--stk-snippets-expert-profile__top));
    margin-left: 0;
    z-index: 10;
  }
}

@media (max-width: 768px) {
  .stk-snippets-expert-profile {
    margin-top: var(--stk-snippets-expert-profile__top-mobile);
    margin-right: -10px;
    padding-right: 20px;
    margin-left: -10px;
    padding-left: 20px;
  }

  .stk-snippets-expert-profile__photo {
    margin: calc(-1 * var(--stk-snippets-expert-profile__top-mobile)) auto var(--theme-bottom-indent);
  }
}

@at-root {
  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-expert-profile {
    margin-right: -10px;
    padding-right: 20px;
    margin-left: -10px;
    padding-left: 20px;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-expert-profile  > *:not(hr) {
    margin-left: 0;
  }

  :not(#stk):not(.stk) .stk-media-mobile .stk-post .stk-snippets-expert-profile__photo {
    position: relative !important;
    margin: calc(-1 * var(--stk-snippets-expert-profile__top-mobile)) auto var(--theme-bottom-indent);
  }
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust userpic size, colors and shapes in the component CSS.

Content Experience Impact

According to a study from The Center for Media Engagement, 40% of readers say having an author bio on the page builds more trust—and we’d imagine this is true for experts included in your content as well. Plus, by providing basic background information about your expert within your article, you prevent the user from having to search for the information themself if they’re unfamiliar with the person, therefore keeping them from leaving your page. Plus, giving your experts the star treatment helps build more goodwill with them.

Dos

• Focus your expert profile on the credentials and experience that establish credibility for the content at hand.

• Consider including a picture of the expert to help readers put a face to the name and connect more with them.

• Build this as a sidebar, in most cases, to avoid it getting in the way of a reader who is already familiar with the expert.

Don'ts

Don’t feel like you have to include every bit of information about your expert—you don’t want this to be too long. Instead, give a brief overview of the most pertinent information for the article, then link directly to the expert’s website or online profiles in case readers want to learn more about them.

Learn More

Extra Inspiration