Tailwind CSS Promo Cards Blocks

All Blocks
Marketing
Promo Cards

Promo Cards

Floating promotional cards, social follow prompts, and announcement cards for product updates, review requests, and lightweight marketing callouts.

Floating Rating Prompt Card Pro

A small floating card holds the prompt, rating control, and dismiss action in one fixed block.

Create a responsive UI block named "Floating Rating Prompt Card" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/promo-cards/#floating-rating-prompt-card. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: marketing/promo-cards
- Block ID: floating-rating-prompt-card
- Source description: A small floating card holds the prompt, rating control, and dismiss action in one fixed block.
- Preview iframe: https://preline.co/blocks/marketing/promo-cards/iframes/pro/floating-rating-prompt-card.html (repo path: blocks/marketing/promo-cards/iframes/pro/floating-rating-prompt-card.html)
- Source markup reference:
  - partials/pro/storefront/cards/rate-purchase.html
  - partials/pro/storefront/cards/mini-product-review-in-slider.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Root is `<div id="hs-pro-shrpccid" class="w-full sm:max-w-sm">` wrapping `p-1 flex flex-col bg-card border border-card-line rounded-2xl shadow-lg` - the tight `p-1` shell plus `rounded-2xl` and `shadow-lg` is what makes it read as floating; it is not `fixed`/`absolute` on its own.
  - Header is `py-3 px-7 relative text-center` with the single line `Rate your purchases` (`font-medium text-layer-foreground`) and an absolutely placed `size-7` round close button (`absolute top-3 inset-e-3`) whose only text is an `sr-only` `Close`; it is wired with `data-hs-remove-element="#hs-pro-shrpccid"`.
  - The body is a Preline HSCarousel: `data-hs-carousel='{"loadingClasses": "opacity-0", "isCentered": true, "slidesQty": {"xs": 1}, "isSnap": true, "hasSnapSpacers": false}'` over `hs-carousel` / `hs-carousel-body` / `hs-carousel-slide` with native `snap-x snap-mandatory overflow-x-auto` scrolling and a styled horizontal scrollbar.
  - Exactly 3 slides, in this order: `Windrunner` / `Color: White, Size: M`, `White Jeans` / `Color: Gray, Size: M`, `Embroidered Hoodie` / `Color: White, Size: US 10`; the first is centered/active on load.
  - Each slide is a `p-4 h-full bg-card border border-card-line rounded-2xl` card with the title and description on the left, a `Rate product` button pinned to the bottom (`mt-auto`), and a `shrink-0 w-20 h-24 object-cover rounded-xl` Unsplash product photo on the right.
  - Round `size-10` prev/next buttons (`hs-carousel-prev` / `hs-carousel-next`, `hs-carousel-disabled:opacity-0`, `-inset-s-2` / `-inset-e-2`, vertically centered) sit half outside the card edges and carry `sr-only` labels `Previous` and `Next`.
  - Footer is a `p-4` block with one full-width outline button reading `I'll leave a review later`, also carrying `data-hs-remove-element="#hs-pro-shrpccid"` so it dismisses the whole card.
  - There is no star-rating widget, numeric score, or form field anywhere in the source - the only rating affordance is the per-slide `Rate product` button.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div id="hs-pro-shrpccid" class="fixed bottom-0 inset-s-0 sm:inset-s-auto inset-e-0 p-4 lg:p-10 lg:ps-0 w-full sm:max-w-sm">
                      <div class="p-1 flex flex-col bg-card border border-card-line rounded-2xl shadow-lg">
                        
                        <div class="py-3 px-7 relative text-center">
                          <p class="font-medium text-layer-foreground">
                            Rate your purchases
                          </p>

<div class="absolute top-3 inset-e-3">
                            <button type="button" class="size-7 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" data-hs-remove-element="#hs-pro-shrpccid">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                            </button>
                          </div>
                          
                        </div>

<div class="px-2">
                          
                          <div data-hs-carousel='{
                            "loadingClasses": "opacity-0",
                            "isCentered": true,
                            "slidesQty": {
                              "xs": 1
                            },
                            "isSnap": true,
                            "hasSnapSpacers": false
                          }' class="relative">
                            <div class="overflow-x-hidden">
                              <div class="hs-carousel w-full flex snap-x pb-2 snap-mandatory overflow-x-auto [&::-webkit-scrollbar-track]:mx-1 md:[&::-webkit-scrollbar-track]:mx-2.5 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                <div class="hs-carousel-body flex flex-nowrap opacity-0 transition-transform duration-700">
                                  <div class="hs-carousel-slide snap-center px-2">
                                    
                                    <div class="p-4 h-full bg-card border border-card-line rounded-2xl">
                                      <div class="h-full flex gap-x-3">
                                        <div class="grow h-full flex flex-col">
                                          <div>
                                            <p class="font-medium text-sm text-foreground">
                                              Windrunner
                                            </p>
                                            <p class="mt-1 text-sm text-muted-foreground-1">
                                              Color: White, Size: M
                                            </p>
                                          </div>
                                          <div class="mt-auto">
                                            <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              Rate product
                                            </button>
                                          </div>
                                        </div>
                                        <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1506629082955-511b1aa562c8?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="hs-carousel-slide snap-center px-2">
                                    
                                    <div class="p-4 h-full bg-card border border-card-line rounded-2xl">
                                      <div class="h-full flex gap-x-3">
                                        <div class="grow h-full flex flex-col">
                                          <div>
                                            <p class="font-medium text-sm text-foreground">
                                              White Jeans
                                            </p>
                                            <p class="mt-1 text-sm text-muted-foreground-1">
                                              Color: Gray, Size: M
                                            </p>
                                          </div>
                                          <div class="mt-auto">
                                            <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              Rate product
                                            </button>
                                          </div>
                                        </div>
                                        <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1603344797033-f0f4f587ab60?q=80&w=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>
                                    
                                  </div>
        
                                  <div class="hs-carousel-slide snap-center px-2">
                                    
                                    <div class="p-4 h-full bg-card border border-card-line rounded-2xl">
                                      <div class="h-full flex gap-x-3">
                                        <div class="grow h-full flex flex-col">
                                          <div>
                                            <p class="font-medium text-sm text-foreground">
                                              Embroidered Hoodie
                                            </p>
                                            <p class="mt-1 text-sm text-muted-foreground-1">
                                              Color: White, Size: US 10
                                            </p>
                                          </div>
                                          <div class="mt-auto">
                                            <button type="button" class="py-2 px-2.5 flex items-center text-sm text-start bg-surface text-surface-foreground rounded-lg hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              Rate product
                                            </button>
                                          </div>
                                        </div>
                                        <img class="shrink-0 w-20 h-24 object-cover rounded-xl" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                              </div>
                            </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-0 hs-carousel-disabled:cursor-default absolute top-1/2 -inset-s-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                              <span class="text-2xl" aria-hidden="true">
                                <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              </span>
                              <span class="sr-only">Previous</span>
                            </button>
                            <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-0 hs-carousel-disabled:cursor-default absolute top-1/2 -inset-e-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                              <span class="sr-only">Next</span>
                              <span class="text-2xl" aria-hidden="true">
                                <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </span>
                            </button>
                            
                          </div>
                          
                        </div>

<div class="p-4">
                          <button type="button" class="py-2.5 px-4 w-full inline-flex justify-center items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-remove-element="#hs-pro-shrpccid">
                            I'll leave a review later
                          </button>
                        </div>
                        
                      </div>
                    </div>

Open related storefront homepage

Dismissible promo card previews a stacked AI insight above a heading, description, and view-all action.

Create a responsive UI block named "AI Insight Promo Card with Stacked Preview" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/promo-cards/#ai-insight-promo-card-with-stacked-preview. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/promo-cards
- Block ID: ai-insight-promo-card-with-stacked-preview
- Source description: Dismissible promo card previews a stacked AI insight above a heading, description, and view-all action.
- Preview iframe: https://preline.co/blocks/marketing/promo-cards/iframes/pro/ai-insight-promo-card-with-stacked-preview.html (repo path: blocks/marketing/promo-cards/iframes/pro/ai-insight-promo-card-with-stacked-preview.html)
- Source markup reference:
  - partials/pro/finance-tracker/cards/ai-assistant.html

Block-specific fidelity rules:
- Preserve grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - The card is `rounded-t-xl` only - it is designed to meet a divider at the bottom, not to float as a fully rounded card.
  - A round close button sits at `top-2 end-2` over the gradient, styled `bg-primary-foreground/15` at 70% opacity, with the visually hidden label `Dismiss`. It carries `data-hs-remove-element` pointing at the wrapping section so the section padding and divider are removed with it - keep that wrapper in the destination or retarget the attribute.
  - The upper panel is `bg-linear-to-b from-primary to-layer` with an absolutely positioned radial highlight drawn inline: `radial-gradient(75% 55% at 50% -8%, color-mix(in oklab, #fff 32%, transparent), transparent 65%)`.
  - Two stacked cards create depth: behind, a `w-4/5` aria-hidden strip reading `Subscriptions up $24` at 50% opacity; in front, the live insight card at `p-3 bg-layer border border-layer-line rounded-xl shadow-lg`.
  - The insight card header pairs a sparkles icon in the primary color with the label `Spending insight`, and a right-aligned `🍜 Food` chip on `bg-surface`.
  - The insight body reads `Food is up 21% on last month. Trimming $80 keeps you inside your July budget.` with `21%` and `$80` emphasised in the foreground color and set in `tabular-nums`.
  - Below the gradient the copy is centred: the `h2` `Optimize your finances with AI`, the paragraph `Spot patterns, catch overspending and get suggestions on where to save.`, and a `View all 3 insights` button with a trailing chevron.
  - The emoji `🍜` is real content, marked `aria-hidden` - keep it rather than swapping in an icon.
  - The only scripting is the Preline runtime powering the dismiss behaviour; there is no chart, carousel, or timer.

<div class="relative overflow-hidden rounded-t-xl">
      <button type="button" class="absolute top-2 end-2 z-10 flex justify-center items-center size-6 bg-primary-foreground/15 text-primary-foreground rounded-full opacity-70 hover:opacity-100 focus:outline-hidden focus:opacity-100" data-hs-remove-element="#hs-finance-ai-assistant">
        <span class="sr-only">Dismiss</span>
        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>

<div class="relative px-4 pt-5 pb-5 bg-linear-to-b from-primary to-layer">
        <span class="absolute inset-0 pointer-events-none" style="background: radial-gradient(75% 55% at 50% -8%, color-mix(in oklab, #fff 32%, transparent), transparent 65%)" aria-hidden="true"></span>

<div class="relative mx-auto w-4/5 py-1.5 px-3 bg-layer opacity-50 rounded-t-xl" aria-hidden="true">
          <p class="text-xs font-medium text-foreground truncate">Subscriptions up $24</p>
        </div>

<div class="relative -mt-1.5 p-3 bg-layer border border-layer-line rounded-xl shadow-lg">
          <div class="flex items-center justify-between gap-x-2">
            <p class="inline-flex items-center gap-x-2 text-sm font-medium text-foreground">
              <svg class="shrink-0 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>
              Spending insight
            </p>

<p class="mt-2 text-xs text-muted-foreground-1">Food is up <span class="font-medium text-foreground tabular-nums">21%</span> on last month. Trimming <span class="font-medium text-foreground tabular-nums">$80</span> keeps you inside your July budget.</p>
        </div>
      </div>

<div class="px-4 pt-1 pb-5 text-center">
        <h2 id="ai-assistant-heading" class="font-medium text-foreground">Optimize your finances with AI</h2>

<p class="mt-1 text-sm text-muted-foreground-1">Spot patterns, catch overspending and get suggestions on where to save.</p>

<button type="button" class="mt-4 py-2 px-4 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
          View all 3 insights
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
        </button>
      </div>
    </div>

Open related finance tracker template

Compact Update Card with Thumbnail Pro

A compact media card stacks the thumbnail, headline, and short metadata in one small block.

Create a responsive UI block named "Compact Update Card with Thumbnail" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/promo-cards/#compact-update-card-with-thumbnail. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/promo-cards
- Block ID: compact-update-card-with-thumbnail
- Source description: A compact media card stacks the thumbnail, headline, and short metadata in one small block.
- Preview iframe: https://preline.co/blocks/marketing/promo-cards/iframes/pro/compact-update-card-with-thumbnail.html (repo path: blocks/marketing/promo-cards/iframes/pro/compact-update-card-with-thumbnail.html)
- Source markup reference:
  - partials/pro/analytics-dashboard/cards/news.html

Block-specific fidelity rules:
- Preserve grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - The entire card is a single `<a href="#">` with `group flex flex-col bg-card border border-card-line rounded-xl hover:border-line-3 focus:outline-hidden focus:border-line-3 transition duration-300`; the preview constrains it to `max-w-xs`, so it is a narrow ~320px card.
  - Thumbnail region is `p-2 w-full h-32 rounded-md` (image inset by the padding, not edge-to-edge) holding two `size-full object-cover rounded-md` images: `assets/img/demo-previews/img32.webp` for light and `assets/img/demo-previews-dark/img32.webp` toggled by `dark:hidden` / `dark:block hidden`.
  - Body is a single `p-3` block with a `flex items-center gap-2` row: eyebrow `New` (`text-xs text-muted-foreground-1`) above the title `Preline Startup Demo` (`font-medium text-sm text-foreground`, switching to primary on `group-hover` / `group-focus`).
  - Trailing arrow icon is `shrink-0 size-3.5 text-primary opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition duration-300`; at `lg` its shaft (`M5 12h14`) fades and slides in while the head (`m12 5 7 7-7 7`) translates - do not render it always-visible.
  - Exactly 3 text/graphic elements: thumbnail, eyebrow, title (plus the arrow). There is no date, author, avatar, badge/tag, excerpt paragraph, or separate read-more button.
  - Fully static apart from CSS group-hover transitions; no Preline JS plugin, dropdown, or dismiss control is present.

<a class="group flex flex-col bg-card border border-card-line rounded-xl hover:border-line-3 focus:outline-hidden focus:border-line-3 transition duration-300" href="#">
                      <div class="p-2 w-full h-32 rounded-md">
                        <img class="size-full object-cover rounded-md dark:hidden" src="../../../assets/img/demo-previews/img32.webp" alt="Card Image">
                        <img class="size-full object-cover rounded-md dark:block hidden" src="../../../assets/img/demo-previews-dark/img32.webp" alt="Card Image">
                      </div>
  
                      <div class="p-3">
                        <div class="flex items-center gap-2">
                          <div class="grow">
                            <p class="text-wrap text-xs text-muted-foreground-1">
                              New
                            </p>
                            <p class="text-wrap font-medium text-sm text-foreground group-hover:text-primary group-focus:text-primary">
                              Preline Startup Demo
                            </p>
                          </div>
  
                          <svg class="shrink-0 size-3.5 text-primary opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:transition" d="M5 12h14"/><path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:transition" d="m12 5 7 7-7 7"/></svg>
                        </div>
                      </div>
                    </a>

Open related analytics dashboard

Short follow cards repeat the platform icon, label, and prompt in a two-card row.

Create a responsive UI block named "Social Follow Card Pair" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/promo-cards/#social-follow-card-pair. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: marketing/promo-cards
- Block ID: social-follow-card-pair
- Source description: Short follow cards repeat the platform icon, label, and prompt in a two-card row.
- Preview iframe: https://preline.co/blocks/marketing/promo-cards/iframes/pro/social-follow-card-pair.html (repo path: blocks/marketing/promo-cards/iframes/pro/social-follow-card-pair.html)
- Source markup reference:
  - partials/pro/saas-startup/cards/follow-us-grid-view.html
  - partials/pro/saas-startup/cards/follow-us.html

Block-specific fidelity rules:
- Preserve grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Exactly 2 cards in `grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-5 lg:gap-10` (single column below `sm`); the preview constrains the pair to `max-w-3xl`.
  - Each card is a whole-card `<a href="#">` styled `p-3 sm:p-4 bg-layer border border-layer-line rounded-xl hover:bg-muted-hover hover:shadow-xs focus:outline-hidden focus:bg-muted-focus focus:shadow-xs`, with an inner `flex items-center gap-x-4` row.
  - The icon sits in a `shrink-0 flex justify-center items-center size-10 bg-secondary text-secondary-foreground rounded-full` badge and is a `shrink-0 size-5` glyph.
  - Card 1 (first): the X logo as a custom `viewBox="0 0 48 50"` filled path using `fill="currentColor"`, heading `X (Twitter)`, description `Follow us here - we post cool stuff`.
  - Card 2 (second): the Instagram outline glyph (24 viewBox, `fill="none" stroke="currentColor" stroke-width="2"`, rounded `rect` + circle path + dot line), heading `Instagram`, description `Follow us here - we share our story`.
  - Headings are `<h3 class="font-semibold text-foreground">` and descriptions are `<p class="text-sm text-muted-foreground-1">`; the descriptions use a plain hyphen, not an en/em dash.
  - No follower counts, handles, `Follow` buttons, trailing arrows, or brand-colored backgrounds - the badge is the neutral secondary token and the glyph inherits `currentColor`. Fully static; no Preline JS plugin.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-5 lg:gap-10">
                      
                      <a class="p-3 sm:p-4 bg-layer border border-layer-line rounded-xl hover:bg-muted-hover hover:shadow-xs focus:outline-hidden focus:bg-muted-focus focus:shadow-xs" href="#">
                        <div class="flex items-center gap-x-4">
                          <span class="shrink-0 flex justify-center items-center size-10 bg-secondary text-secondary-foreground rounded-full">
                            <svg class="shrink-0 size-5" width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.5665 20.7714L46.4356 0H42.2012L26.6855 18.0355L14.2931 0H0L18.7397 27.2728L0 49.0548H4.23464L20.6196 30.0087L33.7069 49.0548H48L28.5655 20.7714H28.5665ZM22.7666 27.5131L5.76044 3.18778H12.2646L42.2032 46.012H35.699L22.7666 27.5142V27.5131Z" fill="currentColor"/></svg>
                          </span>
                          <div>
                            <h3 class="font-semibold text-foreground">
                              X (Twitter)
                            </h3>
                            <p class="text-sm text-muted-foreground-1">
                              Follow us here - we post cool stuff
                            </p>
                          </div>
                        </div>
                      </a>

<a class="p-3 sm:p-4 bg-layer border border-layer-line rounded-xl hover:bg-muted-hover hover:shadow-xs focus:outline-hidden focus:bg-muted-focus focus:shadow-xs" href="#">
                        <div class="flex items-center gap-x-4">
                          <span class="shrink-0 flex justify-center items-center size-10 bg-secondary text-secondary-foreground rounded-full">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>
                          </span>
                          <div>
                            <h3 class="font-semibold text-foreground">
                              Instagram
                            </h3>
                            <p class="text-sm text-muted-foreground-1">
                              Follow us here - we share our story
                            </p>
                          </div>
                        </div>
                      </a>
                      
                    </div>

Open related startup about page

Promo Cards

Floating Rating Prompt Card Pro

AI Insight Promo Card with Stacked Preview New Pro

Compact Update Card with Thumbnail Pro

Social Follow Card Pair Pro