Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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="#midwest-markdown" aria-hidden="true" class="anchor" id="midwest-markdown"></a>Midwest Markdown</h1>
    <p>Render rich text from <strong>Markdown</strong> source with full prose typography.</p>
    <h2>
      <a href="#features" aria-hidden="true" class="anchor" id="features"></a>Features</h2>
    <ul>
      <li>Server-side rendering via <a href="https://github.com/gjtorikian/commonmarker">Commonmarker</a>
      </li>
      <li>GFM extensions (tables, strikethrough, autolinks, task lists)</li>
      <li>Prose typography styling out of the box</li>
      <li>Optional raw HTML passthrough with <code>unsafe: true</code>
      </li>
    </ul>
    <h2>
      <a href="#paragraphs" aria-hidden="true" class="anchor" id="paragraphs"></a>Paragraphs</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor<br>
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis<br>
      nostrud exercitation ullamco laboris.</p>
    <blockquote>
      <p>Blockquotes are rendered with left-border styling inherited from the prose<br>
        typography system.</p>
    </blockquote>
    <hr>
    <p>That's it! Simple, semantic, server-rendered Markdown.</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%
sample = <<~MD
  # Midwest Markdown
  Render rich text from **Markdown** source with full prose typography.
  ## Features
  - Server-side rendering via [Commonmarker](https://github.com/gjtorikian/commonmarker)
  - GFM extensions (tables, strikethrough, autolinks, task lists)
  - Prose typography styling out of the box
  - Optional raw HTML passthrough with `unsafe: true`
  ## Paragraphs
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris.
  > Blockquotes are rendered with left-border styling inherited from the prose
  > typography system.
  ---
  That's it! Simple, semantic, server-rendered Markdown.
MD
%>
<div class="flex flex-col gap-6 p-8 max-w-2xl">
  <%= render Midwest::MarkdownComponent.new(sample) %>
</div>

Default

Basic Markdown rendering with headings, paragraphs, lists, and links.

No params configured.

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

Accessibility

Figma embed for Markdown/default

Annotate a preview to embed its Figma design here:

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