Showcase: Image Component & Variations - CoreSite

Image Component & Interactions Showcase

A flexible image component with borders, corner radii, hover animations, and configuration inheritance.

Configuration cascade in effect:

Site default (config/config.php): components.image.borderRadius = 'var(--radius-md)'.
Page default (config/page_level/showcase-images.config.php): components.image.hoverScale = 1.04 and components.image.hoverTranslateY = '-4px'.
Instance overrides: Every prop can be selectively overridden per image instance.

All hover interactions also trigger on :focus-visible / :focus-within for keyboard accessibility, and respect prefers-reduced-motion.

1. Inheriting Page-Level Defaults

These images define only src and alt. They automatically inherit the page default radius (var(--radius-md)), hover scale (1.04), and lift (-4px).

Sample illustration one inheriting defaults

Inherited: Radius md + hover scale 1.04 + translateY -4px

Sample illustration two inheriting defaults

Inherited: Radius md + hover scale 1.04 + translateY -4px

2. Borders & Corner Radii

Explore token-based radii (none, sm, md, lg, full, circle) alongside solid and dashed borders.

Sharp image without border radius

borderRadius => 'none'

Subtle corner radius image

borderRadius => 'sm' + subtle border

Large corner radius image

borderRadius => 'lg' + primary border

Circular portrait image

borderRadius => 'circle' + dashed accent

3. Hover & Focus Interactions

Hover over or focus each item below to experience distinct interaction feedback.

Elevation lift on hover

Elevation Lift: hoverTranslateY => '-8px' + hoverShadow => 'xl'

Scale expansion on hover

Scale Zoom: hoverScale => 1.1

Opacity transition on hover

Soft Opacity: hoverOpacity => 0.75

Border colour and outline ring transition on hover

Border & Outline: hoverBorderColor + hoverOutline

Inner container zoom effect

Inner Zoom (Clipped): zoomInner => true + hoverScale => 1.18

Playful rotation tilt on hover

Playful Tilt: hoverRotate => '3deg' + hoverTranslateY => '-6px'

4. Aspect Ratios & Object Fit

Preset responsive ratios ensure clean alignment without layout shifts.

16 by 9 widescreen aspect ratio

aspectRatio => '16/9' (Widescreen)

4 by 3 standard aspect ratio

aspectRatio => '4/3' (Standard)

1 by 1 square aspect ratio

aspectRatio => '1/1' (Square)

aspectRatio => '21/9' (Cinematic banner)

5. Captioned Figures & Interactive Links

Render semantic <figure> with <figcaption> or wrap images in accessible anchor links.

Architectural diagram figure with caption — Figure 1.1: Vector illustration rendered inside a semantic <figure> element.

Clickable Link: Wraps the image in an <a> tag with full keyboard focus support.