# Graphic Buttons

## What is Graphic Buttons

Graphic Buttons is a **dynamic and visually appealing web part** designed to **attract the user's attention** and **enhance user engagement**. The component allows you to create **customizable buttons** with **eye-catching graphics** and **intuitive functionality**. The **key features** of Graphic Buttons include: 

* **Customizable design**: you can add images to your buttons for enhanced visual appeal and recognition, as well as customize the color of the title.
* **Easy navigation**: you can link your buttons to any internal or external URL, making it simple for users to navigate to important pages, documents, or resources. You can also configure buttons to open links in the same tab or a new tab.
* **Interactive elements**: the web part includes hover effects and animations to create a more interactive and engaging user experience.

The Graphic Buttons web part can be used to **present company values**, **promote significant initiatives**, or **highlight important actions**, such as registering for events, submitting forms, or downloading materials.   

{% hint style="info" %}
Explore the **advantages** of Intranet.ai **Graphic Buttons** by [**clicking here** ](https://intranet.ai/features/graphical-buttons/)to learn more.
{% endhint %}

***

## Add the Graphic Buttons web part to a SharePoint page 

* If your page is not already in edit mode, click **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this: <img src="/files/l5ySSL5qOCO7zmUJPhxZ" alt="" data-size="line">&#x20;
* Click on it and, in the web part search box, enter **Graphic** to quickly find and select the Graphic Buttons web part, which is named "IAI - GraphicButtons".

<div align="left"><figure><img src="/files/T1eYS8d364X6Qtr8zK8U" alt=""><figcaption></figcaption></figure></div>

* Click on the **Edit** **properties** <img src="/files/UKH32A0IwtovbkWwNCiO" alt="" data-size="line"> button on the left of the web part to open the property pane and set options such as General settings, Photo settings, and Display settings. See below for more information on each of these sections.

***

## Configuration

1. [View settings](#view-settings)
2. [General settings](#general-settings)
3. [Photo settings](#photo-settings)
4. [Display settings](#display-settings)

### View settings

The view settings allows you to customize the appearance of your application by adjusting various layout settings.

<div align="left"><figure><img src="/files/OUZ81c5Q1Ewc0N1HkvBt" alt=""><figcaption></figcaption></figure></div>

By opening this first configuration, you will see the following options:

* **Do you want to hide the background?**\
  You can choose to hide or display the webpart background The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
* **Do you want to hide the background shadow?**\
  You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
* **Select the type of background shadow**\
  If you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
  * If you select **High contrast**, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
  * By choosing the **Light background** shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
  * Finally, the **Dark background** shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.
* **Do you want to hide the title?**\
  Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
* **Enter the application title**\
  Thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Graphic buttons” at the top left angle of the webpart.

### General settings

In this section, you need to specify the list which serves as data source for this web part.&#x20;

<div align="left"><figure><img src="/files/QuxmfdNaqHvDFqnXAHTE" alt=""><figcaption></figcaption></figure></div>

* **Enter the site URL**: enter the **URL of the site** where the list is located.&#x20;
* **Select the list where to take photos**: select the **Graphic buttons list** from the drop-down menu, which shows you all the lists available on the site.&#x20;

### Photo settings

As mentioned above, you can associate each button to an internal or an external link, so that it takes you to a page, a document, or a resource. In this section, you can **decide whether to open the links in a new page**.

<div align="left"><figure><img src="/files/DRk0ApbwdjQ3b3Wlw1Qk" alt=""><figcaption></figcaption></figure></div>

The **default option** is **No**, but you can switch it to **Yes**. This way, each link will be opened in a new page.

### Display settings

In this section, you can set a number of display options.

<div align="left"><figure><img src="/files/9ARkfiInXw90FdyvXtli" alt=""><figcaption></figcaption></figure></div>

* **Do you want to activate scrolling?** If you activate this option, a **scrollbar** appears on the right-hand side of the web part. If you select **Yes**, the **Enter webpart height** option becomes available, which means that you can choose the height of the web part. This way, you can set a fixed height and scroll up and down to see contents. This may be useful if you have a lot of buttons and you don't want the web part to take up much space.
* **Enter webpart height**: as described above, this option allows you to **choose the height of the web part**, which is measured in pixels.
* **Do you want to turn off the entrance animation?** By default, the web part includes an entrance animation, but you can deactivate it with this option.

***

## Fill in the Graphic buttons list

As explained above, the Graphic Buttons web part retrieves information from the Graphic buttons list. This section describes the steps to fill in the Graphic buttons list.

* First of all, click on the **Settings** icon on the top right of the page, then click on **Site contents**.

<div align="left"><figure><img src="/files/FEvdzNMogwiDuA9okVQO" alt=""><figcaption></figcaption></figure></div>

* Scroll down and select the **Graphic buttons** list.

<figure><img src="/files/dtBw5x2rUSyeXUID14va" alt=""><figcaption></figcaption></figure>

* When you click on **New**, a panel appears with a number of fields to fill in. The fields marked with **asterisks** are the **mandatory** ones.&#x20;

<div align="left"><figure><img src="/files/aBCz7wC8XYqaE4MregOo" alt=""><figcaption></figcaption></figure></div>

* **Title**: enter the title of the button.
* **Order**: enter a **number** to decide the order in which your buttons will appear.
* **Url**: enter the **link to the page or resource** that will be opened by clicking on the button. In this example, the field contains the URL of a video.
* **Title position**: choose the title position from the drop-down menu, which includes two options: **top** or **bottom**.
* **Card size**: choose the button size from the drop-down menu, which includes three options: **small**, **medium** or **large**.
* **Short description**: here you can write short description. You will see the description when mousing over the card.
* **Image**: **upload the picture** that will be displayed on the card.&#x20;

<figure><img src="/files/gS6RmM4d1k5wkbCZ6DEO" alt=""><figcaption></figcaption></figure>

* **Visible**: **tick the checkbox** to make the button visible.
* **Subtitle**: here you can enter an **optional subtitle**. The subtitle will appear under the title.&#x20;
* **Title color**: thanks to this field, you can **customize the color of the title**. By default, the title is white, but you can enter the name of a different color here. Please refer to this [list of HTML color names](https://www.w3schools.com/colors/colors_names.asp).&#x20;

When you're done, click on **Save**.

You can add as many buttons as you like. The example below is taken from a departmental page: here, five Graphic Buttons are used to present the values of the department in an attractive way.&#x20;

<figure><img src="/files/scgBLpFHhpot1L4GcfZI" alt=""><figcaption></figcaption></figure>

{% embed url="<https://intranet.ai/>" %}


---

# 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.intranet.ai/sharepoint-intranet/components/graphic-buttons.md?ask=<question>
```

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.