Prose

Content that arrives as plain HTML, such as rendered Markdown, has no classes of its own. The mt-prose class styles everything inside it, from headings and lists to tables and code, with Meteor's tokens. Markdown uses it for its output.

<template>
  <div class="mt-prose">
    <h2>Shipping</h2>
    <p>
      Orders placed before <strong>2 pm</strong> ship the same day. Delivery takes
      <em>two to three</em> working days.
    </p>
    <ul>
      <li>Standard shipping is free from €50.</li>
      <li>Express shipping costs <code>€9.90</code>.</li>
    </ul>
    <h3>Returns</h3>
    <p>Customers can return items within 30 days. <a href="#returns">Read the full policy</a>.</p>
  </div>
</template>

Usage

Add mt-prose to the element that holds the content. The class is part of the library's styles (@shopware-ag/meteor-component-library/styles.css), so there is nothing else to import.

<div class="mt-prose">
  <!-- HTML without classes -->
</div>

Body text uses --font-size-xs (14px) with --font-line-height-xs, like the rest of the Administration. Every rule has the specificity of a single class, so the scoped styles of components inside the content win over it.

Hierarchy

Headings step down through the type scale, and all of them are semibold. Below h4, headings keep the body size: text smaller than 14px is hard to read.

Spacing

The spacing follows GitHub's Markdown styles. Paragraphs, lists, quotes, code blocks and tables have --scale-size-12 below them. Headings have more space above than below, so each heading sits closer to the content it introduces than to the content before it.

• Items of a list are --scale-size-4 apart. When the items contain paragraphs, they get the paragraph spacing.
• A nested list continues the spacing of its list instead of starting a new block.
• The first element has no space above and the last element no space below, so the content sits flush with its container. The same applies inside a quote.

Elements

• Lists indent by --scale-size-24. Bullets change from disc to circle to square, and numbers from decimal to lower roman to lower alpha, as lists nest. In a task list, the checkbox takes the place of the bullet.
• Links use --color-text-brand-default and are underlined.
• Quotes have a bar on the start side and use --color-text-secondary-default.
• Inline code sits on --color-background-tertiary-default at 87.5% of the surrounding size, so it also fits into headings. Code blocks use --font-size-2xs and scroll horizontally when a line is too long.
• Tables keep their natural width, so text wraps in the cells. Cells have borders in --color-border-secondary-default, and header cells sit on --color-background-secondary-default.
• Horizontal rules are a line in --color-border-secondary-default with --scale-size-24 above and below.

Opting out

Add mt-not-prose to an element inside the content to leave it and everything in it unstyled, for example a component that brings its own typography.

<div class="mt-prose">
  <p>Styled as prose.</p>
  <div class="mt-not-prose">Not styled as prose.</div>
</div>

Best practices

Related

• Typography: the type scale and tokens that prose builds on.
• Markdown: renders Markdown with these styles.