---
title: Spotlight card
---

[Skip to content](https://bereto.dev/spotlight-card#main-content)

[![bereto.dev](https://bereto.dev/hubfs/bereto_dev_logo.svg "bereto.dev")](https://bereto.dev/)

- [Services](https://bereto.dev/services)
- [HubSpot Marketplace](https://bereto.dev/hubspot-marketplace)
- [Projects](https://bereto.dev/projects)
- [Blog](https://bereto.dev/blog)
- [About Me](https://bereto.dev/about-me)

This is a search field with an auto-suggest feature attached.

- There are no suggestions because the search field is empty.

[Contact](https://bereto.dev/contact-me)

[Contact](https://bereto.dev/contact-me)

This is a search field with an auto-suggest feature attached.

- There are no suggestions because the search field is empty.

- [Services](https://bereto.dev/services)
- [HubSpot Marketplace](https://bereto.dev/hubspot-marketplace)
- [Projects](https://bereto.dev/projects)
- [Blog](https://bereto.dev/blog)
- [About Me](https://bereto.dev/about-me)

# Spotlight Card

The "Spotlight card" is the ideal element for highlighting a feature or characteristic of a product or service.

[Go to the marketplace](https://ecosystem.hubspot.com/marketplace/modules/spotlight-card-module-by-devteam-partners)

![HubSpot AI - Reply Recco-Apr-22-2024-07-31-41-6261-PM](https://bereto.dev/hs-fs/hubfs/HubSpot%20AI%20-%20Reply%20Recco-Apr-22-2024-07-31-41-6261-PM.png?width=1760&height=990&name=HubSpot%20AI%20-%20Reply%20Recco-Apr-22-2024-07-31-41-6261-PM.png)

### The Spotlight Card

The "spotlight card" is the ideal module for highlighting a feature or characteristic of a product or service.

![Service Hub - Ramp Up Retention-Apr-22-2024-07-30-11-4612-PM.png](https://bereto.dev/hs-fs/hubfs/Service%20Hub%20-%20Ramp%20Up%20Retention-Apr-22-2024-07-30-11-4612-PM.png.webp?width=1760&height=990&name=Service%20Hub%20-%20Ramp%20Up%20Retention-Apr-22-2024-07-30-11-4612-PM.png.webp)

### The Spotlight Card

The "spotlight card" is the ideal module for highlighting a feature or characteristic of a product or service.

 Learn more

## Cool example

This card features the image at the top; we use a PNG with transparency to enable using the card with a gradient background. The card includes a link, so we utilize both the button and the image as clickable elements.

## Another example

In this card, the image is at the bottom. The image is a JPG with a white background, so we use the card with a plain white background, and to highlight it from the page background, we activate the shadowing.

![iphone-card-50-durability-202403-1](https://bereto.dev/hs-fs/hubfs/iphone-card-50-durability-202403-1.jpeg?width=960&height=560&name=iphone-card-50-durability-202403-1.jpeg)

### Enjoy your Phone. For longer.

## Module settings

### Content

- Image
- Title
- Description
- Link
- Link text

Advanced settings

- Custom Class
- Custom ID

![Captura de pantalla 2024-04-25 a las 8.09.18 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-25%20a%20las%208.09.18%20p.m..png "Captura de pantalla 2024-04-25 a las 8.09.18 p.m.")

![Captura de pantalla 2024-04-25 a las 8.09.41 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-25%20a%20las%208.09.41%20p.m..png "Captura de pantalla 2024-04-25 a las 8.09.41 p.m.")

### Styles

Card:

- Style
- Max width
- Border radius
- Background type 
    - Color
    - Gradient
- Shadow
- Shadow effect

Content:

- SEO tag
- Title text
- Description text
- Button style 
    - Text color/hover
    - Background color/hover
    - Padding
    - Border radius

Module spacing:

- Spacing

![Captura de pantalla 2024-04-25 a las 8.11.33 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-25%20a%20las%208.11.33%20p.m..png "Captura de pantalla 2024-04-25 a las 8.11.33 p.m.")

![Captura de pantalla 2024-04-25 a las 8.12.13 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-25%20a%20las%208.12.13%20p.m..png "Captura de pantalla 2024-04-25 a las 8.12.13 p.m.")

![Captura de pantalla 2024-04-25 a las 8.12.26 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-25%20a%20las%208.12.26%20p.m..png "Captura de pantalla 2024-04-25 a las 8.12.26 p.m.")

![Captura de pantalla 2024-04-25 a las 8.12.40 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-25%20a%20las%208.12.40%20p.m..png "Captura de pantalla 2024-04-25 a las 8.12.40 p.m.")

bereto.dev © 2026 | [Privacy Policy |](https://devteam.partners/legals#privacy)[Terms & Condition](https://devteam.partners/legals#terms)