Image List

Loading...

<flint-image-list-item-bar>

A title/subtitle bar for flint-image-list-item.

• Tag: <flint-image-list-item-bar>
• Class: FlintImageListItemBar

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintImageListItemBar } from '@getufy/flint-ui';

Usage

<flint-image-list-item-bar></flint-image-list-item-bar>

Properties

Property	Attribute	Type	Default	Description
position	position	'bottom' | 'top' | 'below'	'bottom'	Position hint for styling: 'bottom' (default overlay), 'top' (overlay), or 'below' (solid)

Slots

Name	Description
title	Title text.
subtitle	Subtitle text.
(default)	Action content.

CSS Parts

Name	Description
action	The action element.
base	The component's base wrapper element.
content	The content container.
subtitle	The subtitle element.
title	The title element.

CSS Custom Properties

Property	Default
--flint-image-bar-overlay-text	var(--flint-text-color-on-primary
--flint-font-family	—
--flint-surface-1	—
--flint-text-color	—
--flint-border-color	—
--flint-image-fit	cover

---

<flint-image-list-item>

A single item inside a flint-image-list.

• Tag: <flint-image-list-item>
• Class: FlintImageListItem

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintImageListItem } from '@getufy/flint-ui';

Usage

<flint-image-list-item></flint-image-list-item>

Properties

Property	Attribute	Type	Default	Description
rows	rows	number	1	How many grid rows this item spans (quilted/woven only)
cols	cols	number	1	How many grid columns this item spans (quilted/woven only)
barPosition	bar-position	'overlay' | 'below'	'overlay'	Position of the title bar: 'overlay' (default) or 'below'
weave	weave	'odd' | 'even'	'odd'	Woven variant: 'odd' or 'even' identity for alternating height
aspectRatio	aspect-ratio	string	'auto'	CSS aspect-ratio for the cell (e.g. "1/1", "4/3", "3/4", "16/9", "9/16").
fit	fit	ImageFit	'cover'	How the image fills the cell: 'cover' (default, crops to fill)

Slots

Name	Description
(default)	Place an <img> or any content here.
bar	Place a flint-image-list-item-bar element here.

CSS Parts

Name	Description
base	The component's base wrapper element.

---

<flint-image-list>

A container that displays images in an organized grid layout. Supports standard, quilted, woven, and masonry variants.

• Tag: <flint-image-list>
• Class: FlintImageList

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintImageList } from '@getufy/flint-ui';

Usage

<flint-image-list></flint-image-list>

Properties

Property	Attribute	Type	Default	Description
variant	variant	ImageListVariant	'standard'	Layout variant
cols	cols	number	3	Number of columns
gap	gap	number	4	Gap between items (in px)
rowHeight	rowHeight	number	164	Row height for non-masonry variants (in px). Ignored when autoRows=true.
autoRows	autoRows	boolean	false	When true, row height is automatic (use with bar-position="below")

Slots

Name	Description
(default)	Place flint-image-list-item elements here.

CSS Parts

Name	Description
base	The component's base wrapper element.

CSS Custom Properties

Property	Default
--flint-image-list-gap	4px
--flint-image-list-row-height	164px

---