Edit on GitHub

Scoreboard

Scoreboard

<div class="scoreboard">
    <div data-control="toolbar">
        <div class="scoreboard-item title-value">
            <h4>Weight</h4>
            <p>100</p>
            <p class="description">unit: kg</p>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Comments</h4>
            <p class="positive">44</p>
            <p class="description">previous month: 32</p>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Latest commenter</h4>
            <p class="wn-icon-star">John Smith</p>
            <p class="description">registered: yes</p>
        </div>
    </div>
</div>

Complete example

<div class="scoreboard">
    <div data-control="toolbar">
        <div class="scoreboard-item control-chart" data-control="chart-pie">
            <ul>
                <li data-color="#95b753">Published <span>84</span></li>
                <li data-color="#e5a91a">Drafts <span>12</span></li>
                <li data-color="#cc3300">Deleted <span>18</span></li>
            </ul>
        </div>

        <div class="scoreboard-item control-chart" data-control="chart-bar">
            <ul>
                <li data-color="#95b753">Published <span>84</span></li>
                <li data-color="#e5a91a">Drafts <span>12</span></li>
                <li data-color="#cc3300">Deleted <span>18</span></li>
            </ul>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Weight</h4>
            <p>100</p>
            <p class="description">unit: kg</p>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Comments</h4>
            <p class="positive">44</p>
            <p class="description">previous month: 32</p>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Length</h4>
            <p class="negative">31</p>
            <p class="description">previous: 42</p>
        </div>

        <div class="scoreboard-item title-value">
            <h4>Latest commenter</h4>
            <p class="wn-icon-star">John Smith</p>
            <p class="description">registered: yes</p>
        </div>

        <div class="scoreboard-item title-value" data-control="goal-meter" data-value="88">
            <h4>goal meter</h4>
            <p>88%</p>
            <p class="description">37 posts remain</p>
        </div>

        <div class="scoreboard-item title-value goal-meter-inverse" data-control="goal-meter" data-value="88">
            <h4>goal meter</h4>
            <p>88%</p>
            <p class="description">37 posts remain</p>
        </div>
    </div>
</div>

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

Setting up a Winter application with Cleavr

Published November 9, 2021
In this tutorial, we describe the steps involved in using the Cleavr server management app to configure and automatically deploy a Winter project straight from your repository.

View this post Read all posts

Latest Winter CMS release

v1.1.7

Released November 13, 2021
3 UX/UI Improvements, 3 API Changes, 6 Bug Fixes, 4 Translation Improvements, 3 Community Improvements

View details View all releases