---
title: Article Cards
slug: article-cards
docTags: 
createdAt: 2024-05-09T12:29:39.785Z
---

# Overview

## 1. Article Cards V1

This block is a layout with an option to add several cards in a row. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/EjIJiAxdA4YXycjWqFf6l_image.png" size="44" width="326" height="47" position="center" caption="Article cards V1 block - Preview" alt="Article cards V1 block - Preview" showCaption="true"}

## Sample Article Cards block

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ut685Jsxxc0oekv3dzyk9_article-cards.jpg" size="78" width="1431" height="633" position="center" caption="Article cards V1 block - Preview" alt="Article cards V1 block - Preview" showCaption="true"}

## General

There is a possibility to place up to 5 cards in a row. Simply click the *'Cards count in row*' section and choose the necessary count that will be used for this layout. Don't forget to press the '*Save*' button at the end to apply the changes.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/kq9aXvvtvxpZe9pjInBfd_image.png" size="50" width="318" height="763" position="center" showCaption="false"}

You can add / edit all text fields :

- **Prefix** : First text line (tagline text size)
- **Title** : Second text line (large text size)
- **Subtitle** : Third text line (small text size)
- **Top text align** : Select left, right or center
- **Button + url **: Add button title and external or internal link
- **Carts in a row** : Select up to max 5 Cards
- **Contain image** : Image contained in section

### Cards

Content is added using **Cards**. Click on **+Add** to add more Articles/Cards.  Set the Card alignment Left, right or center, using the "**Cards align**" dropdown.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/iqXyqrmUpokMsnCkkyy9P_image.png" size="50" width="323" height="733" position="center" caption="Article Cards V1 block - Card settings" alt="Article Cards V1 block - Card settings" showCaption="true"}

All images can be clickable and forwarded to the necessary webpage *(URL or Internal link)*. Just click the 'Globe' button to choose the best option for you as shown below:

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/FcqoYGGKGMyfop2z6Aevd_url-or-internal-link.jpg" size="38" width="334" height="541" position="center" caption="Article cards V1 block Cards - Button settings" alt="Article cards V1 block Cards - Button settings" showCaption="true"}

## 2. Article Cards V2

This block has the same purpose and the difference is the ability to add text under an image. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/BJzmFH37mOyfP5IVYxXIK_image.png" size="44" width="322" height="43" position="center" caption="Article Cards V2 block" alt="Article Cards V2 block" showCaption="true"}

## Sample Article Cards V2 block

![Article cards V2 block Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/mJZhHN5BDsVoCT1lOMj2l_image.png "Article cards V2 block Preview")

### General

There is a possibility to place up to 5 cards in a row. Simply click the *'Cards count in row*' section and choose the necessary count that will be used for this layout. Don't forget to press the '*Save*' button at the end to apply the changes.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/edAUDVRuYI9TBB-9CVo2K_image.png" size="50" width="351" height="570" position="center" showCaption="false"}

You can add / edit all text fields :

- **Prefix** : First text line (tagline text size)
- **Title** : Second text line (large text size)
- **Subtitle** : Third text line (small text size)
- **Top text align** : Select Left, right, center
- **Contain image** : set image display



### Background

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/UFFSoDJzMO2HbbAgrpnIN_image.png" size="50" width="353" height="290" position="center" showCaption="false"}

- **Accent Background color **: Set the background color
- **Text color **: Set the text color



### Cards

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/D_chBL7G7IkFGR8BNj2W0_image.png" size="50" width="329" height="301" position="center" showCaption="false"}

1. **Cards align** : Select Left, right or center
2. **Cards button style** : Select any of the 6 available button styles



Content is added using **Cards**. Click on **+Add** to add more Articles/Cards.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/fIuj7OjcBDtvAe0I1xBDe_image.png" size="54" width="282" height="718" position="center" showCaption="false"}

To add text that will be shown under the image you need to choose the '**Cards**' section on the right and fill in the **Text** fields.

1. **Image** : Upload media
2. **Title** : Add a title
3. **Text **: Add content
4. **Text alignment **: Select Left or center
5. **Button text** : Add text to be displayed on button
6. **Card url **: Add internal or external url
7. **Tag** : Add custom tags



## 3. Article Cards V3

This block differs from the first two with the ability to make one of the images bigger than the other 3.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/UPXYEFx0HKRVBjc88hY6t_image.png" size="44" width="327" height="42" position="center" caption="Article Cards V3 block" alt="Article Cards V3 block" showCaption="true"}

## Sample Article Cards V3 block

![Article cards V3 block Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/wvt6s1Abh_opcTSvOn0w4_article-card-v3.jpg "Article cards V3 block Preview")

You can also choose which image out of 3 will be bigger by picking the Active card in the General section. 

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/HaKqq0OPKPjLqUtisce6__picking-active-card.jpg" size="42" width="353" height="629" position="center" caption="Article Cards V3 block - General settings" alt="Article Cards V3 block - General settings" showCaption="true"}

All images can be clickable and forwarded to the necessary webpage if you choose to set up the internal link or URL.

## 4. Article Cards V4

This block is similar to *Article Cards V2*. It also gives the ability to add image text to each card, though, the picture size is bigger than in Article Cards 2, and it is possible to add only 2 cards in a row.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/c4WMMpUtQlnssdKwxqYkV_image.png" size="44" width="328" height="40" position="center" caption="Article Cards V4 block" alt="Article Cards V4 block" showCaption="true"}

## Sample Article Cards V4 block

![Article cards V4 block Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/3h8pN8t_0ZwyB-rDY1PFN_article-cards-v4.jpg "Article cards V4 block Preview")

All cards can also be clickable and forwarded to the necessary webpage if you set up the Internal link or URL.