Sections

Post summary

The post summary component summarizes various content and associated meta data into a highly configurable component.

Classes

Section titled Classes
Class Parent Description
.s-post-summary N/A Base parent container for a post summary
.s-post-summary--stats .s-post-summary Container for the post summary stats
.s-post-summary--stats-item .s-post-summary--stats Individual stat item within the stats container
.has-answers .s-post-summary--stats-item Adds the styling necessary for a question with answers
.has-accepted-answer .s-post-summary--stats-item Adds the styling necessary for a question with accepted answers
.has-bounty .s-post-summary--stats-item Styles the stats item appropriately to display a bounty
.is-warm .s-post-summary--stats-item Styles post stats with a warm color
.is-hot .s-post-summary--stats-item Warmer still, for more popular posts
.is-supernova .s-post-summary--stats-item Paired with a fire icon, these are the most popular stats
.s-post-summary--content .s-post-summary Container for the post summary content
.s-post-summary--content-type .s-post-summary--content A container for various content types, eg. How-to guide on Articles
.s-post-summary--content-title .s-post-summary--content Post title styling
.s-post-summary--content-excerpt .s-post-summary--content An optional content excerpt truncated at 2 lines.
.s-post-summary--content-menu-button .s-post-summary--content An optional button for displaying a post-specific menu.
.s-post-summary--meta .s-post-summary--content A container for post meta data, things like tags and user cards.
.s-post-summary--meta-tags .s-post-summary--meta A container for tags and other taxonomy.

Layout Examples

Section titled Layout Examples

Post summaries are a flexible component capable of previewing various content types—questions or articles. Post summaries are meant to be flexible, allowing for each individual piece to be removed. Let’s start with a full example of a few questions and an article interleaved.

Full

Section titled Full

At their most complete, post summaries are presented in two columns and can contain:

  • Title
  • Excerpt
  • Tags & other categorization
  • Author & creation date
  • Stats & various states
  • Contextual menu

At the smallest breakpoint, the layout will switch to a single column.

<div class="s-post-summary">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item has-answers has-accepted-answer">
            @Svg.CheckmarkSm.With("va-text-bottom")
            … answers
        </div>
        <div class="s-post-summary--stats-item">
            … votes
        </div>
        <div class="s-post-summary--stats-item is-supernova">
            @Svg.FireSm.With("va-text-bottom mrn2")
            … views
        </div>
    </div>
    <div class="s-post-summary--content">
        <div class="s-post-summary--content-type">
            <a href="…" class="s-link s-link__grayscale">
                @Svg… …
            </a>
        </div>
        <a href="…" class="s-post-summary--content-title s-link">…</a>
        <p class="s-post-summary--content-excerpt">…</p>
        <div class="s-post-summary--meta">
            <div class="s-post-summary--meta-tags">
                <a class="s-tag" href="…">…</a>
            </div>

            <div class="s-user-card s-user-card__minimal">
                <a href="…" class="s-avatar s-user-card--avatar">
                    <img class="s-avatar--image" src="…" />
                </a>
                <a href="…" class="s-user-card--link">…</a>
                <ul class="s-user-card--awards">
                    <li class="s-user-card--rep">…</li>
                </ul>
                <time class="s-user-card--time">…</time>
            </div>
        </div>
        <a href="…" class="s-btn s-btn__muted s-post-summary--content-menu-button">
            @Svg.EllipsisVertical
        </a>
    </div>
</div>
5 answers
95 votes
104k views
How to generate the JPA entity Metamodel?

In the spirit of type safety associated with the CriteriaQuery JPA 2.0 also has an API to support Metamodel representation of entities.

java hibernate jpa annotation-processing metamodel
Paul Wright
  • 1350
4 answers
280 votes
10.2k views
+50
Cannot read property 'startsWith' of null in npm install

I am creating my first react-native app. I am attempting to install the react-native command line interface as shown here. I keep getting an error when I type the command to initiate the react-native command line

node-js angular npm javascript
Aaron Shekey
  • 205
1 vote
15 views
1 minute read
1 comment
How-to guide
How to run a product research study

This article aims to guide you through the steps and processes you may want to consider when running research at Stack Overflow. While there are obviously many methods, this guide will focus more interview-style research. For a full list of Product Research templates, guides, and links, see this article.

ux-research
Mithila Fox
  • 323
1 answer
1 vote
7 views
EF core 3.1 - common table for entity and owned type

I’m trying to implement DDD approach in my project but realized that I have too big aggregates and trying to minimize the amount of data loaded from the database. I have an aggregate Order which

c# asp.net entity-framework domain-driven-design
dantey89
  • 1,315

Minimal

Section titled Minimal

There are compact views where it’s appropriate to reduce the amount of information within the post summary. The minimal view forces the smallest breakpoint layout in any context, stacking the meta data on top and putting everything into a single column.

<div class="s-post-summary s-post-summary__minimal">
    <div class="s-post-summary--stats">
        <div class="s-post-summary--stats-item">
            @Svg.CheckmarkSm.With("va-text-bottom")
            … answers
        </div>
        <div class="s-post-summary--stats-item">
            … votes
        </div>
        <div class="s-post-summary--stats-item">
            … views
        </div>
    </div>
    <div class="s-post-summary--content">
        <a href="…" class="s-post-summary--content-title s-link">…</a>
        <div class="s-post-summary--meta">
            <div class="s-post-summary--meta-tags">
                <a class="s-tag" href="…">…</a>
            </div>

            <div class="s-user-card s-user-card__minimal">
                <a href="…" class="s-avatar s-user-card--avatar">
                    <img class="s-avatar--image" src="…" />
                </a>
                <a href="…" class="s-user-card--link">…</a>
                <time class="s-user-card--time">…</time>
            </div>
        </div>
    </div>
</div>
0 answers
0 votes
2 views
Clicking through a viewpager2?
android android-studio android-viewpager2
Callum Osborne
1 answers
0 votes
3 views
What permissions does github_token require for releases from a github action
github-actions
GuiFalourd
0 answers
0 votes
5 views
Parentheses is Invalid Bash
linux bash docker shell
thatkingguy_

Stats examples

Section titled Stats examples

Answered status

Section titled Answered status

Within the stats section of the post summary, posts can have various answered states. A checkmark icon is displayed in questions that have accepted answers.

  • No answers
  • Has answers
  • Has accepted answers
<!-- No answers -->
<div class="s-post-summary--stats-item">
    0 answers
</div>

<!-- Has answers -->
<div class="s-post-summary--stats-item has-answers">
    2 answers
</div>

<!-- Has accepted answers -->
<div class="s-post-summary--stats-item has-answers has-accepted-answer">
    @Svg.CheckmarkSm.With("va-text-bottom")
    5 answers
</div>
0 answers
3 votes
32 views
2 answers
12 votes
145 views
5 answers
95 votes
380 views

Hotness

Section titled Hotness

Post stats also have various states of hotness and display in corresponding shades of orange. A fire icon is added in the supernova level of popularity.

  • Default
  • Warm
  • Hot
  • Supernova
<!-- Default views -->
<div class="s-post-summary--stats-item">
    23 views
</div>

<!-- Warm -->
<div class="s-post-summary--stats-item is-warm">
    1k views
</div>

<!-- Hot -->
<div class="s-post-summary--stats-item is-hot">
    10k views
</div>

<!-- Supernova -->
<div class="s-post-summary--stats-item is-supernova">
    @Svg.FireSm.With("va-text-bottom mrn2")
    100k views
</div>
0 answers
3 votes
23 views
3 answers
28 votes
1k views
10 answers
92 votes
10k views
18 answers
126 votes
100k views
Edit on GitHub