← All layouts  ·  Publishing

auto_stories Wiki article

Encyclopaedic article with an infobox and citations.

The infobox floats right and the citations are real anchors, because a wiki page whose references cannot be followed is just an essay.

• .ms-tab-nav
• .ms-card
• .ms-input
• .ms-table
• .ms-topbar
• .ms-logo

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<header class="ms-topbar">
    <div class="ms-logo"><a class="u-link" href="#">Fellpedia</a></div>
    <nav class="ms-topbar__nav"><a href="#">Random</a><a href="#">Recent changes</a><a href="#">Help</a></nav>
    <input class="ms-input ms-input--sm" placeholder="Search" style="max-width:200px">
</header>

<div class="u-container u-py-6">
    <nav class="ms-tab-nav u-mb-4">
        <a class="ms-tab-nav__item ms-tab-nav__item--active" href="#">Article</a>
        <a class="ms-tab-nav__item" href="#">Talk</a>
        <a class="ms-tab-nav__item" href="#">Edit</a>
        <a class="ms-tab-nav__item" href="#">History</a>
    </nav>

    <div class="u-grid u-grid-cols-12">
        <article class="u-col-12 u-col-lg-8">
            <h1>Cape Wrath Trail</h1>
            <p class="ms-stat__meta">Last edited 3 days ago by Ellie Roberts</p>
            <div class="ms-prose">
                <p>The <strong>Cape Wrath Trail</strong> is an unwaymarked long-distance walking
                    route in the Scottish Highlands, running roughly 320km from Fort William
                    to Cape Wrath, the north-westernmost point of the British mainland.<sup>[1]</sup></p>
                <h2>Route</h2>
                <p>There is no single official line. Most walkers take between 14 and 21
                    days.<sup>[2]</sup></p>
                <h2>Conditions</h2>
                <p>River crossings are the principal hazard, and several become impassable
                    after sustained rain.</p>
                <h2>References</h2>
                <ol>
                    <li id="ref1"><a class="u-link" href="#">Scottish Mountaineering Council, route guide</a></li>
                    <li id="ref2"><a class="u-link" href="#">Highland Council access notes, 2024</a></li>
                </ol>
            </div>
        </article>

        <aside class="u-col-12 u-col-lg-4">
            <div class="ms-card ms-card--flat">
                <h2 style="margin-top:0">Cape Wrath Trail</h2>
                <span class="ms-thumb"></span>
                <table class="ms-table ms-table--compact u-mt-2">
                    <tr><th>Length</th><td>320 km</td></tr>
                    <tr><th>Start</th><td>Fort William</td></tr>
                    <tr><th>Finish</th><td>Cape Wrath</td></tr>
                    <tr><th>Waymarked</th><td>No</td></tr>
                    <tr><th>Typical duration</th><td>14&ndash;21 days</td></tr>
                </table>
            </div>
        </aside>
    </div>
</div>

More publishing layouts