Marketing Cards

Overview

These are composition patterns — ready-to-assemble blocks built from the core @marmoui/ui primitives (Card, Avatar, Badge, Progress, Alert, DropdownMenu, Input, Tabs, toaster, etc.). They mirror the floating component collage on the marketing hero and show how the primitives combine into real dashboard surfaces.

Each preview is a function you can copy into your own app and adapt. They do not add new exports to @marmoui/ui — they compose what is already there.

Usage

import {
  ProjectCardPreview,
  MessageCardPreview,
  ProfileCardPreview,
  ColoredWidgetPreview,
  SecondaryNavPreview,
  ProfileDropdownMenuPreview,
  CommentPreview,
} from '@/components/previews/marketing-cards-previews';

Examples

Project Card

A bounded summary of a project: icon, title, status tag, description, progress, and a footer with task count, due date, and an avatar stack.

Project card

Composes Card, Badge, Progress, AvatarStack, and IconButton

PreviewCode

Services Features

Ruby on Rails

Science is driven by evidence gathered in experiments, and by the falsification of extant theories and their replacement with newer, asymptotically truer, ones.

Progress75%

3/61 Jan 2023

AB

CD

EF

+1

<ProjectCardPreview
title="Services Features"
tag="API Design"
description="Science is driven by evidence gathered in experiments…"
progress={75}
tasks="3/6"
dueDate="1 Jan 2023"
/>

Message Card

A compact horizontal row for an inbox item — sender, timestamp, and a single preview line, with an unread indicator bar.

<MessageCardPreview
sender="John Locke"
time="10:20 AM"
preview="Message excerpt goes here and change it dfaaa"
unread
/>

Profile Card

A profile surface with a header image, overlapping avatar, name/role, a three-column stat row, and footer details (projects, location).

Profile card

Composes Card, Avatar, and a stats grid

PreviewCode

BF

Benjamin Franklin

Author

997Posts

373kFollowers

299Following

5 ProjectsIstanbul, Turkey

<ProfileCardPreview
name="Benjamin Franklin"
role="Author"
posts="997"
followers="373k"
following="299"
projects="5 Projects"
location="Istanbul, Turkey"
headerImage="/marketing/benjamin-header.jpg"
/>

Colored Widget

A solid-accent KPI tile — icon, label, large value, and a trend line. Use it inside a dashboard grid where a neutral surface is not enough.

<ColoredWidgetPreview
label="New epics"
value={32}
trend="+43%"
accent="violet"
/>

Secondary Navigation

A vertical list of labeled destinations with icons and optional count badges. Use it as a secondary rail inside a two-pane layout.

<SecondaryNavPreview />

Profile Dropdown Menu

A menu anchored to a profile trigger — header with the user, an integration status row, account links, and a destructive log-out item.

<ProfileDropdownMenuPreview />

Input Comment

A comment composer (InputComment) — author label with required marker, avatar, white inline field with emoji picker affordance, primary send button, and helper text.

<InputCommentPreview
author="Thaer Shayeb"
required
initialValue="This looks great"
/>

Supporting feedback & input blocks

These smaller blocks feed the same hero collage and are documented individually on their own pages: Alert, Toaster, Tabs, Badge, and Input.

Scheduled Maintenance Alert

<ScheduledMaintenanceAlertPreview />

Toasts

<ToastsPreview />

Status Badges

<StatusBadgesPreview />

Board Tabs

<BoardTabsPreview />

Inputs

<InputsPreview />

Best Practices