Example Gallery

Template component

<loquix-example-gallery> shows what the assistant can do, as browsable example prompts. It suits an empty state or a help panel — somewhere a user is looking for ideas rather than picking from a library they already know.

loquix-example-gallerygrid, list, or carouselgrouped by category

Preview

Example prompts Live component

Usage

import '@loquix/core/define/define-example-gallery';

const gallery = document.querySelector('loquix-example-gallery');

gallery.items = examples;

gallery.addEventListener('loquix-gallery-select', (event) => {
  composer.value = event.detail.item.prompt;
});

The gallery item

Field	Type	Required	Description
id	string	yes	Identifier.
title	string	yes	Item title.
prompt	string	yes	The prompt text the item inserts.
description	string	no	Short explanation.
icon	string	no	Icon or emoji.
category	string	no	Group heading.
metadata	Record<string, unknown>	no	Anything extra your app needs.

The shape matches the template object, so the same data can feed both.

Variants

Variant	Layout
grid	Cards in columns. The default.
list	Stacked rows, better in a narrow panel.
carousel	One horizontal scrolling row.

columns applies to the grid variant only. Setting --loquix-gallery-columns from a stylesheet takes precedence over it, which is the practical way to drop to fewer columns in a media query.

Properties

Property	Attribute	Type	Default	Description
items	items	GalleryItem[]	[]	Items to display.
variant	variant	'grid' | 'list' | 'carousel'	'grid'	Display variant.
columns	columns	number	3	Grid column count.
categories	categories	string[]	[]	Explicit category order. Derived from the items when omitted.
heading	heading	string	''	Optional heading above the gallery.

Events

Event	Detail	Description
loquix-gallery-select	{ item }	Fired when an item is clicked.

CSS parts

Part	Purpose
item	An individual gallery item button.

CSS custom properties

Variable	Purpose
--loquix-gallery-gap	Gap between items.
--loquix-gallery-columns	Grid column count. Overrides the columns property.
--loquix-gallery-heading-font-size	Heading font size.
--loquix-gallery-item-padding	Item padding.
--loquix-gallery-item-border-color	Item border color.
--loquix-gallery-item-border-radius	Item border radius.
--loquix-gallery-item-bg	Item background.

For short prompt suggestions rather than browsable examples, Suggestion Chips is the lighter choice.