Image style guidelines | Civio CMS Knowledge Base     [Skip to content](#main)  [ ![Civio CMS Knowledge Base](/storage/branding/01KP4QF0THM695BDF2MG6TX3CY.svg) ](https://nginx.deploy-lagoon-production.districtcms-docs.dh1.amazee.io)  [Product documentation](/articles) [Release notes](/releases)   Toggle navigation      

  [Product documentation](/articles) [Release notes](/releases)  

  1. [Home](/) ›
2. [Product documentation](/articles) ›
3. [Page components](/articles?category=7) ›
4. Image style guidelines

 Image style guidelines
======================

Updated 2 weeks ago · 2 min read

 Search     Search  

Overview
--------

To achieve the best outcome when creating content, follow these image style guidelines based on the content type and component you're using. The pixel dimensions listed here are examples — you can use different sizes as long as you follow the same ratio for your chosen component.

> ⚠️ **Site-specific dimensions:** Exact pixel dimensions vary by site. Refer to your site-specific user guide documentation for the precise image sizes required for each component on your site.

Common image components
-----------------------

The following components across District sites typically require images. Check your site-specific documentation for the correct dimensions for each:

ComponentNotes**Hero Banner**Large full-width banner image at the top of a page. Dimensions vary by site.**Card**Thumbnail image used in card components. Often scale and crop. Dimensions vary by site.**Flag**Image used in flag-style layout components. Often scale and crop. Dimensions vary by site.**Slick Media**Image used in media sliders or carousels. Dimensions vary by site.**Media**General media image. Dimensions vary by site.**Links / Featured Links**Images used within link list components. Dimensions vary by site.**Steps**Images used within step-by-step layout components. Dimensions vary by site.> 💡 **Tip:** If you're unsure which image size to use for a component, match the ratio of an existing image already in use on your site for that component.

---

Related articles
----------------

- [**File and media management**](/articles/file-and-media-management) — Uploading and managing media files in District
- [**Site components overview**](/articles/site-components-overview) — Overview of all available site components

Was this article helpful?
-------------------------

Your feedback helps us prioritise what to rewrite.

      Yes     No  

 [    Back to Page components ](/articles?category=7) 

 On this page 

**Need additional help?** Submit support requests by emailing [support@](mailto:support@civ.io)[doghouse.agency](http://doghouse.agency)

 © 2026 [District](https://www.district.au)