---
title: Animated Featured List
slug: animated-featured-list
docTags: 
createdAt: 2024-05-13T14:41:19.539Z
---

# Overview

A block with a text section and animated clickable menu buttons. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/hzBTZXnel5qSGFbgPZeJL_image.png" size="44" width="325" height="39" position="center" caption="Animated Featured List block - Page structure" alt="Animated Featured List block - Page structure" showCaption="true"}

## Sample Animated Featured List block

![](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/2OWjNqFSyt27vvIzm-j5T_image.png)

## General

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ZgmDUlOCE3iXUkw4uqvh2_animated-menu-items.jpg" size="36" width="379" height="724" position="center" caption="Animated Featured List block - General settings" alt="Animated Featured List block - General settings" showCaption="true"}

The menu items are hoverable and can be set up as separate Cards. Set up an external link for each button to redirect visitors to another source.



## Text

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/IYPVe_gn9wdohxp2ASi9L_image.png" size="44" width="347" height="446" position="center" caption="Animated Featured List block - Text settings" alt="Animated Featured List block - Text settings" showCaption="true"}

1. **Prefix** : This will add a medium size text at the top of your Block 
2. **Title** : This is the main title in large text size
3. **Subtitle** : This text will be printed below the title in small text size

## Buttons

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/5YyU_v9HdJvmkIOhEAVD6_image.png" size="44" width="338" height="464" position="center" caption="Animated Featured List block - Buttons settings" alt="Animated Featured List block - Buttons settings" showCaption="true"}

You can add buttons below your main content, add as many buttons as you need.

### Button style 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/eq4SvM5fcXsAdDaZpf38L_image.png" size="44" width="319" height="336" position="center" caption="Animated Featured List block - Buttons style settings" alt="Animated Featured List block - Buttons style settings" showCaption="true"}

Choose between 6 different button styles.  Depending on the chosen style you will have to change the text color to make the button text visible on your screen/button.

### Button text 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/1rZSuJfzWcj43L2axjusy_image.png" size="44" width="303" height="88" position="center" caption="Animated Featured List block - Button text settings" alt="Animated Featured List block - Button text settings" showCaption="true"}

This is the text displayed on the button, when using multi-languages make sure to also enter the translations.

### Button url :

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/yz5_GAtb2MWccertwA7t4_image.png" size="44" width="800" height="470" position="center" caption="Animated Featured List block - Button url settings" alt="Animated Featured List block - Button url settings" showCaption="true"}

First, use the dropdown and select "**internal**" or "**URL**".  When using internal links make sure to make those relative.  When using "URL" add the full URL to the website you want to link, so "https\://your-website.com"