---
title: Service Box Block
description: "To customize the Service Box Block, you can use the below settings: - **General** - **Enable/Disable Icon/Image:** Hide/Show the icon or image of the service box. - **Select Type:** Select one option from the icon or image. On selecting the…"
url: "https://spiceblocks.com/docs/service-box-block/"
updated: "2023-02-21"
category: Blocks Customization
---

# Service Box Block

To customize the Service Box Block, you can use the below settings:

- **General**
  - **Enable/Disable Icon/Image:** Hide/Show the icon or image of the service box.
  - **Select Type:** Select one option from the icon or image. On selecting the option, selected option's related settings appears below:
    - **Icon Type**
      - **Icon Settings:** Select the icon and adjust the width and padding.
    - **Image Type**
      - **Image Settings:**
        - **Image Dimension:** Set the height & width of the image.
        - **Image Border:** Adjust the border style, color, and width of the service image.
        - **Image Border Radius:** Adjust the border radius of the service image.
        - **Image Margin:** Adjust the margin around the service image.

  - **Box Settings:**
    - **Enable/Disable Border Style:** Hide/Show the top left and bottom right corner border.
    - **Box Border:** Adjust the border style, color, and width of the service box.
    - **Box Border Radius:** Adjust the border radius of the service box.
    - **Box Margin:** Adjust the service box margin.
    - **Box Padding:** Adjust the service box padding.
  - **Title Settings:** Enable/Disable the service title and adjust the padding.
  - **Content Settings:** Enable/Disable the service description and adjust the padding.
  - **Display:** Hide/Show the Service Box individually from a desktop, tablet, or mobile.
  - **Animation Effects:** Set the animation effects with multiple options like Fade, Bounce, Swing, etc on the Timeline.

- **Box** **Shadow**
  - Adjust the shadow of the service box using **Horizontal, Vertical, and Blur** Shadow options.
  - Set the color of the box shadow using the **Box Shadow Color** option.

- **Image Box** **Shadow**: This option appears when you select the image type.
  - Adjust the shadow of the service image using **Horizontal, Vertical, Blur, and Spread** Shadow options.
  - Set the color of the box shadow using the **Box Shadow Color** option.

- **Color & Background**
  - Change the normal and hover color of the Service box icon, title, content, and background.

- **Typography**
  - Set the typography of the Service box title and content using **Font Family**, **Font weight**, **etc.** options.

 ![](https://spiceblocks.com/wp-content/uploads/2022/12/service-box-block.gif)