Components included in Hyvä UI
Hyvä UI is designed to be fully integrated with all Hyvä products and modules, with a focus on the Hyvä Default Theme.
Occasionally, certain features may be missing that we would like to include in the available UI components.
These may include missing AlpineJS plugins or alternative icon packs.
Additional requirements will be clearly listed in the UI Component documentation under the Requirements section.
Available Components
The following table lists the components available in Hyvä UI.
| Component | Variant | Description |
|---|---|---|
| Accordion | A-basic |
Collapsible sections for any content. |
| Ajax-ATC | A-simple |
Lightweight asynchronous add-to-cart flow. |
| Banner | A-single |
Hero banner with image, text and CTA. |
B-split |
Image/text split layout. | |
C-grid-2 |
Two-column grid banner. | |
D-grid-4 |
Four-column grid banner. | |
| Breadcrumbs | A-simple |
Semantic breadcrumb trail for navigation. |
| Buttons | A-basic |
Base button styles and modifiers. |
| Card | A-default |
Standard content/product card (image/title/meta/CTA). |
B-media |
Media-focused card, a.k.a. Media Object. | |
| Categories | A-grid-images |
Category grid with imagery. |
B-grid-patterns |
Decorative-pattern grid. | |
| Category-filter | A-standard |
Layered navigation with collapsible groups. |
B-elasticsuite |
ElasticSuite faceting integration. | |
| Cookie-notice | A-full-width |
Full-width site cookie notice. |
B-overlay |
Overlay modal style cookie prompt. | |
C-simple-elegant |
Minimal, elegant consent banner. | |
| Error-page | A-simple |
Minimal error/404 template. |
B-split |
Image plus message error layout. | |
| Footer | A-clean |
Basic footer layout. |
B-4-column-newsletter |
Footer with newsletter signup and 4 columns. | |
C-mega |
Mega footer with many links/sections. | |
| Gallery | A-basic |
Simple image gallery. |
B-fancy |
Enhanced gallery styles/transitions. | |
C-grid |
Grid-based gallery. | |
D-splide |
Carousel using Splide. | |
| Generic-content | A-text |
Typographic content blocks. |
B-visual |
Media-focused content blocks. | |
| Header | A-clean |
Clean header with primary nav. |
B-compact |
Condensed header for compact layouts. | |
C-stacked |
Multi-row stacked header. | |
| Loaders | A-spinner |
Classic spinner loader. |
B-ping |
Subtle pulse/ping loader. | |
| Menu | A-simple-static-links |
Basic link list menu. |
B-4-column-megamenu |
Multi-column mega menu. | |
C-vertical-dropdown-4-column |
Vertical dropdown with columns. | |
D-shop-dropdown |
Shop/category-focused dropdown. | |
| Menu-mobile | A-scroll |
Scrollable off-canvas mobile menu. |
B-tabs |
Tabbed sections for mobile navigation. | |
| Minicart | A-classic |
Panel-style mini cart. |
B-popover |
Lightweight popover mini cart. | |
| Modal | A-simple |
Accessible dialog with focus trap. |
| Notification | A-simple |
Inline toast notifications. |
B-full-width |
Site-level full-width banners. | |
| Order-confirmation | A-clear |
Clean order confirmation layout. |
| Pagination | A-clean |
Accessible pagination controls. |
| Popup | A-newsletter-image |
Newsletter popup with image. |
B-newsletter-title |
Title-first newsletter popup. | |
| Product-card | A-card-with-swatches |
Product card with integrated swatches. |
| Product-data | A-specs |
Specification tables and lists. |
B-accorditabs |
Hybrid accordion + tabs for details. | |
C-highlights |
Feature/highlight callouts. | |
| Product-reviews | A-basic |
Full reviews list and summary. |
B-minimal |
Condensed review summary. | |
| Scroll-to-top | A-simple |
Minimal back-to-top button. |
B-action |
More prominent CTA-style back-to-top. | |
| Search-form | A-header |
Header-optimized search input and markup. |
| Shortcuts | A-simple |
Quick-link grid / action tiles. |
| Slider | A-basic |
Standard carousel/slider. |
B-marquee |
Autoplaying and Continuous Marquee slider. | |
C-product |
Product-focused carousel. | |
| Sticky-ATC | A-simple |
Sticky add-to-cart bar for product pages. |
| Swatches | A-swatches-rounded |
Rounded visual swatch tokens. |
| Testimonial | A-simple |
Single testimonial block. |
B-card |
Card-styled testimonial layout. | |
| USP | A-icons |
Icon-based USP list. |
B-cards |
Card-styled USP blocks. | |
C-compact |
Compact USP variant. |
For more details, please refer to each component's README.md file.
For a visual reference, refer to the PDF and Figma files.
UI Figma Assets
The Hyvä UI Figma file includes all assets used in the code,
making it easy to customize and adapt the design to suit your project.
You can modify the assets directly in Figma to match your specific needs.
For example, if your design requires different payment icons, you can easily replace them with alternatives that better fit your brand or design.
As of Hyvä UI version 2.5.0, we have added the Hyvä Payment Icons to the Figma file, so they are available as assets, too.