Card

Tailwind CSS and Alpine JS Card

Cards are a great way to display information in a visually appealing format. They can be used to display images, text, and more.

Make sure you have the fonts

This component uses fonts that might not be available by default. All the fonts used in Penguin UI are sourced from Google Fonts. Visit the typography section to see a list of all the fonts used in Penguin UI and learn more.

Learn more about typography

Default card

A card with an image, title, and description.

Features

Penguai can teach you Javascript

Learning JavaScript doesn't need to be difficult. Our penguin AI robot can learn how much you know and will go at your speed. Although Penguai is small, he's got a mighty big CPU.

HTML 
<article class="">
    <div class="">
        <span class="">Features</span>
        <h3 class="" aria-describedby="featureDescription">Penguai can teach you Javascript</h3>
        <p id="featureDescription" class="">
            Learning JavaScript doesn't need to be difficult. Our penguin AI
            robot can learn how much you know and will go at your speed.
            Although Penguai is small, he's got a mighty big CPU.
        </p>
    </div>
</article>

Card with button

A card with an image, title, description, and an action button.

Europe

Mediterranean Escape

Relax under the sun, savor delicious cuisine, and create memories that last a lifetime. Book your getaway now.

HTML 
<article class="">
    <div class="">
        <div class="">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
            </svg>
            <span>Europe</span>
        </div>
        <h3 class="" aria-describedby="tripDescription">Mediterranean Escape</h3>
        <p id="tripDescription" class="">
            Relax under the sun, savor delicious cuisine, and create
            memories that last a lifetime. Book your getaway now.
        </p>
        <button type="button" class="">Book Now</button>
    </div>
</article>

E-commerce product card

A card with an image, title, description, price and review, ideal for e-commerce websites.

CASIO G-SHOCK GA2100

rated 3 stars
Price $99.99

The Casio G-Shock GA2100 is simply designed for easy timekeeping, featuring a sleek profile and clear display.

HTML 
<article class="">
    <!-- Content -->
    <div class="">
        <!-- Header -->
        <div class="">
            <!-- Title & Rating -->
            <div class="">
                <h3 class="" aria-describedby="productDescription">CASIO G-SHOCK GA2100</h3>
                <!-- Rating -->
                <div class="">
                    <span class="">Rated 3 stars</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
            <span class=""><span class="sr-only">Price</span>$99.99</span>
        </div>
        <p id="productDescription" class="">
            The Casio G-Shock GA2100 is simply designed for easy
            timekeeping, featuring a sleek profile and clear display.
        </p>
        <!-- Button -->
        <button type="button" class="">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="">
                <path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" />
            </svg>
            Add to Cart
        </button>
    </div>
</article>

Socials card

A card with social media icons.

Alice Brown

UX DESIGNER

Making tech products user-friendly and delightful. Looking to collaborate and create meaningful digital products.

HTML 
<article class="">
    <!-- Body -->
    <div class="">
        <h3 class="" aria-describedby="profileDescription">Alice Brown</h3>
        <span class="">UX DESIGNER</span>
        <p id="profileDescription" class="">
            Making tech products user-friendly and delightful. Looking to
            collaborate and create meaningful digital products.
        </p>
        <!-- Social Links -->
        <div class="">

            <!-- Email -->
            <a href="mailto:youremailaddress@email.com" class="" aria-label="email">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="">
                    <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
                    <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
                </svg>
            </a>

            <!-- Instagram -->
            <a href="https://www.instagram.com" target="_blank" class="" aria-label="instagram">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="">
                    <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
                </svg>
            </a>

            <!-- X (Twitter) -->
            <a href="https://www.x.com" target="_blank" class="" aria-label="x or twitter">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="">
                    <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
                </svg>
            </a>

            <!-- Linkedin -->
            <a href="https://www.linkedin.com" target="_blank" class="" aria-label="linkedin">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="">
                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
                </svg>
            </a>
        </div>
    </div>
</article>

Horizontal card

A horizontal card with an image, title, and description. This card is ideal for displaying a list of items. Will be displayed as a vertical card on smaller screens.

Artificial Intelligence

AI-Powered VR Goggles Redefine Reality: Augmented Vision for Al

Experience the next level of augmented reality with smart goggles integrating cutting-edge AI for seamless interaction with the world around you.

Read full story
HTML 
<article class="">
    <!-- body -->
    <div class="">
        <small class="">Artificial Intelligence</small>
        <h3 class="" aria-describedby="articleDescription">AI-Powered VR Goggles Redefine Reality: Augmented Vision for Al</h3>
        <p id="articleDescription" class="">
            Experience the next level of augmented reality with smart
            goggles integrating cutting-edge AI for seamless interaction
            with the world around you.
        </p>
        <a href="#" class="">
           Read full story
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" aria-hidden="true" class="">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
            </svg>
        </a>
    </div>
</article>

Testimonial card

A card with an image, name, title, and testimonial. This card is ideal for displaying testimonials.

Simply put, this software transformed my workflow! Its intuitive interface and powerful features make tasks a breeze. A game-changer for productivity!

Rounded avatar

Bob Johnson

CEO - TechNova
HTML 
<article class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="" aria-hidden="true">
        <path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z" />
    </svg>
    <p class="">
        Simply put, this software transformed my workflow! Its intuitive
        interface and powerful features make tasks a breeze. A game-changer
        for productivity!
    </p>
    <!-- avatar & rating -->
    <div class="">
        <!-- avatar & title -->
        <div class="">
            <img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" class="" alt="avatar"/>
            <div class="">
                <h3 class="">Bob Johnson</h3>
                <span class="">CEO - TechNova</span>
            </div>
        </div>
        <!-- Rating -->
        <div class="">
            <span class="">Rated 4 stars</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="" aria-hidden="true">
                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
            </svg>
        </div>
    </div>
</article>

Pricing card

A card with a title, price, description, and action button. This card is ideal for displaying different subscription plans on pricing pages.

Premium

Best tools for productivity

$8.99 Per month

Features

  • Unlimited access
  • Priority customer support
  • Ad-free experience
  • Enhanced security features
  • Access to premium templates
  • Seamless integration
HTML 
<article class="">
    <h3 class="" aria-describedby="planDescription">Premium</h3>
    <p id="planDescription" class="">Best tools for productivity</p>
    <span class="">$8.99</span>
    <span class=""Per month</span>
    <h4 class="">Features</h4>
    <ul class="">
        <li>Unlimited access to all courses</li>
        <li>Personalized learning plan</li>
        <li>Offline viewing</li>
        <li>No ads</li>
        <li>High quality video</li>
        <li>Cancel anytime</li>
    </ul>
    <button type="button" class="">Start your free trial</button>
</article>

Keyboard Navigation

Key Action
Tab Next focusable element gets the focus
Space Enter Focused item gets selected
* Disclaimer: Some of the images and copy text on this page are generated by artificial intelligence and are only used as placeholders for examples. They may contain errors, inconsistencies, or outdated information.