> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/content-editing/components/presentation.md).

# Presentation

Every component has a **Presentation** group at the bottom of its form. Its fields control how the component looks without changing its content.

![The Presentation group](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-89abfd1b6790620690e70fcdd4ab057909208801%2Fpresentation.png?alt=media)

## Style

Cosmetic styles applied to the component. Select more than one with Ctrl-click (Windows) or Cmd-click (Mac). The options vary a little by component; the common ones are:

* **Breakout** — extend the component to the full width of the window on pages that otherwise keep components in the content column.
* **Display** — larger, display-style heading.
* **Hero** — extra top and bottom padding to make the component bigger.
* **No background padding** — remove all padding inside the component, even when a palette is applied.
* **No side gaps**, **No column gaps**, **No row gaps** — remove the padding at the sides and the gaps between columns and rows of a list or section; use the three together for a true edge-to-edge grid.
* **Text left**, **Text center**, **Text right** — align the text.
* **Text shadow** — for text over a background image.
* **Equal height** — make columns the same height (Section).
* **Align items center** — vertically centre columns (Section).
* **Hide info** — hide the info label on list items.
* **Transparent card** — make image cards and basic cards slightly transparent (Item List).
* **Push down** and **Pull up** — overlapping layouts; see below.

See breakout components on the demo site: <https://govcms.convivial.io/demo/content/test-edgy-page>

## Layout

Where the component's heading and introduction (*side*) sit relative to its main content (*main*), as a twelve-column split: **Main (12)** stacks them; **Side (3) Main (9)** puts the heading in a narrow left column; **Main (8) Gap (1) Side (3)** puts it on the right with a gap; and so on.

## Position

The width of the component and where it sits: **Left**, **Center** or **Right**, at **33%**, **50%** or **66%** of the content width. Leave empty for full width. How Layout and Position work together with the heading is explained in [Component header](/convivial-for-govcms/concepts-and-tools/component-header.md).

See arrangements on the demo site: <https://govcms.convivial.io/demo/arrangements>

## Palette

The colour palette for the component: **Standard**, **Alternate**, **Primary**, **Secondary**, **Accent** or **Neutral**. Each palette has a light and a dark version, and the site switches between them with the visitor's colour scheme. Themers define the colours. See [Palettes](/convivial-for-govcms/concepts-and-tools/palettes.md).

See colour palettes on the demo site: <https://govcms.convivial.io/demo/colour-palettes>

![The six palettes](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-9f97ec0b77d0e472f28b6f1a8e38b730ba4dae7d%2Fcolour-palettes.png?alt=media)

## Texture

A gradient over the palette background that adds depth without an image: **Linear** from an edge or corner, **Radial** spotlight or vignette, or **Conic** from a corner. See [Textures](/convivial-for-govcms/concepts-and-tools/textures.md).

## Pattern

A tiled SVG pattern painted in the palette colour. Patterns are defined by Themers — see [Patterns](/convivial-for-govcms/theme-settings/patterns.md) — and chosen here from the list. Combine a pattern with a texture for a richer background.

See patterns on the demo site: <https://govcms.convivial.io/demo/patterns>

## Overlay

A tint or gradient laid over a background image so the text on top stays legible: **Linear** from an edge, **Radial** from the centre, or a **Tint** at strong, medium or weak opacity. Content inside the component also gets a drop shadow. See [Overlays](/convivial-for-govcms/concepts-and-tools/overlays.md).

See a banner overlay on the demo site: <https://govcms.convivial.io/demo/content/test-banner-background-image>

## Adding modifiers

Background images, gradients, padding and animations are added under **Modifiers** — see [Modifiers](/convivial-for-govcms/concepts-and-tools/modifiers.md) for the idea and the [Modifier reference](/convivial-for-govcms/content-editing/components/modifier-reference.md) for every field.

## View modes

List components — Node List, Item List, Media List, Slider — have a **View mode** that sets how each item is drawn: a stacked card, an image card, a teaser, a summary line and so on.

See view modes on the demo site: <https://govcms.convivial.io/demo/view-modes>

![View modes](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-1b5b36d7285f7e6ae5a2e2da7b7468f1ec6a9ca1%2Fview-modes.png?alt=media)

## Overlapping components (Pull up / Push down)

Two styles let a component overlap the one above it — typically cards pulled up over a hero or a coloured section.

* On the **upper** component, select the **Push down** style. It adds extra bottom padding so its own content is not covered.
* On the **lower** component, select the **Pull up** style. It shifts the component upward into that padding.

This is designed for cards in a Node List or Item List. Tick **Hide heading** on the pulled-up list, and if the upper component uses the *Hero* style, give both components the *Hero* style too. Avoid mixing a dark and a light palette between the two components — the overlap makes contrast hard to guarantee.