Skip to main content
Media blocks display visual assets — partner logos, photography grids, and video embeds — as standalone page sections. They are grouped into four sub-categories by asset type.

​
Sub-categories at a glance

Sub-categorySanity _type valuesCount
Logo cloudslogos-1, logos-2, logos-33
Image gridsimages-1, images-22
Single videovideo-1, video-2, video-33
Video gridsvideos-1, videos-2, videos-3, videos-44

​
Logo cloud blocks

Logo cloud blocks display a grid of partner or sponsor logos with optional labels and links. They are the template-block equivalent of the custom Logo Cloud block.

logos-1

Simple logo grid with optional text label beneath each logo and a small section heading above.

logos-2

Horizontally scrolling logo strip — suited for “as seen in” or sponsor strips.

logos-3

Two-row logo grid with more prominent sizing, suited for featured partner showcases.

​
Logo block props

logos-1.astro is the canonical reference: 
// astro-app/src/components/blocks/logos-1.astro
interface Props {
  class?: string
  id?: string
  logos?: {
    src: string
    alt: string
    text?: string
    href?: string
  }[]
}
​
logos
object[]
Array of logo objects. Each item requires:
  • src — image URL or path
  • alt — descriptive alt text (required for accessibility)
  • text — optional visible label rendered below the logo image
  • href — optional link wrapping the entire logo tile
Section heading is passed through <slot />.

​
Storybook story

// astro-app/src/components/blocks/logos-1.stories.ts
export const Default = {
  args: {
    logos: [
      { src: "https://placehold.co/120x40", alt: "Company A", text: "Company A", href: "#" },
      { src: "https://placehold.co/120x40", alt: "Company B", text: "Company B", href: "#" },
      { src: "https://placehold.co/120x40", alt: "Company C", text: "Company C", href: "#" },
      { src: "https://placehold.co/120x40", alt: "Company D", text: "Company D", href: "#" }
    ]
  }
}

​
Installation

npx shadcn@latest add @fulldev/logos-1
npx shadcn@latest add @fulldev/logos-2
npx shadcn@latest add @fulldev/logos-3

​
Image grid blocks

Image grid blocks display a collection of images as a hover-interactive mosaic.

images-1

Two-column image grid with hover overlay showing the tile title.

images-2

Masonry-style image grid with varying row heights.

​
Image block props

images-1.astro is the canonical reference: 
// astro-app/src/components/blocks/images-1.astro
interface Props {
  class?: string
  id?: string
  links?: {
    icon?: string
    text?: string
    href?: string
    target?: string
  }[]
  items?: {
    href?: string
    title?: string
    image?: {
      src: string
      alt: string
    }
  }[]
}
​
links
object[]
Section-level CTA buttons rendered above the image grid. First item uses default variant, remaining use outline.
​
items
object[]
Array of image tiles. Each item accepts:
  • image.src — image URL or path
  • image.alt — descriptive alt text
  • title — text revealed on hover in an overlay
  • href — makes the tile a link
Hover behavior uses a CSS opacity transition — no JavaScript required. The overlay text (TileTitle) fades in at group-hover/tile:opacity-100.

​
Installation

npx shadcn@latest add @fulldev/images-1
npx shadcn@latest add @fulldev/images-2

​
Single-video blocks

Single-video blocks pair a large video player with prose content, a feature checklist, and social proof.

video-1

Split layout: prose + checklist + avatar/rating social proof on the left, video player on the right.

video-2

Centered layout: headline above a full-width video player.

video-3

Split layout with the video on the left and prose on the right.

​
Single-video props

video-1.astro is the canonical reference: 
// astro-app/src/components/blocks/video-1.astro
interface Props {
  class?: string
  id?: string
  list?: string[]
  links?: {
    icon?: string
    text?: string
    href?: string
    target?: string
  }[]
  video?: string
  item?: {
    avatars?: {
      src: string
      alt: string
      title?: string
    }[]
    rating?: number
    description?: string
  }
}
​
video
string
Video embed URL (e.g. a YouTube embed URL like https://www.youtube.com/embed/...) passed directly to the fulldev/ui <Video> primitive.
​
list
string[]
Feature checklist strings rendered with check icons, identical to the content-* block pattern.
​
links
object[]
CTA buttons below the prose. First item uses default variant, remaining use outline.
​
item
object
Social proof composite: avatars array (each with src, alt, optional title), a numeric rating, and a description trust string. Rendered as a stacked avatar group with a star rating beneath.

​
Installation

npx shadcn@latest add @fulldev/video-1
npx shadcn@latest add @fulldev/video-2
npx shadcn@latest add @fulldev/video-3

​
Video grid blocks

Video grid blocks display multiple video tiles in a responsive grid, similar to the image grid blocks but with embedded video players.

videos-1

Three-column video tile grid with section heading and CTA buttons above.

videos-2

Two-column large video tile grid.

videos-3

Single-column stacked video tiles with titles.

videos-4

Four-column compact video grid.

​
Video grid props

videos-1.astro is the canonical reference: 
// astro-app/src/components/blocks/videos-1.astro
interface Props {
  class?: string
  id?: string
  links?: {
    icon?: string
    text?: string
    href?: string
    target?: string
  }[]
  items?: {
    href?: string
    title?: string
    video?: string
  }[]
}
​
links
object[]
Section-level CTA buttons rendered above the video grid.
​
items
object[]
Array of video tile objects. Each tile accepts:
  • video — embed URL string passed to the <Video> primitive
  • title — tile title rendered in TileContent below the player
  • href — optional link wrapping the tile

​
Storybook story

// astro-app/src/components/blocks/videos-1.stories.ts
export const Default = {
  args: {
    links: [
      { text: "Get Started", href: "#" },
      { text: "Learn More", href: "#" }
    ],
    items: [
      { title: "Introduction", video: "https://www.youtube.com/embed/dQw4w9WgXcQ", href: "#" },
      { title: "Getting Started", video: "https://www.youtube.com/embed/dQw4w9WgXcQ", href: "#" },
      { title: "Advanced Usage", video: "https://www.youtube.com/embed/dQw4w9WgXcQ", href: "#" }
    ]
  }
}

​
Installation

npx shadcn@latest add @fulldev/videos-1
npx shadcn@latest add @fulldev/videos-2
npx shadcn@latest add @fulldev/videos-3
npx shadcn@latest add @fulldev/videos-4
The <Video> primitive embeds the URL in an <iframe>. For YouTube or Vimeo, use the embed URL format (/embed/VIDEO_ID), not the watch URL. Using the watch URL will be blocked by the platform’s iframe policy.

Build docs developers (and LLMs) love

Get started for freeTalk to us