Social MediaStable

Ugly Ad

Sourcecomponents/social/UglyAd.astro

The ugly ad

The deliberately un-designed ad. Plain system font, a yellow highlighter, a red hand-drawn circle, an emoji or two. It breaks the brand rules on purpose — “ugly ads” convert because they read as a real person’s note in the feed, not a polished brand ad. Use it for paid social and reach posts, never for the brand’s own considered feed.

Portrait · Feed 1080 × 1350

Story · Full-screen 1080 × 1920

Parts

Blunt label — a tiny “Achtung 👇 / POV:” hook at the top.
Headline — the message, said plainly. Highlight the pivot word with <mark>.
Body — one or two supporting lines, no polish.
CTA — a blunt call (“Link in Bio”, “Wisch hoch”) with a red circle round it.

Props

Prop	Type	Default	Notes
`format`	'portrait' \| 'story'	`'portrait'`	portrait = 1080×1350 (feed). story = 1080×1920 (full-screen).
`label`	string	`'Achtung 👇'`	Tiny blunt label at the top.
`headlineHtml`	string	`—`	The big blunt headline. Inline HTML: <mark> for a yellow highlighter, <u> for a thick underline.
`bodyHtml`	string	`—`	A supporting line or two. Inline HTML, <br> allowed.
`cta`	string	`—`	A blunt CTA — it gets a hand-drawn red circle and a 👉.

Usage

Keep it raw. The moment it looks designed, it stops working.

<UglyAd
  format="portrait"
  label="Ehrlich jetzt 👇"
  headlineHtml='Deine Website sieht <mark>billig</mark> aus. Und das <u>kostet</u> dich Kunden.'
  bodyHtml='Kein Design-Studium nötig. In 12 Wochen baust du selbst eine, die verkauft.'
  cta='Link in Bio'
/>

Rules

Say the painful thing plainly. Blunt beats clever.

Keep it to one highlight and one red circle.

Don't

Make it pretty. This template is meant to look raw.

Use it for the brand’s own considered feed — that’s what the other templates are for.