Design, layouts and shortcodes

Nune shortcode guide

Last updated: 29 July 2026

Nune shortcodes add safe, reusable components to page, post and product content without requiring custom PHP or JavaScript. They can also be inserted into Text blocks in the custom footer.

Footer Builder supports equal-width columns, a large left column or a large right column. Unequal layouts retain their wider desktop column and collapse responsively on smaller screens.

The same catalogue is available inside the CMS under Settings → Shortcode Guide, with searchable descriptions, option names and copy-ready examples.

Visual component picker

Page, post and product content editors include an Add component button below the editor and a ＋ Component button in the Visual toolbar. Either button opens the same visual picker.

  1. Search or browse the grouped component cards.
  2. Choose a component.
  3. Set only the options you need. Image and video components select their files directly from the Media Library, so clients do not need to find or type media IDs and paths.
  4. Check the generated shortcode preview.
  5. Select Insert component.

The component is inserted at the current cursor position. This works in both Visual and HTML modes. Paired components also provide a content field, which can contain text, allowed HTML or nested Nune components.

The picker and the Shortcode Guide use the same component names and options. Excerpt editors do not display the picker.

Multiword shortcode names use hyphens. Only the names shown in this guide are supported.

Website styling

Shortcodes use the same colours, fonts and design settings as the rest of the website. Cards, panels, grids and buttons therefore follow the styles selected in Settings.

Their component-specific layout, such as grid columns, image sizing and responsive stacking, adjusts automatically. Advanced users can use the optional class or extra_class value when a custom website style has been prepared for them.

Basic use

Enter a shortcode in the content editor’s Visual or HTML mode:

[button text="Shop now" url="/shop"]

Use quotation marks around attribute values, particularly when a value contains spaces:

[hero title="Welcome to our studio" subtitle="Made in Yorkshire" media_id="12"]

Recommended boolean values are:

  • 1 to enable an option.
  • 0 to disable an option.

IDs can be found in the relevant CMS dashboard or Media Library. Slugs are the URL-friendly names saved against pages, posts, products, categories and galleries.

Layout shortcodes use an opening and closing tag and can contain text, HTML and other shortcodes:

[container]
Content goes here.
[/container]

Always close a layout shortcode with the matching tag. Layouts can be nested up to eight levels deep.

Layout

Layout shortcodes are responsive by default. Multi-column grids and split layouts reduce to a single column on small screens.

Section

Create a semantic full-width section around other content:

[section style="accent" spacing="large"]
Content
[/section]

Options:

| Option | Values | |---|---| | style | default, accent, contrast, outline; omit it to inherit. | | background | default, transparent, muted, accent, contrast. | | spacing | none, small, medium, large. | | id | Optional safe HTML ID, beginning with a letter. | | class | Optional space-separated CSS class names. |

Container

Constrain content to a readable width and centre it:

[container width="wide" style="outline"]
Content
[/container]

width accepts narrow, default, wide or full. style accepts default, accent, contrast or outline; omit it to inherit the surrounding surface. The id and class options are also available.

Grid and column

Create a grid of one to six columns:

[grid columns="3" gap="medium" align="stretch" style="accent"]
[column][card]First item[/card][/column]
[column][card]Second item[/card][/column]
[column][card]Third item[/card][/column]
[/grid]

Grid options:

| Option | Values | |---|---| | columns | 1–6; default 2. | | gap | none, small, medium, large. | | align | start, center, end, stretch. | | style | default, accent, contrast, outline; omit it to inherit. | | id, class | Optional safe HTML ID and class names. |

A column accepts span="1" through span="6", align, style, id and class. Its styles are default, accent, contrast and outline; omit style to inherit. A span controls how many grid tracks that column occupies on larger screens.

Stack

Arrange content vertically with consistent spacing:

[stack gap="small" align="start" style="contrast"]
<h2>Section heading</h2>
<p>Supporting content.</p>
[button text="Find out more" url="/about"]
[/stack]

gap accepts none, small, medium or large. align accepts start, center, end or stretch. style accepts default, accent, contrast or outline; omit it to inherit.

Split

Create a responsive two-part layout:

[split ratio="wide-left" gap="large" align="center" style="contrast"]
[column]Main content[/column]
[column]Supporting content[/column]
[/split]

ratio accepts equal, wide-left or wide-right. The gap, align, style, id and class options are also available. Styles are default, accent, contrast and outline; omit style to inherit.

Surface styling is normally applied to the outer layout. Nested shortcodes inherit its colours and button treatment. Repeating style="accent" inside an accent layout does not add another translucent accent layer; use a different explicit child style only when that item should stand apart.

Card and panel

Group nested content in a styled surface:

[card style="outline" padding="medium"]
Card content
[/card]

[panel style="accent" padding="large"]
Panel content
[/panel]

Options:

| Option | Values | |---|---| | style | default, outline, accent, contrast. Default is transparent and borderless; outline uses the normal panel background and border. | | padding | none, small, medium, large. | | id, class | Optional safe HTML ID and class names. |

The default card, panel, feature-entry and image-card style can be selected under Style Settings → Shortcode Defaults. Image cards include post, page, product, category and featured listing cards. For card and panel shortcodes, the setting is used when style is omitted; an explicit shortcode value always overrides it. In the shortcode picker, choose Use site default to inherit the setting or Default — transparent for an explicitly transparent, borderless item.

Entries rendered by [feature-section id="…"] inherit this same surface default. This keeps employee, service and other feature collections consistent with the website’s cards and listing tiles.

Complete layout example

[section background="muted" spacing="large"]
[container width="wide"]
[grid columns="3" gap="medium"]
[column]
[card style="default"]
<h2>Original art</h2>
<p>Explore one-off pieces.</p>
[button text="View originals" url="/shop/originals"]
[/card]
[/column]
[column]
[card style="default"]
<h2>Prints</h2>
<p>Browse signed editions.</p>
[button text="View prints" url="/shop/prints"]
[/card]
[/column]
[column]
[card style="default"]
<h2>Workshops</h2>
<p>See forthcoming dates.</p>
[button text="View workshops" url="/bookings"]
[/card]
[/column]
[/grid]
[/container]
[/section]

Typography

Typography shortcodes use opening and closing tags so the text remains easy to edit.

Heading and lead text

[heading level="2" align="center" style="display"]Studio journal[/heading]
[lead align="center"]Stories, new work and forthcoming events.[/lead]

Heading options:

| Option | Values | |---|---| | level | 2–6. Level one is reserved for the page’s main title. | | align | left, center, right. | | style | default, display. | | id, class | Optional safe ID and class names. |

Lead text accepts align and class.

Quote, badge and highlight

[quote cite="Customer name"]A thoughtful customer quotation.[/quote]
[badge style="accent"]New[/badge]
[highlight style="muted"]Important information[/highlight]

Quote options are cite, align, style="default|plain" and class. Badge styles are default, accent, contrast and outline. Highlight styles are default, accent and muted. The default highlight uses the theme accent colour; muted uses the panel colour with a subtle outline.

Images, video and files

Image

Use a published Media Library ID:

[image media_id="42" size="large" align="center" caption="1"]

Options:

| Option | Purpose | |---|---| | media_id | Required published Media Library image ID. | | alt | Optional alternative text override. The saved Media Library text is used otherwise. | | caption | 1 uses the saved caption, 0 hides it, or enter custom caption text. | | size | small, medium, large, full, or match. Use match inside a grid or split column to crop the image so it fills the height of the adjacent section. | | align | left, center, right. | | link | Optional validated HTTPS or site-relative link. | | lightbox | Set to 1 to link the image to its full file. | | class | Optional safe class names. |

Hosted video

[video src="/uploads/video/studio-tour.mp4" controls="1" poster_id="42"]

The source must be an HTTP(S) URL or a site upload path. Available options are poster_id, controls, autoplay, muted, loop, caption and class. Autoplay video is muted automatically unless explicitly configured otherwise.

YouTube and Vimeo

[youtube id="VIDEO_ID" title="Studio tour" start="30"]
[youtube url="https://youtu.be/VIDEO_ID" title="Studio tour"]
[vimeo id="123456789" title="Exhibition film"]

Only validated YouTube and Vimeo identifiers are embedded. Arbitrary iframe HTML is not accepted.

File download

[file-download url="/uploads/files/price-list.pdf" text="Download price list"]

The URL must be an HTTP(S) URL or site upload path. Set download="0" to open it normally instead of requesting a download.

Interactive content

Accordion

[accordion style="contrast"]
[accordion-item title="Delivery information"]
Orders normally leave within five working days.
[/accordion-item]
[accordion-item title="Returns" open="1"]
Contact us within fourteen days.
[/accordion-item]
[/accordion]

Accordion items use native browser disclosure controls, so they work with keyboards and assistive technology without custom user scripts. Set style="contrast" on the outer [accordion] to use the configured contrast colours.

Tabs

[tabs style="contrast"]
[tab title="Overview"]General information.[/tab]
[tab title="Materials"]Materials and dimensions.[/tab]
[tab title="Delivery"]Delivery information.[/tab]
[/tabs]

Tabs include tab, arrow-key, Home and End keyboard behaviour. Each [tab] should be placed inside [tabs] and have a concise title. Set style="contrast" on the outer [tabs] to style the complete tab group.

Display any active menu created under CMS Admin → Menu Builder:

[menu id="2"]

The shortcode shown beside the selected menu in Menu Builder is clickable and copies the correct menu ID automatically. Menus can be assigned to the website Header or Footer, or left as Shortcode only. A shortcode-only menu is not inserted into the global website navigation and is displayed only when selected with its ID or exact name.

Options:

| Option | Values | |---|---| | id | Saved menu ID. This is the most reliable way to select a menu. | | name | Exact saved menu name, used when no ID is supplied. | | placement | header or footer to use the latest active menu assigned to that placement. | | layout | vertical or horizontal. Content and footer picker insertions default to vertical. | | align | left, center or right. | | show_title | 1 displays the saved menu name; 0 hides it. | | show_subitems | 1 includes nested menu items; 0 shows top-level links only. | | max_depth | Optional level limit from 1 to 10. Use 0 for all levels. | | title_level | Heading level 2 to 6 when the title is displayed. | | style | Use contrast for the configured contrast background, text, controls and borders. | | class | Optional safe custom class names. |

Examples:

[menu id="2" show_title="1" show_subitems="1" max_depth="2"]
[menu name="Customer links" layout="vertical" align="left"]
[menu placement="footer" show_title="0"]
[menu id="2" style="contrast"]

Menu colours, fonts and link styling inherit the website theme. Content menus display in a vertical column by default; set layout="horizontal" when a row is preferred. Menus placed in footer columns automatically use a compact vertical presentation.

Site and business information

Public business details are managed under CMS Admin → Settings → Business Details. They are separate from account owner, billing, SMTP and form-recipient information.

[site-name]
[logo width="220"]
[logo width="full"]
[business-info show_closed="1"]
[business-info show_closed="1" style="contrast"]
[current-year]
[social-links display="buttons"]
[social-links display="buttons" style="accent"]
[social-links display="buttons" style="contrast"]
[social-links display="buttons" style="outline"]

Details:

| Shortcode | Source | |---|---| | [site-name] | Website name in Site Settings. | | [logo] | Logo selected in Branding. width accepts pixels from 40–1200, or full. Options: width, link, class. | | [business-info] | All configured public phone, email, address, weekly hours and hours note from Business Details. Phone and email are linked automatically. Set show_closed="0" to omit closed days, or style="contrast" to use the configured contrast colours. | | [current-year] | Current four-digit year. | | [social-links] | Social profile URLs and the X/Twitter username in Website SEO settings. Set display to text or buttons. style accepts default, accent, contrast or outline. |

[business-info] omits individual rows that have not been configured. If none of the public business details have been configured, it displays nothing. It never falls back to a private account or billing address.

Content cards

Use [page id="…"], [post id="…"] or [product id="…"] to display one specific saved item. The slug option can be used instead of an ID.

Use the plural shortcode with a comma-separated id value to display several specific items in the order entered:

[pages id="3, 6, 17"]
[posts id="3, 6, 17"]
[products id="3, 6, 17"]

Plural page, post and product shortcodes use square image cards with a permanently visible dark text overlay, matching the website search-results style. Footer versions use the same treatment at a smaller tile size.

Featured content

Mark pages, posts or products as featured from their CMS dashboard, then display them with:

[featured-pages]
[featured-posts limit="6" columns="3" order="random"]
[featured-products limit="4" columns="2"]

Options:

| Option | Values | |---|---| | limit | 1–6; default 6. | | columns | 1–6; default 6. | | order | random, newest, oldest, or title (name for products). Default random. | | excerpt | Pages and posts only. Set to 0 to hide summaries. |

These shortcodes work in main content and footer Text components. The automatic featured rows on the main Blog and Shop pages can be enabled separately under Settings → Featured Content.

Page

Display one active page:

[page id="12"]
[page slug="about-us"]

Options:

| Option | Purpose | |---|---| | id | Page ID. Use either id or slug. | | slug | Page slug. | | show_title | Set to 0 to hide the page title. | | show_content | Set to 0 to hide the page summary. | | words | Limits the displayed summary length. | | limit | Alternative name for the summary-length limit. |

Example:

[page slug="about-us" show_title="1" show_content="1" words="180"]

Post

Display one active post:

[post id="24"]
[post slug="summer-exhibition"]

Options: id, slug.

Product

Display one product:

[product id="8"]
[product slug="original-landscape"]

Options:

| Option | Purpose | |---|---| | id | Product ID. Use either id or slug. | | slug | Product slug. | | show_description | Set to 1 to include a shortened product description. |

Content lists

List shortcodes accept multiple category slugs or IDs separated by commas or vertical bars.

Pages

The page currently selected as the website homepage is excluded automatically from page shortcodes. It remains available to website menus.

[pages limit="6" columns="3"]
[pages category="services" order="title"]
[pages category_id="2,4"]

Options:

| Option | Values | |---|---| | limit | 1–48; default 6. | | columns | 1–6; default 3. | | category | One or more page-category slugs. | | category_id | One or more page-category IDs. | | order | newest, oldest, title. | | excerpt | Set to 0 to hide summaries. | | show_excerpt | Set to 1 to show summaries. |

Posts

[posts limit="6" columns="3"]
[posts category="news" order="newest"]
[posts category_id="2,5" excerpt="0"]

Options:

| Option | Values | |---|---| | limit | 1–48; default 6. | | columns | 1–6; default 3. | | category | One or more post-category slugs. | | category_id | One or more post-category IDs. | | order | newest, oldest, title. | | excerpt | Set to 0 to hide excerpts. |

Products

[products limit="8" columns="4"]
[products category="prints" order="price_asc"]
[products category_id="3,6" order="newest"]

Options:

| Option | Values | |---|---| | limit | 1–48; default 8. | | columns | 1–6; default 3. | | category | One or more product-category slugs. | | category_id | One or more product-category IDs. | | order | newest, oldest, name, price_asc, price_desc. |

Categories

Single category

[page-category id="2"]
[page-category slug="services"]

[post-category id="3"]
[post-category slug="news"]

[product-category id="4"]
[product-category slug="prints"]

Each shortcode accepts id or slug. Page categories display the category and its active pages. Post and product categories display a category card linking to the appropriate filtered listing.

Category lists

[page-categories limit="6" columns="3"]
[post-categories limit="8" columns="4" description="0"]
[product-categories limit="6" columns="3"]

Options:

| Option | Values | |---|---| | limit | 1–200; default 50. | | columns | 1–6; default 3. | | description | Set to 0 to hide category descriptions. |

Use the explicit page, post or product category shortcode. The ambiguous name [categories] is not registered.

Display a published Media Gallery:

[gallery id="3" limit="6"]
[gallery slug="summer-show" limit="6" lightbox="1"]
[gallery id="3" limit="6" style="contrast"]

Options:

| Option | Purpose | |---|---| | id | Media Gallery ID. | | slug | Media Gallery slug. | | columns | Optional advanced override for Standard galleries only. Mosaic and Angled Bricks galleries ignore column counts. | | limit | Maximum number of images to display. Newly inserted gallery components default to 6; omit it or use 0 to display every image. | | lightbox | Enable or disable the lightbox. | | show_title or titles | Show image titles. | | show_caption or captions | Show image captions. | | style | Use contrast for the configured contrast background, text, elements and borders. |

Choose the gallery’s layout in Media → Gallery Builder:

  • Mosaic uses the established varied large, tall and wide image pattern. It does not offer a column setting.
  • Standard thumbnail grid uses equal-sized image boxes and allows 1–6 desktop columns.
  • Angled Bricks fills a responsive clipped panel with parallel rectangular images arranged as a conventional running-bond brick wall. It uses 12px mortar gaps, shifts alternate rows by half a brick and then rotates the complete wall by −45 degrees. The standard responsive height is its minimum; the panel grows according to its unique image count so the originals have enough visible area. Images then repeat cyclically to cover the cropped overscan. A repeated tile opens its original image, while each image appears only once in lightbox navigation. It uses four bricks per row on wide panels, three on tablets and two on phones.
  • On tablet and mobile widths, every layout reduces its column count and remains within the available content width.

In a custom footer, the image-limit option is removed. Mosaic and Standard galleries randomly select images on each page view, then centre square thumbnails in enough complete rows to match the tallest adjacent footer column. Angled Bricks retains its rotated running-bond layout. Selecting a thumbnail opens the image lightbox using the images visible in that gallery.

The same component can display the gallery attached to a page, post or product:

[gallery page_id="12"]
[gallery post_id="24"]
[gallery product_id="8" columns="3"]

Use one of page_id, post_id or product_id. The content item’s main image is automatically placed at the beginning, followed by its additional gallery images. If the main image is also present in the saved gallery, it is displayed only once.

Hero

[hero title="Welcome" subtitle="Discover the collection" size="medium"]
[hero title="Summer exhibition" media_id="12" size="large"]
[hero title="Visit the shop" media_id="12" url="/shop" target="_blank"]

Options:

| Option | Purpose | |---|---| | title | Main hero heading. | | subtitle | Supporting text. | | media_id | Media Library image ID. Recommended. | | size | Hero height: small, medium (default), or large. | | image_id | Alias for media_id. | | image | Media ID, saved upload path or validated image URL. | | url | Optional internal path, external URL, email link, telephone link or page anchor. When supplied, the entire hero becomes clickable. | | target | Use _blank to open the link in a new window. | | aria_label | Optional accessible link label, particularly useful for an image-only hero. |

The hero uses the full Media Library image as a centred, edge-to-edge background. Its white centred text and dark overlay match the homepage hero. Linked heroes receive a visible keyboard-focus outline.

Button

Create a button directly:

[button text="Contact us" url="/contact"]

Or display a saved button from the Button Builder:

[button id="3"]

Attributes written in the shortcode override the saved button’s settings.

Options:

| Option | Values or purpose | |---|---| | id | Saved Button Builder ID. | | text | Button label. | | url | https://, site path, mailto:, tel: or # link. | | target | _blank to open in a new tab. | | align | left, center, right. | | style | primary, secondary, outline, ghost, success, danger, contrast, light. | | size | small, medium, large. | | radius | default uses the theme --bradius; square, soft and pill explicitly override it. | | hover_effect | lift, darken, grow, none. | | hover | Alias for hover_effect. | | full_width | Set to 1 for a full-width button. | | icon | Plain text or an emoji displayed before the label. | | aria_label | Accessible label when the visible text needs clarification. | | extra_class | Optional CSS class containing letters, numbers, spaces, _ or -. | | bg_color | Six-digit hexadecimal colour, such as #1f2937. | | text_color | Six-digit hexadecimal colour. | | border_color | Six-digit hexadecimal colour. |

Example:

[button text="Book now" url="/booking" align="center" style="outline" size="large" radius="pill" hover_effect="grow"]

Spacing and dividers

[spacer height="40"]
[divider]

height is limited to 0–300 pixels.

Forms

Contact and booking forms must already exist and be active in their respective CMS builders. Newsletter signup forms use a subscriber-list ID.

[contact-form id="3"]
[booking-form id="2"]
[newsletter-form id="5"]
[contact-form id="3" style="contrast"]

The contact and booking IDs connect those shortcodes to their saved fields, validation, email handling, reCAPTCHA and submission processing. For [newsletter-form], use the ID of the subscriber list visitors should join. Do not construct form fields using arbitrary HTML.

Contact forms placed in Footer Builder automatically use a compact footer presentation; the same shortcode remains full-sized in normal page content. Contact, booking and newsletter forms all accept style="contrast". Their labels, fields, buttons, messages and borders adapt to the configured contrast colours.