Thumbnail

A thumbnail is a square preview image, typically shown at the start or end of a list item.

IonThumbnail is a fixed-size square box; put an img in it.

Basic usage

On its own the thumbnail is 48px square in both modes, with square corners. The image fills the box. Use a square image: object-fit is not supported, so a non-square image is stretched to the box rather than cropped.

<IonThumbnail>
    <img src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
</IonThumbnail>

In an item

In an IonItem's Start or End slot the thumbnail grows to 56px and gets the item's media margins. The in-item size is the ThumbnailSize token of the Item theme.

<IonList>
    <IonItem>
        <Start>
            <IonThumbnail>
                <img src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </IonThumbnail>
        </Start>
        <ChildContent>
            <IonLabel>Thumbnail in the Start slot</IonLabel>
        </ChildContent>
    </IonItem>
    <IonItem>
        <ChildContent>
            <IonLabel>Thumbnail in the End slot</IonLabel>
        </ChildContent>
        <End>
            <IonThumbnail>
                <img src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
            </IonThumbnail>
        </End>
    </IonItem>
</IonList>

An IonSkeletonText inside a thumbnail fills it, for a loading placeholder.

API

Every component also accepts Class (extra CSS classes), Style (an inline Style object) and Id (the root element's id) — see Conventions.

IonThumbnail

Slot	Type	Description
ChildContent	RenderFragment?	Content placed between the component's tags.

Styling

Theme tokens

Theme token IonicTheme.Thumbnail (ThumbnailToken). Assign only the values you want to change — the rest keep the mode defaults below. App-wide: builder.AddIonic(o => o.Theme.Thumbnail = new ThumbnailToken { … }); for one subtree: a ConfigProvider. See Theming.

Token	Type	md	ios
Size	float	48	48

CSS classes

App stylesheet rules always win over Ionic's own rules (see Theming), so these classes can be targeted directly from GlobalStyles.cs.

Selector	Element
.ion-thumbnail	The thumbnail host: size and corner radius. Also carries the mode (md / ios).
.ion-thumbnail img	The image: fills the host.

// GlobalStyles.cs — rounded thumbnails app-wide
[".ion-thumbnail, .ion-thumbnail img"] = new()
{
    BorderRadius = new BorderRadius(8),
},