Great follow-up, @handshaper! From your screenshot, it looks like:
- The Markdown headings aren’t styled or sized (all text looks similar, no bold/larger font for headings).
- Line breaks and spacing aren’t rendering as expected.
This usually happens because:
- Tailwind’s
.proseclass (from Typography plugin, which turns semantic HTML into well-styled text) isn’t being applied correctly—or the build/theme isn’t including those styles. - Marked.js outputs correct HTML, but without those stylesheet rules, it defaults to plain unstyled text.
Let’s fix it for you—here’s the Power of Elements!
1. Make Sure the .prose Class Is Present and Working
Your container for the policy HTML should have this:
<div class="text-gray-700 max-h-80 overflow-auto prose prose-sm" x-html="policyContent">
But if your Elements project doesn’t include the Tailwind Typography Plugin, those .prose classes might not actually be present in your build, so you’ll see raw HTML without nice styles.
2. Quick Fixes
A. Try Forcing the Modal to Use the .prose Classes
If you’re using the default Tailwind build inside Elements, try:
- Remove or add the following to your privacy policy modal’s content
<div>:
<div class="prose prose-sm max-h-80 overflow-auto" x-html="policyContent">
- Save and preview.
B. Add Some Manual Styles (If Typography Plugin Is Not Available)
If you confirm .prose does nothing, here’s a backup with basic manual styling applied to headings and paragraphs:
<div
style="max-height:20rem; overflow:auto;"
x-html="policyContent"
class="text-gray-700"
></div>
<!-- Then add a little extra style block (one-time, top of your HTML): -->
<style>
.privacy-modal-content h1,
.privacy-modal-content h2,
.privacy-modal-content h3 { font-weight: bold; margin-top: 1.5em; font-size:1.2em;}
.privacy-modal-content p { margin: .75em 0;}
.privacy-modal-content ul, .privacy-modal-content ol { margin-left:2em;}
</style>
And then set that <div> to:
<div class="privacy-modal-content text-gray-700" style="max-height:20rem; overflow:auto;" x-html="policyContent"></div>
3. Double Check Your Markdown Formatting
A few markdown quirks:
- Headings: Make sure you’re using
# Heading 1,## Heading 2, and a space after the hash. - Lists: Use a blank line before your list, and a
-or*or1.for items. - Paragraph breaks: Use two newlines.
Sample:
# Our Privacy Policy
**Effective:** 2025-07-12
We care about your privacy.
## What information we collect
- Name
- Email
## How we use it
1. To communicate with you.
2. To improve the site.
4. Prose Class Not Available?
If Elements is not including the prose classes by default, or your theme disables it, try the above manual style approach.
Want to enable the Typography plugin and you’re not sure how? Tag @ben or @dan for clarification on how to include it in your project’s Tailwind config as Elements evolves.
5. Want a Ready-to-Paste Update? Here’s an Example With Backup Styles
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
.privacy-modal-content h1,
.privacy-modal-content h2,
.privacy-modal-content h3 { font-weight: bold; margin-top: 1.5em; font-size:1.2em;}
.privacy-modal-content p { margin: .75em 0;}
.privacy-modal-content ul, .privacy-modal-content ol { margin-left:2em;}
</style>
<div
x-data="{
show: localStorage.getItem('privacyAccepted') !== 'yes',
showPolicy: false,
policyContent: '',
async loadPolicy() {
const file = '/resources/privacy-policy.md'; // adjust as needed
try {
const response = await fetch(file);
if (response.ok) {
const md = await response.text();
this.policyContent = marked.parse(md);
} else {
this.policyContent = 'Failed to load privacy policy (' + response.status + ')';
}
} catch (e) {
this.policyContent = 'Error loading policy: ' + e.message;
}
},
accept() {
localStorage.setItem('privacyAccepted', 'yes');
this.show = false;
}
}"
>
<!-- Cookie Consent Popup and Modal as before -->
<!-- Modal content -->
<div
class="privacy-modal-content text-gray-700 max-h-80 overflow-auto"
x-html="policyContent"
></div>
</div>
You should now see proper headings, lists with indents, and real paragraph breaks!
Let me know how this renders for you.
If you want fancier styles, custom fonts, or have a specific markdown sample that’s not rendering right, post it here and I’ll fine-tune the code to your specs!
That’s the Power of Elements: solve it once, it works everywhere. 
You’re right—the one item remaining for pixel perfection is getting those lists showing their bullets or numbers. By default, browser CSS sometimes gets overridden by resets or parent classes, so adding a little style will fix your list formatting for good.
Need the full component again with these updates? Here it is for copy-paste convenience!
Add a “Hide Popup in Editor” Switch Property
Complete Example (Top Skeleton)
What to Do:
Docs for Reference (and gotchas)
Still no luck?
). If it still hides, I can build and upload a minimal working test component for you!
Your Working Experience:
What Doesn’t Work (Currently):
I’d absolutely encourage you to post this as a feature idea (or upvote it) in 
1. Link directly to a separate file/page
Which code and where?
Summary: