[Template: Reddit Post Card] [Intent] Render a story / question / joke as a Reddit post card, for video overlays and social media story sharing. Inspired by hyperframes reddit-post.
[Canvas] 1280×720 (video overlay) or 800×600 (single-card sharing); background transparent or dark #0b1416。
[Card Structure]
- Outer frame: rounded corners 16px, bg white
#ffffff(light) or#1a1a1b(dark, recommended for video overlay), border 1px#edeff1/#343536。 - Left side vote rail (40-56px wide):
- Up arrow ▲ (16px,
#878a8c, hover turns orange#ff4500)。 - Vote count (Inter, 17px, weight 700, centered, color: 0 gray / positive orange / negative blue); for large numbers use
12.3kformat. - Down arrow ▼ (hover turns blue
#7193ff)。
- Up arrow ▲ (16px,
- Main area:
- Top meta row: subreddit icon (CSS circle + letter) +
r/subreddit(bold) +· Posted by u/username · 3h(small gray text). - Title (Inter / IBM Plex Sans, 22-28px, weight 500, dark text)。
- Content: 16px body or quote block or 1 image (CSS gradient placeholder).
- Bottom action row: 💬
1.2k Comments· 🏆 Awards · ⤴️ Share · ⋯ icon。
- Top meta row: subreddit icon (CSS circle + letter) +
- Reddit Snoo logo in the top-right corner (inline SVG, orange
#ff4500)。
[Fonts]
- Primary:
IBM Plex Sans→ fallbackInter, weight 400/500/700。 - Numbers: same as primary font.
- Chinese:
Noto Sans SC。
[Design Details]
- Light mode: bg
#fff, text#1c1c1c, secondary#7c7c7c。 - Dark mode (recommended): bg
#1a1a1b, text#d7dadc, secondary#818384, border#343536。 - Vote count colors: positive =
#ff4500, negative =#7193ff, 0 =#878a8c。 - The title click area can have a subtle background hover.
- External image links are strictly prohibited; use CSS gradients + descriptions for image placeholders.
- Must use the content provided by the user; automatically generate a reasonable subreddit / username / vote count.
- Single-file HTML; icons as inline SVG (up/down arrows, comment bubble, trophy).