Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<div class="flex flex-col gap-6 p-8 max-w-2xl">
  <div data-controller="midwest-prose" class="midwest-prose prose midwest-markdown">
    <h1>
      <a href="#hello-world" aria-hidden="true" class="anchor" id="hello-world"></a>Hello World</h1>
    <p>This is <strong>bold</strong> and <em>italic</em> text.</p>
    <ul>
      <li>Item one</li>
      <li>Item two</li>
    </ul>
  </div>
</div>
1
2
3
4
5
<% md = params[:content].presence || "# Hello World\n\nThis is **bold** and *italic* text.\n\n- Item one\n- Item two" %>
<div class="flex flex-col gap-6 p-8 max-w-2xl">
  <%= render Midwest::MarkdownComponent.new(md, unsafe: params[:unsafe] == true) %>
</div>

Playground

Explore Markdown rendering with live content.

Param Description Input

Markdown content

Allow raw HTML

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Markdown/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."