Card

Containers for displaying content and actions about a single subject.

Default Card

Style: flat, Elevation: none

Installation

pnpm dlx shadcn@latest add https://blok-staging.vercel.app/r/card.json

Usage

Examples

The following are examples of our card components.

Elevation

none Elevation

Style: outline, Elevation: none

xs Elevation

Style: outline, Elevation: xs

sm Elevation

Style: outline, Elevation: sm

base Elevation

Style: outline, Elevation: base

md Elevation

Style: outline, Elevation: md

lg Elevation

Style: outline, Elevation: lg

Style

flat Style

outline Style

filled Style

Padding

Padding: sm

Padding: md

Padding: lg

Styled Card

Briefs tracker

View all briefs

New

Social Media Expansion Plan for Next Q...

Social Media Engagement Strategy for...

Comprehensive Social Media Strategy...

Audio Innovation Strategy Framework

In progress

Q2 Social Media Growth Strategy

Creative Social Media Content Strategy

Engagement and Outreach Plan

Social Media Performance Enhancemen...

Approved

Social Media Brand Awareness Initiative

Target Audience Engagement Strategy...

Social Media Analytics and Insights Plan

Social Media Growth and Development...

Large & Compact (Padding / Sans padding)

Version large

Padding

Sans padding

Version compact

Padding

Sans padding

Vertical Detail Card

With padding between card and image

JPG

Lorem ipsum dolor sit amet consectetur. Morbi...

en-US

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Lorem ipsum dolor sit amet consectetur. Morbi...

en-US

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

PDF

Lorem ipsum dolor sit amet consectetur. Morbi...

en-US

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Sans padding (image to edge)

JPG

Lorem ipsum dolor sit amet consectetur. Morbi...

en-US

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Lorem ipsum dolor sit amet consectetur. Morbi...

en-US

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

PDF

Lorem ipsum dolor sit amet consectetur. Morbi...

en-US

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Vertical Medium Card

With padding between card and image

JPG

Lorem ipsum dolor site amet consectetur. Morbi...

PDF

Lorem ipsum dolor site amet consectetur. Morbi...

Sans padding (image to edge)

JPG

Lorem ipsum dolor site amet consectetur. Morbi...

PDF

Lorem ipsum dolor site amet consectetur. Morbi...

Vertical Small Card

With padding between card and image

Lorem ipsum

Sans padding (image to edge)

Lorem ipsum

Horizontal Detail Card

With padding (thumbnail)

Lorem ipsum dolor sit amet consectetur. Morbi nunc sem...

en-US

JPEG

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and so many other thi...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Lorem ipsum dolor sit amet consectetur. Morbi nunc sem...

en-US

JPEG

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and so many other thi...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Lorem ipsum dolor sit amet consectetur. Morbi nunc sem...

en-US

PDF

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and so many other thi...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Sans padding (full-height media)

Lorem ipsum dolor sit amet consectetur. Morbi nunc sem...

en-US

JPEG

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and so many other thi...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Lorem ipsum dolor sit amet consectetur. Morbi nunc sem...

en-US

JPEG

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and so many other thi...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Lorem ipsum dolor sit amet consectetur. Morbi nunc sem...

en-US

PDF

Explore luxurious escapes worldwide with our elite collection of hotels & resorts and so many other thi...

ReleaseCollectionCollectionCollectionCollectionCollectionCollection+2

By Sitecore

Horizontal Normal Card

With padding (thumbnail)

Lorem ipsum dolor sit amet consectetur. Morbi nunc semper lacus in ullam...

Sans padding

Lorem ipsum dolor sit amet consectetur. Morbi nunc semper lacus in ullam...

Horizontal Small Card

With padding (thumbnail)

Lorem ipsum dolor

Sans padding

Lorem ipsum dolor