Components

Available components

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

Menu tree

ID: menu_tree:menu-tree

Status: stable

Name	Label	Type	Description
`menus`	Menus	Unknown	⚠️ {"items":{"type":"object"},"type":"array"}
`exclude`	Exclude	String	ID of a menu item to not make selectable. Default: "" Required
`selected`	Selected	String	ID of a menu item to be selected. Default: ""
`expand_collapse_state`	Expand/collapse button state	Enum	The initial CSS class of the collapse/expand button. Default: "expand" Allowed values: expand, collapse

Branding

ID: mantra_starter:branding

Site name, logo, slogan.

Name	Label	Type
`site_name`	Site name	String
`site_logo`	Site logo	String
`site_slogan`	Site slogan	String

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 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

Panasonic NJS Track Bike

Fixed gear | $1600

Code Sample Bare

ID: code_sample:code_sample_bare

Status: experimental

Name	Label	Type
`html`	HTML	Slot
`css`	CSS	Slot
`js`	JS	Slot

HTML

Code Sample Display

ID: code_sample:code_sample_display

Status: experimental

Name	Label	Type	Description
`url`	Url	String
`title`	Title	String

Raw HTML Bare Page Bare page

iFrame

Bare

Code Sample HTML

ID: code_sample:code_sample_html

Status: experimental

Name	Label	Type
`title`	Title	String
`html`	HTML	String
`css`	CSS	String
`js`	JS	String

Code Sample iframe

ID: code_sample:code_sample_iframe

Status: experimental

Name	Label	Type	Description
`id`	ID	String
`title`	Title	String

Code Sample Raw HTML

ID: code_sample:code_sample_raw_html

Status: experimental

Name	Label	Type
`title`	Title	String
`html`	HTML	String
`css`	CSS	String
`js`	JS	String

Content w/ sidebar

ID: mantra_starter:content_w_sidebar

Name	Label	Type	Description
`content`	Content	Slot
`sidebar`	Sidebar	Slot

Content

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

Images

Hero

ID: mantra_starter:hero

Status: experimental

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

Background Image

Content Caption

Link

ID: mantra_starter:link

Link examples.

Name	Label	Type	Description
`text`	Text	String
`url`	Url	String
`display`	Display	Enum	Allowed values: link, hover, focus, active, visited

hover: hello

visited: hello

active: hello

link: hello

List

ID: mantra_starter:list

Content list.

Name	Label	Type	Description
`header`	Header	Slot
`items`	Items	Slot

Hello

one
two
three

List header

ID: mantra_starter:list_header

Content list header.

Name	Label	Type	Description
`text`	Text	String
`header_size`	Header size	Enum	Default: "normal" Required Allowed values: normal, large

Hello

List items

ID: mantra_starter:list_items

Content list items.

Name	Label	Type	Description
`items`	Items	List
`list_type`	List type	Enum	Default: "ul" Required 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

one
two
three

Hello

one
two
three

Hello

one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
nineteen
twenty

one
two
three

one
two
three

one
two
three

Name	Label	Type	Description
`menu_name`	Menu name	String
`menu_level`	Menu level	Number
`items`	Items	Unknown	⚠️ {"type":"object"}

Menu link

ID: mantra_starter:menu_link

Status: experimental

Name	Label	Type	Description
`item`	item	Unknown	⚠️ {"type":"object"}
`menu_level`	menu_level	Number

Menu link 1

Menu Wrapper

ID: mantra_starter:menu_wrapper

Name	Label	Type	Description
`links`	Links	Slot

Links

Menu Wrapper Item

ID: mantra_starter:menu_wrapper_item

Name	Label	Type
`content`	Content	Slot
`submenu`	Sub menu	Slot
`link_title`	Link title	String
`link_url`	Link URL	String

Page

ID: mantra_starter:page

Name	Label	Type	Description
`page`	Page	Slot

Page footer

ID: mantra_starter:page_footer

Name	Label	Type	Description
`page`	Page	Slot

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 Starter

ID: mantra_starter:primary_nav_content

Name	Label	Type	Description

Primary Nav Starter

ID: mantra_starter:primary_nav_links

Name	Label	Type	Description

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

Image

Search Box

ID: mantra_starter:search_box

Status: experimental

Name	Label	Type
`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

Items

Swiper slide

ID: mantra_starter:swiper_slide

Status: experimental

Name	Label	Type	Description
`content`	Content	Slot
`label`	Label	String

Content

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
`tag`	Tag	String

Teaser

ID: mantra_starter:reference

Internal label and resource link.

Name	Label	Type
`internal_label`	Internal label	String
`internal_url`	Internal URL	String
`reference_url`	Reference URL	String
`published`	Published	Boolean

Components

Available components

Form

Navigation

Other