# 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
{% tabs %}
{% tab title="6 columns grid HTML" %}
```markup
```
{% 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](https://setka.gitbook.io/components-library/getting-started/introduction) page.
You can also adjust background color and photo margins in the component CSS.
{% endhint %}
### Image with the custom border
{% tabs %}
{% tab title="6 columns grid HTML" %}
```markup
```
{% 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](https://setka.gitbook.io/components-library/getting-started/introduction) 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.
* 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.
* 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/)\
\&#xNAN;*Setka*
[**The Art of a Consistent Brand Image**](https://www.canva.com/learn/art-consistent-brand-image/)\
\&#xNAN;*Canva*
## **Extra Inspiration**
---
# 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/visuals-and-imagery/photo-collages.md?ask=
```
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.