> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.komo.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Advanced Hub and Card Designs

> Break the grid and create a seamless look using transparency and custom card dimensions to make your content "float" on your Hub.

## What is it?

Your **Engagement Hub** is more than just a collection of Cards—it’s a digital canvas! While our standard templates are designed for ease of use, you can move beyond the traditional "grid" look to create seamless, high-end designs that feel like a bespoke website.

By leveraging **Manual Transparency** and **Custom Dimensions**, your content can "float" and integrate directly into your Hub’s background.

## Achieving a Seamless Look with Transparency

To make your Cards feel like a natural part of the Hub background rather than a separate box, you can manually adjust the card background color to be transparent.

<Info>
  Card background transparency is currently supported on the following cards:

  |                  |                  |                |
  | :--------------- | :--------------- | :------------- |
  | 20 Words or Less | Issuu Card       | Spin to Win    |
  | Apple Music Card | Leaderboard      | Spotify Card   |
  | Carousel (Vote)  | Live Predictor   | Swiper         |
  | Countdown Card   | Live Trivia      | TikTok Card    |
  | Facebook Card    | Matterport Card  | Treasure Hunt  |
  | Fact Card        | Meme Generator   | Twitch TV Card |
  | Google Maps Card | Memory Challenge | UGC Upload     |
  | HTML Card        | Number Guess     | Video Card     |
  | iFrame Card      | Photo Frame      | Vimeo Card     |
  | Image Card       | Picker           | Vote Card      |
  | Image + Button   | Receipt Uploader | Watch to Win   |
  | Instagram Card   | Scratch and Win  | X/Twitter Card |
  | Interactive Q\&A | Secret Code      | YouTube Card   |

  We are actively rolling out transparency support to even more card types soon!
</Info>

## How to execute this:

1. **Prepare your Assets:** Design your Card Cover in a tool like Canva or Photoshop and export it as a **transparent PNG**.
2. **Upload to Komo:** Navigate to your **Card** > **Cover** tab and upload your image.

<img src="https://mintcdn.com/komotechnologies/22OmvqhqqNidygu6/images/transparent-custom-cards1.webp?fit=max&auto=format&n=22OmvqhqqNidygu6&q=85&s=3a81369c0b2c1c026a5cfdbe0eb02c82" alt="Advanced Hub and Card Designs: how to execute this:" width="1440" height="810" data-path="images/transparent-custom-cards1.webp" />

3. **Adjust Cover Colors:** In the **Cover** tab, click on the **(1)** **Cover colors** selector. Use the **(2) transparency slider** (or enter a hex code with 0% opacity) to remove the solid background color. This allows your PNG and the Hub background to blend seamlessly.

<img src="https://mintcdn.com/komotechnologies/22OmvqhqqNidygu6/images/transparent-custom-cards2.webp?fit=max&auto=format&n=22OmvqhqqNidygu6&q=85&s=2e12690d4462e68b1a40804551b3cef1" alt="Advanced Hub and Card Designs: how to execute this:" width="1440" height="810" data-path="images/transparent-custom-cards2.webp" />

## Breaking the Grid: Custom Card Dimensions

Your Card Covers don't have to be limited to standard rectangular dimensions! The Komo platform supports assets that break the mold:

* **Vertical Overhang:** You can upload Card Covers that are significantly taller than the suggested dimensions. This allows you to create "pillar" cards or long visual elements that draw the user’s eye down the page.
* **Irregular Shapes:** By using a transparent PNG on a taller canvas, you can make cards appear as circles, waves, or diagonal "burst" elements that overlap the Hub background.

## The "Clean Canvas" Checklist

<img src="https://mintcdn.com/komotechnologies/22OmvqhqqNidygu6/images/transparent-custom-cards3.webp?fit=max&auto=format&n=22OmvqhqqNidygu6&q=85&s=3cfc648b1c785c8684387aab62439199" alt="Advanced Hub and Card Designs: the &#x22;Clean Canvas&#x22; Checklist" width="1440" height="810" data-path="images/transparent-custom-cards3.webp" />

To achieve a truly "floating" design, you’ll want to remove any UI elements that might clutter your custom artwork. Head to your **Settings** menu within the Card editor to toggle the following:

* **Cover Shadow:** Toggle this **OFF** to remove the border shadow, ensuring the card doesn't look like a "box" sitting on the page.
* **Title & Description:** Turn these **OFF** to let your custom typography on the image do the talking.
* **CTA Buttons:** Turn the **Button** toggle **OFF** if you want the entire image to act as the link without a visible bar at the bottom.
* **Author & Progress Indicator:** Toggle these **OFF** for a cleaner, more editorial look.

## Design Inspiration 💡

See how these techniques are being used to create world-class digital experiences:

* [Snap Diet Cola](https://snapdietcola2026campaign.komo.site/)**:** Perfect use of transparent PNGs and vertical dimensions to create a fluid, refreshing flow.
* [Soulful Solarium](https://soulfulsolarium-demo.komo.site/): High-end festival aesthetic using transparency to let vibrant background colors shine through.
* [Future Built Forum](https://future-builtforum.komo.site/): A modern, professional look that uses custom dimensions to create a structured yet seamless layout.

<img src="https://mintcdn.com/komotechnologies/22OmvqhqqNidygu6/images/transparent-custom-cards4.webp?fit=max&auto=format&n=22OmvqhqqNidygu6&q=85&s=de77638a44fedceb27e3685c56b217cc" alt="Advanced Hub and Card Designs: design Inspiration 💡" width="1440" height="810" data-path="images/transparent-custom-cards4.webp" />

<Tip>
  ## **Pro-Tip: Mastering Your PNG Assets**

  To get that ultra-slick, "floating" look seen in the **Snap Diet Cola** and **Soulful Solarium** hubs, your image preparation is just as important as your Hub settings. Here’s how to prep your assets like a pro:

  #### **1. Export as "Transparent PNG"**

  Whether you are using Canva, Photoshop, or Figma, ensuring your background is transparent is step one.

  * **Figma Users:** Select your Frame or Group. In the right-hand **Export** panel, ensure the format is set to **PNG**. Click the plus (+) icon to see options and ensure "Ignore over-lapping layers" is unchecked if you want a clean transparent crop.
  * **Canva Users:** When clicking **Download**, ensure **PNG** is selected and check the box for **Transparent Background** (available in Canva Pro).
  * **Photoshop Users:** Use **Export As** > **PNG** and ensure the **Transparency** checkbox is ticked.

  #### **2. Mind the "Canvas" vs. the "Content"**

  Komo allows your card covers to be longer than the suggested dimensions. This is your secret weapon for breaking the grid!

  * **Create a Tall Canvas:** Instead of a standard square, try a ratio like **1080 x 1920** (vertical).
  * **Figma Strategy:** Use a Frame with no fill color. Place your actual design elements (logo, product bottle, character) within that Frame, leaving "negative space" at the top or bottom.
  * **The Result:** When uploaded, your card will appear to "float" with plenty of breathing room, allowing elements to "bleed" into the Hub background seamlessly.

  #### **3. "Bake In" Your Effects**

  Since you are turning off the **Cover shadow** in the Komo Settings to achieve a seamless look, your image might look a bit "flat."

  * **Pro Move:** Add a soft **Drop Shadow** or **Layer Blur** directly to your design in Figma or Photoshop *before* you export it.
  * This gives your "floating" asset depth and dimension against the Hub background without needing a boxy card container.

  #### **4. Optimize for Load Speed**

  Transparent PNGs with large dimensions can sometimes have large file sizes. To keep your Hub snappy:

  * **Figma Tip:** Use the "TinyPNG" or "Downsize" plugin directly within Figma to compress images before you even hit export.
  * Alternatively, run your final files through a web compressor. This ensures your high-end designs load instantly, even on slower mobile connections.
</Tip>