Projects16

1.1.0

Editorial four-image gallery with a medium-weight heading, a two-column staggered 4:3 and 4:5 photo grid, optional captions with text-link destinations, and a link action beneath a short paragraph. Extra images are not rendered.

npx jabkit add projects16

Component Data

ID: projects16
Category: marketing
Version: 1.1.0
Added: 2026-09-05
Type: block
Keyboard nav: Yes
Reduced motion: Yes

projectsgallerymarketingportfoliophotographyeditoriallanding

Dependencies

clsx
tailwind-merge

Examples

Default

<div className="bg-background text-foreground">
      <Projects16
        title={projects16Mocks.title}
        description={projects16Mocks.description}
        action={projects16Mocks.action}
        images={projects16Mocks.images}
      />
    </div>

Variants

<div className="bg-background text-foreground">
      <Projects16
        title={projects16AlternateMocks.title}
        description={projects16AlternateMocks.description}
        action={projects16AlternateMocks.action}
        images={projects16AlternateMocks.images}
      />
    </div>

Linked

<div className="bg-background text-foreground">
      <Projects16
        title={projects16LinkedMocks.title}
        description={projects16LinkedMocks.description}
        action={projects16LinkedMocks.action}
        images={projects16LinkedMocks.images}
      />
    </div>