> For the complete documentation index, see [llms.txt](https://docs.pixeleyes.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pixeleyes.de/anleitungen-instructions/english/documentation-of-our-shopware-6-plugins/cms-widgets-for-the-shopping-experiences/shared-settings-border-text-alignment.md).

# Shared Settings: Border, Text Alignment

Many fields appear identically on several elements. To avoid repetition they are explained once, centrally, here – the element chapters link back here where relevant.

## Spacing (padding & margin)

Almost every element has, in the **General** tab:

* **Padding** – space between the element's edge and its content (CSS padding, e.g. `24px`).
* **Margin** – space to the previous/next element (CSS margin).

## Border (on/off + colour)

Every card and box element (e.g. Contact Teaser, USP Icon Textbox, Reviews, Text Card, Pricing Card, Team Member, Download Card, Image & Text Card) has:

* **Show border** – toggle, **off** by default.
* **Border colour** – colour picker, only shown once the border is enabled. The default value automatically follows your theme's button border colour; you can pick your own colour at any time.

On grid/list elements (USP Icon Textbox, Reviews) the border always wraps only the **outer box** – never the individual items inside it.

## Text alignment

Every element with both a title **and** text/description offers a three-way alignment:

* **Left** (default)
* **Centre**
* **Right**

## Image loading behaviour & image animation

Every element with image(s):

* **Image loading behaviour**
  * *Lazy (deferred)* – default. The image only loads once it scrolls into view (better for page load time).
  * *Eager (immediate)* – loads the image right away; useful for images that are visible immediately (e.g. above the fold).
* **Image animation** – a subtle fade-in effect when the image scrolls into the viewport: No animation (default) or one of 7 variants (e.g. fade in, slide up, zoom).

## Title type (heading level)

Wherever a title is configurable, you can also choose the HTML level: **H1–H6** or **Div** (no semantic heading tag). Important for accessibility and SEO – a page should generally have only one H1.

## Link target

Every button and clickable element (Button element, CTA Card, Hero Banner, Image & Text CTA, Text Card, Pricing Card, single image, Countdown Banner …) offers a consistent link-target field.

**Link type:**

| Option       | Target                                                          |
| ------------ | --------------------------------------------------------------- |
| No link      | element is not clickable                                        |
| URL          | freely entered address (internal or external)                   |
| Category     | internal link to a category page                                |
| Product      | internal link to a product page                                 |
| Email        | opens the mail client (`mailto:`)                               |
| Phone number | initiates a call (`tel:`) on mobile devices                     |
| Popup        | opens a modal with a freely configurable title + content (HTML) |
| File         | links an uploaded file (e.g. PDF) for download                  |

Also: **Open link in new tab** (toggle).

## Button style & button size

Wherever a button is configurable (Bootstrap classes):

* **Button style**: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, Link – each also available as an outline variant.
* **Button size**: Small, Normal, Large.

## Icon size & columns (grid elements)

On icon and card grids (USP Icon Textbox, Icon List, Reviews):

* **Columns** configurable separately for **mobile**, **tablet portrait**, **tablet landscape** and **desktop** – so the grid adapts cleanly on every device.
* **Icon size** – minimum height/width of the icons in px.