Documentation

Components

Single Directory Components

Maya ships three components in components/. Use them from any template:

{{ include('maya:tile', {
  heading: 'Get a permit',
  url: '/permits',
  description: 'Help keep our buildings safe.',
  variant: 'card',
}, with_context = false) }}

maya:tile

Prop	Type	Notes
`heading`	string	Required.
`url`	string	Required.
`description`	string
`variant`	`link`, `card`, `quick`	`link`: heading and arrow with a rule below. `card`: bordered box. `quick`: arrow in a circle before a slab heading.

maya:spotlight

Prop or slot	Type	Notes
`heading`	string
`button_text`, `button_url`	string	The button shows when both are set.
`image_position`	`right`, `left`	Default `right`.
`color`	`blue`, `green`, `orange`, `black`	Default `blue`.
`image`	slot	Image or media.
`body`	slot	Text below the heading.

With only an image (no heading, body or button), the spotlight renders as a banner without its colored panel.

{% embed 'maya:spotlight' with { heading: 'Fleet Week', button_text: 'Find out more', button_url: '/fleet-week' } %}
  {% block image %}{{ content.field_image }}{% endblock %}
  {% block body %}{{ content.body }}{% endblock %}
{% endembed %}

maya:band

Prop or slot	Type	Notes
`heading`	string
`background`	`auto`, `white`, `neutral`, `primary`, `secondary`	`auto` alternates inside `.maya-zebra`.
`content`	slot

CSS classes

For custom blocks, Layout Builder and CKEditor styles:

Class	Use
`maya-container`	1076px page container with Maya's side margins.
`maya-grid`	6-column grid, 12 columns from 768px.
`maya-zebra`, `maya-band`	Full-width sections that alternate white and gray.
`btn`, `btn--secondary`, `btn--inverse`	Buttons.
`maya-spotlight`	Spotlight layout.
`maya-card`, `maya-card-grid`	Bordered boxes and their grid.
`maya-link-tile`, `maya-tile-list`	Link tiles and their list.
`maya-quick-link`, `maya-quick-links`	Quick links and their grid.
`maya-tile`	Content teaser: title, date and summary.
`maya-callout`	Highlighted note.
`maya-details`	Accordion on a `<details>` element.
`maya-text`	Rich text styles. Applied automatically to formatted text fields.
`maya-lead`	Large introductory paragraph.

Utilities

Tailwind utility classes use SF.gov's names: text-primary500, bg-neutral50, font-slab text-heading-xl lg:text-desktop-heading-xl. Tailwind only includes utilities it finds in the theme's templates, so a sub-theme that uses new utilities must build its own CSS. See Development.

Edit this page