IProseContainer is a layout container designed for long-form prose content: documentation, about pages, markdown outputs, and similar text-heavy views. It maps raw HTML tags directly to Vuetify typography variables and spacing scales. You don't need to add utility classes to every element. Background color is not managed by the component. The container is transparent by default. Wrap it in a
v-card , set a page background class, or apply your own surface color — whichever fits your layout. About this project
This is a paragraph inside IProseContainer . Line height is inherited directly from Vuetify's typography map without relying on hardcoded magic numbers. Below is a comprehensive showcase of what this container can auto-format for you.
Typography & Spacing
Headings h2–h6 receive calculated top and bottom margins automatically. The first heading in a block has its top margin removed so it sits flush with the content above it.
"The prose container is a perfect target for rendered Markdown. You can just dump your HTML string into the default slot and let SCSS handle the rest."
Lists and Sections
Wrap related content in a <section> tag to group ideas and secure consistent bottom spacing. Lists map perfectly too:
- Fully styled unordered lists.
- Nested elements get corrected margins:
- Ordered step one.
- Ordered step two.
- Bottom margin is cleared on the last element automatically.
Links
Plain links preserve default HTML styles (like underlines) but automatically receive IIASA branding colours, including hover and visited states. Vuetify-generated anchors (like <v-btn> ) are safely excluded from this rule.
Embedded Components
Components like ICode , IAppHostingInfo or IChart can seemlessly be embedded directly into the prose layout. Place them in a <p> or set spacing with utility classes as needed (IProseContainer uses mb-4 for <p> elements by default).
// SCSS math prevents hardcoded pixel values
margin-bottom: v.$spacer * 6;
padding-left: v.$spacer * 4;
"Public App" is hosted by the Scenario Services and Scientific Software team at the IIASA Energy, Climate and Environment program.
Here is a fully interactive chart component embedded natively in the text block. The width gracefully adheres to the prose measure:
Data Tables
| Metric | Value | Status |
|---|---|---|
| Emissions | 2.4 Gt | Stable |
| Renewables | 45% | Growing |
maxWidth is 75ch — a character-unit value. 1ch equals the width of the "0" glyph in the current font. The value is set to 75ch , chosen from Bringhurst's typography recommendation of 45–75 characters per line for optimal readability. As a
ch -based value, it scales automatically with font size, so users who increase their base font for accessibility get a proportionally consistent measure at any size. Override with any CSS length, or pass
false to remove the cap entirely. Default width (75ch)
This paragraph runs at the default 75ch. Notice how the line breaks adapt naturally if you change your browser's base font size.
Override: max-width=false
No width cap — the container expands to fill its parent. Only use this when the parent already constrains the width (e.g. inside a fixed-width grid column).
#title slot. A rich title via slot
The title slot lets you compose any markup inside the <h1> .