# Customizable cards The "Customizable cards" section in the website builder is designed for those who want to easily and quickly present key information about their products, services, or customer reviews. These blocks allow you to add visually appealing cards to the site page, which can be customized to meet the needs of your business.
Regardless of whether you want to provide a detailed description of the course, feedback from satisfied customers, or recommendations for using your services, "Customizable cards" and "Course Cards" will help highlight information and make it more accessible and convenient for site visitors. ## How to add block? To add the "Customizable cards" section, click on the "+" in the editing mode of your website:
Next, find the "Customizable cards" section in the menu that opens and click on it to add the section to the site. The section will be added to the site, and the content settings menu will open for you:
## How to add card? In the edit menu of the "Customizable cards" section of the content, you will see various sections for settings: the style of the cards, images, buttons, etc. For your convenience, you can add cards first to see how the style settings apply to the cards. To do this, scroll down in the content settings menu and find the "Add Card" button:
By clicking on the "Add card" button, you see the settings for a card with an empty text field, a bar for uploading an image for the card and for the button icon, as well as for the text of the button itself:
The card's settings fields are optional: that means, you can skip, for example, uploading an image for the card itself or for the button icon, without inserting text - everything is at your discretion. If, for example, you do not need a button with a link in the card, leave the "Button name" and "Link" fields empty: then the buttons will not be displayed in the card.
There are various settings for the card text, similar to any text editor, where you can adjust the font size, font outline, color, highlighting, as well as add a link and more. To do this, select the text (part of the text) and apply the necessary settings to the text:
After you have fully configured the first card, add the following: to do this, click on the "Add Card" button, which is located below the settings bar of the first added card:
## Cards settings {% hint style="info" %} The cards are configured in a single style: all the settings that you use in this section will be applied to all cards in the same section. {% endhint %} ### Cards Style There are two styles for cards in the Mavibot website builder: simple and in the form of a slider. During using a simple style, all the cards will be immediately displayed on one page of the site section:
During using the "Slider" style, the cards will be in the form of a carousel, thereby adding more dynamism to the site: For the slider style, you can choose where the arrows and dots of the card will be located:
The arrows can be located inside the slider, outside, or hidden (for example, if you set a timer to automatically flip through the cards):
The dots can also be located inside the slider, outside, or hidden. To scroll through the cards automatically, set the time interval for displaying one page:
If the timer value is set to 0, the cards will not be automatically scrolled through. {% hint style="warning" %} Pay attention! The time is set in milliseconds, where one millisecond is equal to 0.001 seconds. This means that if you need to set 7 seconds, then enter the value in the 7000 field. {% endhint %} You can also choose the type of card:
#### Color settings for card elements To customize the cards to your style, use the color settings:
The color settings are applied to all cards at the same time. If you need the text color to be different in each card, then use the settings in the text field. An extensive color palette is available for color customization:
And you can apply the color settings to any element of the card. #### Setting borders and paddings
1. **Number of cards per row** - a text field that will help you set the required number of cards in one row (page). 2. **Paddings -** are fields for entering numeric values that will help increase or decrease the horizontal/vertical margins between cards, as well as the margins inside the cards,
You can set a common numeric value for the indentation inside the cards, or by clicking on the gear in the right corner of the line, set a separate value for the upper, lower, left and right borders:
#### Card orientation
The orientation of the card can be horizontal and also vertical. #### Alignment It can be in the center, on the left or right edge.
#### Shadow settings It will help to add depth to the cards and highlight them against the background of the section/page.
## Image settings The image settings are also applied to all images that you have added to the card.
In the image settings, you need to set: a) picture width:
The field takes a numeric value in pixels, if not specified, it is displayed automatically according to the actual width of the image in pixels. b) image height:
The field takes a numeric value in pixels, if not specified, it is displayed automatically in proportion to the actual height of the image. c) rounding:
The field, which takes a numeric value in pixels, helps to round the corners of the image:
d) image size:
The setting is applied if it is necessary to fill/stretch/position the image relative to the specified width and height for the image. e) the "Picture after text" checkbox If you check the box, the image will be located under the text in the card. ## How to set up buttons
The **text,** as well as the **link** to the page that your site visitor should click on, is configured in the card itself:
Also, in addition to the text and link, you can set an icon for the button by uploading an image in the card:
To set the color of the text and the background of the button, use the settings here:
Next, you can adjust the size, width, and paddings for the button:
1. **The width of the button** - is a field that takes a numeric value in both pixels and percentages:
2. **Button alignment** - helps to set the button in the card relative to the right or left edge, as well as the center.
3. **Button border radius -** is a field that takes a numeric value in pixels to round the corners of the button:
4. **Border width -** is a field that takes a numeric value in pixels to set the width of the button outline:
5. **Margin** It helps you to adjust the paddings for the button in the card relative to the top, bottom, left and right edges.
6. **Padding** It helps you to adjust the paddings inside the button.
7. **Icon** If you have uploaded an icon to a button in the card, then the icon can be adjusted to fit:
And also set the position of the icon relative to the text on the left or right:
8. **Shadow for the button** The shadow can be set not only for the card, but also separately for the button. To do this, it is enough to find a drop-down field with the name "Shadow" in the settings of the button and select the degree of shadow intensity: light or strong:
9. **Button animation**
It helps to attract the attention of clients (site users) to the targeted action on the button and add dynamics to the site: 1\) flash button animation:
2\) ripper button animation:
{% hint style="success" %} Done! \ Now you know how to create and customize cards on your website from scratch. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/websites/sites/blocks/cards.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.