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

# Feature

> The Feature block is for presenting some details about your product, highlighting its key features and advantages.

While the [Hero](/building-blocks/vikC2AWEpQGkZd4jGyoVxo/hero/avyLWEvNZNUqYewF51kMLA) area is for giving some general idea about your product and emphasizing its value proposition, the **Feature** block is supposed to go a bit more into details, providing concise information on the key features of the product and what they allow the users to achieve. The block has several layouts, which we'll discuss separately in the following articles, but let's first check out how the block configuration is organized in general, and what are the key settings.

The block has 4 key components:

* **Title**

* **Subtitle**

* **Image**

* **Features List**
  <Frame caption="Feature block structure">
    <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image1.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=58e947a66c1c5b29be63b22332221de4" alt="Feature block structure" width="2564" height="1218" data-path="building-blocks/images/feature/image1.png" />
  </Frame>

Let's check how each component is configured.

## Title and Subtitle

These are two text areas where you can enter the text.

<Frame caption="Title and Subtitle">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image2.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=de11c5920033d3f5b5c1dd43a2402f0c" alt="Title and Subtitle" width="848" height="622" data-path="building-blocks/images/feature/image2.png" />
</Frame>

## Image and Background Image

<Frame caption="Image and Background Image">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image3.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=a06a65698af2a44f3bafbd9876a2cf52" alt="Image and Background Image" width="840" height="936" data-path="building-blocks/images/feature/image3.png" />
</Frame>

Here you can add an image (either upload or select from gallery) by clicking on the image icon as well as enter an "alt" text for the image (specifies an alternate text for an image if the image cannot be displayed).

Next, you have the option to change the **Image Position**. It can be set to either **Left** or **Right**. Lastly, there is a field to upload a **Background Image** for the whole **Feature** area. The animation below shows the process of configuring this section.

<Frame caption="Adding an Image and Background Image to the Feature block">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image4.gif?s=87c5656bdc875bd14aa700df2f629f10" alt="Adding an Image and Background Image to the Feature block" width="2880" height="1410" data-path="building-blocks/images/feature/image4.gif" />
</Frame>

## Features

In this section you add the features along with their **Title**, **Description**, and **Icon**.

The features are added within separate tabs as shown below. There's also a plus button for adding a new feature tab as well as a delete option to delete the current feature.

<Frame caption="Add and Delete options">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image5.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=68094108c9ea82cb97305d479738ee69" alt="Add and Delete options" width="848" height="874" data-path="building-blocks/images/feature/image5.png" />
</Frame>

You can also reorganize the tabs using drag and drop.

<Frame caption="Reorganizing tabs">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image6.gif?s=551d90fd06d2c131bac275062a436c5a" alt="Reorganizing tabs" width="990" height="908" data-path="building-blocks/images/feature/image6.gif" />
</Frame>

# Feature Block Layouts

## Layout: Feature with right side picture

<Frame caption="Feature with right side picture">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image7.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=be0427ff409f1ed13875610177708b29" alt="Feature with right side picture" width="2298" height="1130" data-path="building-blocks/images/feature/image7.png" />
</Frame>

This layout has a one-column list of features and the image is on the right by default.

## Layout: Feature with left side picture

<Frame caption="Feature with left side picture">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image8.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=551bfe623664958da802a1c25f13ff09" alt="Feature with left side picture" width="2450" height="1458" data-path="building-blocks/images/feature/image8.png" />
</Frame>

In this layout, the features list is organized into two columns, and the image is on the left side by default.

## Layout: Feature with link

<Frame caption="Feature with link">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image9.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=d2ba1f7a1c1bd5d91f8fa68e0097f102" alt="Feature with link" width="2360" height="1114" data-path="building-blocks/images/feature/image9.png" />
</Frame>

In this layout, the features don't have a subtitle field (only title) and are organized into one column, as can be seen in the image above. Moreover, there's a link at the bottom, the **Text** and **Action** of which can be customized, as shown below.

<Frame caption="Link setup for feature">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image10.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=9e1082760633af055cdc32a054b3a60d" alt="Link setup for feature" width="852" height="1000" data-path="building-blocks/images/feature/image10.png" />
</Frame>

## Layout: Feature with product demo

<Frame caption="Feature with product demo">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image11.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=9bfc16b9c12d2e5d04a00091529ef99e" alt="Feature with product demo" width="2304" height="1274" data-path="building-blocks/images/feature/image11.png" />
</Frame>

This layout allows you to add an image to the feature to demonstrate it.

<Frame caption="Image option for each feature">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image12.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=13e77c92fd8d3118701e7f79e16c788b" alt="Image option for each feature" width="846" height="864" data-path="building-blocks/images/feature/image12.png" />
</Frame>

The users can switch between between the features to view each one, as shown below.

<Frame caption="How the block works">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/feature/image13.gif?s=4ab3f41aafbfd6235cce58408892e7f8" alt="How the block works" width="2880" height="1410" data-path="building-blocks/images/feature/image13.gif" />
</Frame>
