Skip to content

Built-in Hyvä CMS Components

Hyvä CMS ships with a base component library that gives merchants useful building blocks immediately after installation. Developers can use these components as reference implementations, override their templates, or disable and replace them with project-specific components.

The base components are intentionally generic. For production projects, treat them as a starting point for your design system rather than a fixed page builder library.

Layout Components

Component What it is useful for
Grid / Columns Responsive multi-column layouts such as text-and-image sections, feature grids, and product highlights. Column counts and gaps can be set per breakpoint, or applied in one click from built-in layout presets.
Group / Row Section-level wrappers that control content width. Use rows to mix full-width and contained sections on the same page.
Slider A horizontal slide container for child components, with optional navigation arrows and pagination.
Marquee An auto-scrolling horizontal band for image children, often used for logo strips, partner lists, or promotional tickers.

Content And Element Components

Component What it is useful for
Text Rich body copy, descriptions, lists, and inline links.
Heading Semantic headings from H1 to H6 for page and section structure.
Spacer Responsive vertical spacing and optional divider lines between sections.
Link Button Calls to action linked to CMS pages, categories, products, custom URLs, or other Magento entities.
HTML Code Custom HTML snippets, embeds, or third-party markup. Use carefully because invalid markup can affect the page layout.
Accordion FAQ and disclosure lists using accessible native details elements.
Accordion Item A single expandable item used inside Accordion.

Media And Marketing Components

Component What it is useful for
Image Static images with optional mobile and desktop variants, loading strategy, link target, and alt text.
Media Embed YouTube and Vimeo embeds from share URLs, with poster image, aspect ratio, and deferred loading options.
Card A title, text, optional image, and CTA in a reusable card layout.
Banner Hero or promotional sections with title, subtitle, image, overlay options, and CTA support.
Testimonial Customer quotes with author image, name, and title.
USP List A list container for selling points, feature highlights, or service benefits.
USP A single selling point item used inside USP List.

Navigation And Magento Content

Component What it is useful for
Menu List Footer links, sidebar navigation, or custom link groups.
Menu List Item A single link used inside Menu List.
CMS Block Embeds an existing Magento CMS block by identifier.
Product Slider Displays products from SKUs or categories. Product selection by SKU takes priority when both SKUs and categories are set.
Widget Embeds Magento widgets, including widgets not covered by the CMS Block component.

Developer Notes

The source declarations live in Hyva_CmsBase::etc/hyva_cms/components.json, with shared field groups in files such as default_design.json, default_design_typography.json, and default_advanced.json.

Several base components demonstrate newer field types:

  • Media Embed uses the url field type.
  • Product Slider uses catalog category selectors.
  • Widget uses the widget field type.
  • Components with translatable text fields opt in with "translate": true.
  • Menu List uses a context flag so it can be recognized in menu editing contexts.
  • Image, Banner, Card, Testimonial, and USP include a loading strategy with a high fetch-priority option that outputs loading="eager" and fetchpriority="high". Use it sparingly, for above-the-fold media only.

To inspect available components in an installed project, run:

bin/magento hyva:cms:describe-components

Use the base library as a reference when designing custom components. Merchants get the best experience when components expose clear content and design options instead of requiring manual CSS classes or custom HTML.