Media — uicraft

Image with Caption

Responsive image with figcaption, lazy loading, and rounded border.

html

A beautiful landscape photograph taken at sunset

<figure class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <img src="..." alt="..." class="uc-w-full uc-h-auto uc-object-cover" loading="lazy" />
  <figcaption class="uc-px-4 uc-py-3 uc-text-sm uc-text-fg-disabled uc-bg-neutrals-surface">
    Photo description
  </figcaption>
</figure>

Video

Native HTML5 video player with controls, wrapped in a 16:9 aspect ratio container.

html

HTML5 Video Player

<div class="uc-aspect-[16/9] uc-rounded-2xl uc-border uc-overflow-hidden">
  <video controls class="uc-w-full uc-h-full uc-object-cover">
    <source src="video.mp4" type="video/mp4" />
  </video>
</div>

YouTube Embed

Responsive YouTube embed with 16:9 aspect ratio. Uses iframe with proper allow attributes.

html

YouTube Embed

<div class="uc-aspect-[16/9] uc-rounded-2xl uc-border uc-overflow-hidden">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video title"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    class="uc-w-full uc-h-full uc-border-0"
  ></iframe>
</div>

Image Gallery

Grid-based image gallery with consistent aspect ratios and lazy loading.

html

<div class="uc-grid uc-grid-cols-2 uc-md:grid-cols-3 uc-gap-3">
  <figure class="uc-rounded-xl uc-border uc-overflow-hidden">
    <img src="..." alt="..." class="uc-w-full uc-aspect-square uc-object-cover" loading="lazy" />
  </figure>
  <!-- ...more items -->
</div>

Avatar Image

Circular image for profile pictures and avatars.

html

<img src="..." alt="..." class="uc-w-16 uc-h-16 uc-rounded-full uc-object-cover uc-border-2 uc-border-border-default" />

Background with Overlay

Image used as a background with a gradient overlay and text content on top.

html

Featured Article

A guide to building responsive media layouts

<div class="uc-relative uc-rounded-2xl uc-overflow-hidden uc-h-64">
  <img src="..." alt="" class="uc-absolute uc-inset-0 uc-w-full uc-h-full uc-object-cover" />
  <div class="uc-absolute uc-inset-0 uc-bg-gradient-to-t uc-from-constant-black/80 uc-to-transparent"></div>
  <div class="uc-absolute uc-bottom-0 uc-p-6 uc-text-constant-white">
    <h3 class="uc-text-lg uc-font-bold">Card Title</h3>
    <p class="uc-text-sm uc-opacity-80">Description text</p>
  </div>
</div>