# 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

![](/files/-MDz1KgoCopowXvuiCtW)

#### How to make profile on the side

{% embed url="<https://drive.google.com/file/d/1012t12ch-EjzjbCUNSfpebObh7SwEz1Y/view?usp=sharing>" %}

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

![](/files/-MDz1Kgm67cpu_duy9wP)

{% tabs %}
{% tab title="HTML" %}

```markup
<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>

```

{% endtab %}

{% tab title="CSS" %}

```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);
  }
}

```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Replace style id \`**stk-theme\_00000**\` with yours before adding it to your Style Manager. For more info, please go to the [Introduction](/components-library/getting-started/introduction.md) page.

You can also adjust userpic size, colors and shapes in the component CSS.
{% endhint %}

## **Content Experience Impact**

According to a study from [The Center for Media Engagement](https://mediaengagement.org/research/trust-in-online-news/), 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.

{% hint style="success" %}

### **Dos**

* Focus your expert profile on the credentials and experience that establish credibility for the content at hand.&#x20;
* 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.
  {% endhint %}

{% hint style="danger" %}

### 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.
{% endhint %}

## **Learn More**

## **Extra Inspiration**

![](/files/-MGxWwwh53qIzHpaE8JI)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://setka.gitbook.io/components-library/data-and-information/expert-profiles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.