> For the complete documentation index, see [llms.txt](https://setka.gitbook.io/components-library/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://setka.gitbook.io/components-library/visuals-and-imagery/photo-collages.md).

# Branded Images

Branded imagery allows you to make stock photos or visuals from various sources feel more unified within your publication by adding a special overlay or a frame. Think of this as an image “filter” but specifically for publishing.

## **Examples**

### Image with colored background

![](/files/-ME2hiBc4A2MF8MxSfYE)

{% tabs %}
{% tab title="6 columns grid HTML" %}

```markup
<figure class="stk-snippets-branded-image-01 stk-reset stk-image-figure" data-ce-tag="image-figure">
  <div data-ce-tag="mask" class="stk-mask"></div>
</figure>
```

{% endtab %}

{% tab title="CSS" %}

```css
.stk-snippets-branded-image-01 .stk-mask {
  padding-right: 8px;
  padding-bottom: 8px;
}

.stk-snippets-branded-image-01 .stk-mask img {
  box-shadow: 8px 8px #4A00FF;
}
```

{% 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 background color and photo margins in the component CSS.
{% endhint %}

### Image with the custom border

![](/files/-ME2hiBaH4IiYdL3agMP)

{% tabs %}
{% tab title="6 columns grid HTML" %}

```markup
<figure class="stk-snippets-branded-image-02 stk-reset stk-image-figure" data-ce-tag="image-figure">
  <div data-ce-tag="mask" class="stk-mask"></div>
</figure>
```

{% endtab %}

{% tab title="CSS" %}

```css
.stk-snippets-branded-image-02 .stk-mask {
  mask-border: url("data:image/svg+xml,%3Csvg width='19' height='28' viewBox='0 0 19 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.14085 28H0V0H4.14085C4.14085 2.72253 6.3479 4.92958 9.07043 4.92958C11.793 4.92958 14 2.72253 14 0H18.1409V28H14C14 25.2775 11.793 23.0705 9.07043 23.0705C6.3479 23.0705 4.14085 25.2775 4.14085 28Z' fill='black'/%3E%3C/svg%3E%0A") 5 2 round;
}
```

{% 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 border style in the component CSS.
{% endhint %}

## **Content Experience Impact**

[According to Lucidpress](https://pubsecure.lucidpress.com/State-of-Brand-Consistency-2019/#ox~Uxh-PAjMi), maintaining brand consistency across your channels can lead to an average 33% growth in revenue—and 50% of companies say that customers expect consistent branding across the board. So, this is about more than just making your content look sleek. You can use the power of components to help bring everything together by designing some standard frames or overlays that you can quickly pop any image into and make it yours.

{% hint style="success" %}

### **Dos**

* Align your branded imagery designs with your organization’s style guide, using the colors, fonts, icons, and the like that are used across your site.&#x20;
* Develop a style guide specifically for your imagery, outlining the types of photos or illustrations you choose from stock sites. It will be easier to unify them with branded overlays when they already align with your brand styles in some way.&#x20;
* Consider designing some branded image templates for fun—like illustrative overlay designs that make images stand out—and some for utility—like creating frames that look like a phone or computer interface to drop screenshots into.
  {% endhint %}

{% hint style="danger" %}

### **Don'ts**

Don’t make your branded overlays too busy—you don’t want to take away from the imagery itself or make your graphics look like an ad with tons of texts and logos.
{% endhint %}

## **Learn More**

[**3 Content Design Mistakes That Are Majorly Hurting Your Branding—and How to Fix Them Fast**](https://setka.io/blog/3-content-design-mistakes-that-are-majorly-hurting-your-branding-and-how-to-fix-them-fast/)\
*Setka*

[**The Art of a Consistent Brand Image**](https://www.canva.com/learn/art-consistent-brand-image/)\
*Canva*

## **Extra Inspiration**

![](/files/-MG7tjphjMgMNasbTqIw)