Mantra Starter

Button

ID: mantra_starter:button

Buttons allow the user to take actions or make choices.

Name Label Type Description
label Label Slot
size Size Enum It is possible to set the size of buttons.
Allowed values: small, medium, large
display Display String IE block, inline-block
url URL Url The button URL. Optional.
Label

Buttons demo

ID: mantra_starter:buttons_demo

List all buttons

Name Label Type Description
buttons Buttons Slot
Button link

Branding

ID: mantra_starter:branding

Site name, logo, slogan.

Name Label Type Description
site_name Site name String
site_logo Site logo String
site_slogan Site slogan String
Mantra
Drupal, built to be looked after
Site Name
This is the site slogan

Card

ID: mantra_starter:card

Status: experimental

Name Label Type Description
image Image Slot
content Content Slot
caption Caption Slot
title Title String
url URL String
aspect Aspect ratio Enum Allowed values: 1-1, 2-1, 3-1, 4-1, 3-2
max_width Max width Enum Allowed values: xs, sm, md, lg, xl
center Center Boolean
padding Padding Enum Allowed values: 1, 2, 3, 4
padding_x Padding x Enum Allowed values: 1, 2, 3, 4
padding_y Padding y Enum Allowed values: 1, 2, 3, 4
border Border Enum Allowed values: 1, 2, 3, 4
Web Development
Kona gravel bike
Kona xBike
xBike | $800

Card Grid

ID: mantra_starter:card_grid

Status: experimental

Name Label Type Description
rows Rows Slot
title Title String
gap_x Gap x Enum Allowed values: 1, 2, 3, 4
gap_y Gap y Enum Allowed values: 1, 2, 3, 4
Web Development
Web Design
Databases
Git

Content w/ sidebar

ID: mantra_starter:content_w_sidebar

Main column with a sidebar beside it. `meta` is the sidebar itself and `footer` sits under it; both fall below the content once there is no room for a second column.

Name Label Type Description
content Content Slot
meta Sidebar Slot
footer Sidebar footer Slot

What the layout does

The content column takes whatever the sidebar leaves. Both tracks are sized from leftover space rather than from the container width, so neither can push the other out of the grid.Below the breakpoint the sidebar and its footer fall under the content, in that order.

On this page

  • What the layout does
  • Where the tracks come from
  • What happens below the breakpoint

Related

The sidebar footer is placed in the second row of the second column, under the sidebar itself.

Field

ID: mantra_starter:field

Status: stable

Name Label Type Description
body Body Slot
label Label String

Gallery

ID: mantra_starter:gallery

Status: experimental

Name Label Type Description
images Images Slot
Kona gravel bike Klein Attitude bicycle Panasonic NJS track bike

Heading

ID: mantra_starter:heading

Name Label Type Description
heading Heading Slot
heading_tag Heading tag Enum Default: "span"
Allowed values: span, h1, h2, h3, h4, h5, h6
heading_classes Heading classes Unknown ⚠️ {"type":"array"}

A heading rendered as h2

A heading rendered as h3, sized by its classes

A heading rendered as span

Hero

ID: mantra_starter:hero

Status: experimental

Name Label Type Description
background_image Background Image Slot
content Content Slot
caption Caption Slot
title Title String
url URL String

Built for the long way round

Frames, wheels and the parts that hold them together, chosen for roads that run out. See the bikes Klein Attitude, 1995

Workshop hours

Tuesday to Saturday, nine until six. Repairs booked in by Thursday go out the same week.

List

ID: mantra_starter:list

Content list.

Name Label Type Description
heading Heading Slot
items Items Slot
Opening hours
  • Monday to Friday, 9am to 5pm
  • Saturday, 10am to 4pm
  • Closed Sunday
  • one
  • two
  • three
  • one
  • two
  • three

List heading

ID: mantra_starter:list_header

Content list heading.

Name Label Type Description
heading Heading Slot
heading_size Heading size Enum Default: "normal"
Required
Allowed values: normal, large
heading_tag Heading tag Enum Default: "span"
Allowed values: span, h2, h3, h4, h5, h6

Hello

button
Hello
Hello

List items

ID: mantra_starter:list_items

Content list items.

Name Label Type Description
items Items Slot A list of renderables. An item that has children is instead a mapping of `value` and `below`, where `below` is a list of items of either shape -- it renders as a list of the same type inside the item's `li`. In a story such a mapping needs a `'#cache': {}` beside those keys to keep them.
list_type List type Enum Default: "ul"
Allowed values: ol, ul
line_height Line height Enum Default: 1
Allowed values: 1, 2, 3
list_title List title String
column_width Column width String Default: "auto"
column_count Column count Enum Default: "auto"
Allowed values: auto, 2, 3, 4, 6, 8
  • Frame and forks
  • Wheels and tyres
  • Drivetrain
  • Brakes and cables
  • Bars, stem and seatpost
  • Saddle
  • Pedals
  • Bags and racks
  • one
  • two
  • three
  • one
    • one a
    • one b
      • one b i
      • one b ii
    • one c
  • two
  • three
    • three a
    • three b
  • A link inside an item
  • Markup an item may carry: strong, emphasis, code
  • A component-styled span
  • A plain string, for comparison
  • one
  • two
  • three
  • one
  • two
  • three
  • four
  • five
  • six
  • seven
  • eight
  • nine
  • ten
  • eleven
  • twelve
  • thirteen
  • fourteen
  • fifteen
  • sixteen
  • seventeen
  • eighteen
  • nineteen
  • twenty
  1. one
  2. two
  3. three
  • A frame built for touring carries its load low and behind the rider, which keeps the steering predictable when the bags are full.
  • Gearing matters more than weight on a long climb, and a wide-range cassette costs less than the grams a lighter wheelset saves.
  • Mudguards are the least glamorous upgrade and the one most likely to be thanked for by whoever is riding behind.
  • Frame
    • Steel
    • Aluminium
    • Titanium
  • Wheels
    • Rims
    • Hubs
    • Spokes
  • Drivetrain
    • Chainset
    • Cassette
    • Chain
  • Brakes
    • Rim
    • Disc
  • Saddle
  • Pedals
  • one
  • two
  • three
  1. one
    1. one a
    2. one b
  2. two
  3. three
    1. three a
      1. three a i
  • one
  • two
  • three

Menu

ID: mantra_starter:menu

A menu list. Rendered for every Drupal menu through the theme's menu.html.twig override, and callable directly from another component.

Status: experimental

Name Label Type Description
menu_name Menu name String
menu_level Menu level Number Nesting depth. The root list is 0 and only it takes attributes.
items Items Unknown ⚠️ {"type":"object"}
direction Direction Enum Which way the menu runs. `horizontal` is the default and lays the items out in a row that wraps, as a menu bar; `vertical` stacks them. It applies to every list in the menu, so a sub menu left in flow runs the same way its parent list does -- a sub menu that is drawn over the page stacks either way, being a panel rather than a continuation of the list it came from.
Default: "horizontal"
Allowed values: horizontal, vertical
submenu_style Submenu style Enum How a sub menu is disclosed. `indented` is the default and renders sub menus open and inline, so the menu needs no JavaScript to be usable. `collapsible` and `flyout` both give an item with children an expand button and keep its sub menu hidden until it is opened; `collapsible` then opens it inline, in flow, while `flyout` opens it over the page, positioned by Floating UI in menu.js.
Default: "indented"
Allowed values: indented, collapsible, flyout

Page

ID: mantra_starter:page

Name Label Type Description
page Page Slot

Built for the long way round

Frames, wheels and the parts that hold them together, chosen for roads that run out. See the bikes Klein Attitude, 1995

Bikes

The content region, between the two asides.

Kona xBike

Page header

ID: mantra_starter:page_header

Name Label Type Description
page Page Slot

Pager

ID: mantra_starter:pager

Views pager.

Status: experimental

Name Label Type Description
heading_id Heading id String
first First Unknown ⚠️ {"type":"array"}
last Last Unknown ⚠️ {"type":"array"}
items Items Unknown ⚠️ {"type":"object"}

Primary Nav

ID: mantra_starter:primary_nav

Name Label Type Description
content Content Slot
items Menu items Links
collapsible Collapsible Enum Menu items are not collapsible if this prop is missing or empty.
Allowed values: open, closed

Primary nav content

ID: mantra_starter:primary_nav_content

Name Label Type Description
Frames, wheels and the parts that hold them together.

Responsive menu

ID: mantra_starter:responsive_menu

Status: experimental

Name Label Type Description
primary_menu Primary menu Slot
secondary_menu Secondary menu Slot

Responsive menu toggle

ID: mantra_starter:responsive_menu_toggle

Status: experimental

Name Label Type Description

Screenshot

ID: mantra_starter:screenshot

Status: stable

Name Label Type Description
image Image Slot
A screenshot of the Olivero theme

Search Box

ID: mantra_starter:search_box

Status: experimental

Name Label Type Description
label Label String
url Url String
key Key String

Swiper

ID: mantra_starter:swiper

Status: experimental

Name Label Type Description
items Items Slot
label Label String
Kona gravel bike
Klein Attitude bicycle
Panasonic NJS track bike

Swiper slide

ID: mantra_starter:swiper_slide

Status: experimental

Name Label Type Description
content Content Slot
label Label String
Kona gravel bike

Table

ID: mantra_starter:table

A table that carries the theme's column width roles. A role is declared once, on the column, and the component puts it on the header cell and on every body cell in that column -- which is the part that is tedious by hand and easy to get wrong, because auto layout sizes a column from the widest content in it, so a role on the header alone leaves a long body cell free to widen the column anyway. The table is wrapped in the scroll container, so it keeps its natural width and scrolls sideways rather than having its columns crushed.

Status: experimental

Name Label Type Description
caption Caption String Names the table to a screen reader without needing a heading.
sticky Sticky header Boolean Holds the header at the top of the screen while the page scrolls past the table, and lets it go again at the last row. The table keeps its natural height and the page keeps its own scrollbar: the header is moved down the table by a script rather than stuck to a scroll box, so nothing about the table's layout changes when this is on.
empty Empty text String Shown as a single row when there are no rows.
columns Columns Links One entry per column, in order. `header` is the heading, `role` is the width role applied to the whole column.
rows Rows Unknown ⚠️ {"type":"array"}
Components, with the columns a narrow screen can do without
Component Machine name Summary Status Stories Operations
Card card An image, a heading and a short run of text, linked as a whole. Experimental 2 Edit
Hero hero The first thing on a page: a heading, a paragraph and at most one call to action. Experimental 2 Edit
Primary navigation primary_nav The menu of the site, which collapses into a toggle below the breakpoint. Stable 3 Edit
Table table A table whose columns carry the theme's width roles. Experimental 4 Edit
Components matching the filter
Component Status Operations
No components match the filter.
Every component in the theme
Component Machine name Status Stories
Branding branding Stable 1
Button button Stable 2
Buttons demo buttons_demo Stable 1
Card card Experimental 2
Card grid card_grid Experimental 2
Content w/ sidebar content_w_sidebar Stable 1
Field field Stable 1
Gallery gallery Experimental 1
Heading heading Stable 3
Hero hero Experimental 2
Link link Stable 4
List list Stable 1
Menu menu Experimental 2
Pager pager Experimental 2
Primary nav primary_nav Stable 3
Reference reference Stable 2
Screenshot screenshot Stable 1
Search box search_box Experimental 1
Swiper swiper Experimental 1
Table table Experimental 3
Tabs tabs Experimental 2
Tag tag Stable 1
Components, with a role on every column
Component Summary Operations
☐ Card An image, a heading and a short run of text, linked as a whole. Edit
☐ Hero The first thing on a page: a heading, a paragraph and at most one call to action. Edit
☐ Primary navigation The menu of the site, which collapses into a toggle below the breakpoint. Edit

Tabs

ID: mantra_starter:tabs

Status: experimental

Name Label Type Description
items Items Slot
Tab 1#tab-1Tab 2#tab-2Tab 3#tab-3

Tag

ID: mantra_starter:tag

Status: stable

Name Label Type Description
label Label Slot
tag Tag String
Drupal

Teaser

ID: mantra_starter:reference

Internal label and resource link.

Name Label Type Description
internal_label Internal label String
internal_url Internal URL String
reference_url Reference URL String
published Published Boolean
UnoCSS typography preset https://unocss.dev/presets/typography
Draft: single directory components https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components

Available components

Form

Other