Brand and content

MediaGrid

Responsive one- or two-column list for image, video, and audio media.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { MediaGrid } from "@cofob/design-system-react";

/**
 * Complete MediaGrid parameter reference.
 * @param as
 *   type: element name (adapter-specific union)
 *   default: "ul"
 *   example: "article"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param container attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function MediaGridExample() {
  return (
    <MediaGrid>{mediaItems}</MediaGrid>
  );
}

Svelte

<script lang="ts">
  import { MediaGrid } from "@cofob/design-system-svelte";

  // Complete MediaGrid parameter reference.
  // as
  //   type: element name (adapter-specific union)
  //   default: "ul"
  //   example: "article"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // container attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<MediaGrid>{mediaItems}</MediaGrid>

HTML

<!--
  Complete MediaGrid parameter reference.
  as
    type: element name (adapter-specific union)
    default: "ul"
    example: "article"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  container attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<ul class="cf-media-grid"><li><img src="image.jpg" alt="Description" /></li></ul>

Contract

CSS selector	`.cf-media-grid`
Adapters	Native · React · Svelte
Primary props	as · children · container attributes
Documented states	one item · two columns · image/video/audio
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`as`	`element name (adapter-specific union)`	`"ul"`	React · Svelte · HTML	`"article"`	Chooses the rendered semantic element.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`container attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.