← All layouts  ·  Community

Comment thread

Nested replies with voting and moderation controls.

Nesting stops at three levels. Deeper than that and the indentation costs more readable width than the structure is worth on a phone.

  • .ms-btn
  • .ms-toolbar
  • .ms-card
  • .ms-stat
  • .ms-avatar-md
  • .ms-avatar-sm

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.

<div class="u-container u-py-8" style="max-width:820px">
    <h1>Comments</h1>
    <p class="ms-stat__meta">24 comments &middot; sorted by most helpful</p>

    <div class="ms-card">
        <div class="ms-toolbar">
            <span class="ms-avatar-md">ER</span>
            <div><strong>Ellie Roberts</strong>
                <p class="ms-stat__meta">2 hours ago</p></div>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-badge ms-badge--info">Author</span>
        </div>
        <p>The point about river crossings is the one people underestimate. A spare day of
            food is cheap insurance.</p>
        <div class="ms-toolbar">
            <button class="ms-btn ms-btn--sm ms-btn--ghost">
                <span class="material-icons">thumb_up</span> 42</button>
            <button class="ms-btn ms-btn--sm ms-btn--ghost">Reply</button>
            <button class="ms-btn ms-btn--sm ms-btn--ghost">Report</button>
        </div>

        <div style="margin-left:2.5rem">
            <div class="ms-card ms-card--flat">
                <div class="ms-toolbar">
                    <span class="ms-avatar-sm">JD</span>
                    <div><strong>James Doyle</strong><p class="ms-stat__meta">an hour ago</p></div>
                </div>
                <p>Agreed. We carried two extra days and used one of them.</p>
                <div class="ms-toolbar">
                    <button class="ms-btn ms-btn--sm ms-btn--ghost">
                        <span class="material-icons">thumb_up</span> 11</button>
                    <button class="ms-btn ms-btn--sm ms-btn--ghost">Reply</button>
                </div>

                <div style="margin-left:2.5rem">
                    <div class="ms-card ms-card--flat">
                        <div class="ms-toolbar">
                            <span class="ms-avatar-sm">TM</span>
                            <div><strong>Tom Mercer</strong><p class="ms-stat__meta">44 minutes ago</p></div>
                        </div>
                        <p>Nesting stops here. Any deeper and the indent costs more readable
                            width than the structure is worth.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ms-card ms-card--outline">
        <div class="ms-toolbar">
            <span class="ms-avatar-md">PK</span>
            <textarea class="ms-input" placeholder="Add a comment" rows="2"></textarea>
        </div>
        <div class="ms-toolbar">
            <span class="ms-toolbar__spacer"></span>
            <button class="ms-btn ms-btn--primary ms-btn--sm">Comment</button>
        </div>
    </div>
</div>

More community layouts

Forum index
Forum thread
Social feed
User profile
Chat