GovLab Styleguide

6.1 Sticky

A sticky can be used to convey an error or some information when the page first loads.

Usage

This produces the sticky at the bottom of the window

Something went wrong

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, in, nobis. Repudiandae ipsum alias enim officiis et consectetur expedita commodi nobis suscipit deleniti. Recusandae architecto minima rerum modi suscipit doloremque!

<!-- #fullwidth -->
<div class="b-page-section">
    <div class="row">
        <p>This produces the sticky at the bottom of the window <i class="material-icons">arrow_downward</i></p>
    </div>
</div>
<div class="b-sticky m-purple">
    <div class="row">
        <div class="column small-12">
            <i class="material-icons e-close js-close-sticky">close</i>
            <h3 class="e-title">Something went wrong</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, in, nobis. Repudiandae <a href="#">ipsum alias enim officiis</a> et consectetur expedita commodi nobis suscipit deleniti. Recusandae architecto minima rerum modi suscipit doloremque!</p>
        </div>
    </div>
</div>

Show All Modifiers

.m-error — error style

.m-red — red style

.m-success — success style

.m-green — green style

.m-alert — alert style

.m-orange — orange style

.m-purple — purple style

.m-blue — blue style

.m-teal — teal style

6.2 Firebase-Editable

Coming Soon

6.3 Data Visualization

6.3.1 Bubble map

Data driven bubble map via D3, loosely based on several examples from Mike Bostock http://bl.ocks.org/mbostock

Usage

Map I

<div class="b-map"></div>
<!-- ----------------------------------------- -->
<!-- ignore, just used to link to example page -->
<a class="b-button" href="map1.html">Map I</a>
<!-- ----------------------------------------- -->

6.3.2 Packlayout map

D3 based bubble map that uses packlayout to nest collections of bubbles into region bounding boxes.

Usage

Map II

<div class="b-pack-map"></div>
<!-- ----------------------------------------- -->
<!-- ignore, just used to link to example page -->
<a class="b-button" href="map2.html">Map II</a>
<!-- ----------------------------------------- -->