Panels, Alerts & Wells

Used to highlight content from the surrounding content.

This is a panel. Synergistically productize emerging partnerships with out-of-the-box methodologies. Assertively plagiarize bricks-and-clicks strategic theme areas rather than long-term high-impact supply chains. Progressively leverage existing fully tested e-tailers before intermandated best practices.

Panels can modify the display of content contained within them, such as tables.

Name	Alter Ego	Primary Superpower	Home
Silver Surfer	Norrin Radd	Power Cosmic	Zenn-La
Nova	Richard Rider	Flight; Superhuman strength, speed, and durability; Expert hand to hand combatant; Xandarian Worldmind; Gravity manipulation	Earth
Adam Warlock		Superhuman strength; stamina; agility; endurance; flight; Energy manipulation	Earth
Gladiator	Kallark	Superhuman strength, speed, stamina, agility, reflexes, and durability; Psionic abilities; Flight	Strontian
Table footer content goes here.

<div class="panel">
    [Panel content here...]
</div>

Compact

Panels can also be compact, with less internal padding.

This is a compact panel. Synergistically productize emerging partnerships with out-of-the-box methodologies. Assertively plagiarize bricks-and-clicks strategic theme areas rather than long-term high-impact supply chains. Progressively leverage existing fully tested e-tailers before intermandated best practices.

<div class="panel panel--compact">
    [Panel content here...]
</div>

Alerts

Alerts are specialized panels used to provide user feedback. Alerts can have different styles, based on their purpose and tone, as well as a close button.

Alert Title Goes Here And It Is A Really, Really Long One

Compellingly scale enterprise-wide internal or organic sources with client-centered alignments. Interactively grow team building content whereas cross-platform convergence. Objectively productize market-driven applications after client-based technologies.

Continually monetize focused infrastructures and quality best practices.
Efficiently network performance based architectures without professional expertise.
Competently simplify best-of-breed thinking whereas sustainable web-readiness.

Progressively underwhelm premium total linkage before cross-media products. Authoritatively generate an expanded array of models without global e-business. Conveniently create market-driven potentialities through client-based internal or "organic" sources.

This Alert Doesn't Have a Close Button

This Is A "Good" Alert

Continually monetize focused infrastructures and quality best practices.
Efficiently network performance based architectures without professional expertise.
Competently simplify best-of-breed thinking whereas sustainable web-readiness.

This Is A "Bad" Alert

Continually monetize focused infrastructures and quality best practices.
Efficiently network performance based architectures without professional expertise.
Competently simplify best-of-breed thinking whereas sustainable web-readiness.

This Is A "Warning" Alert

Continually monetize focused infrastructures and quality best practices.
Efficiently network performance based architectures without professional expertise.
Competently simplify best-of-breed thinking whereas sustainable web-readiness.

This Is An "Info" Alert

Continually monetize focused infrastructures and quality best practices.
Efficiently network performance based architectures without professional expertise.
Competently simplify best-of-breed thinking whereas sustainable web-readiness.

This Is A "Dark" Alert

Continually monetize focused infrastructures and quality best practices.
Efficiently network performance based architectures without professional expertise.
Competently simplify best-of-breed thinking whereas sustainable web-readiness.

<div class="panel panel--alert alert--[style]" role="alert">
	
    <h5 class="alert__title">[Alert title here...]</h5>
	
    <div class="alert__content">
        [Alert content here...]
    </div>
	
    <button type="button" class="button--icon alert__close js-alert__close"></button>
	
</div>

Wells

Wells are inset panels.

This is a well. Synergistically productize emerging partnerships with out-of-the-box methodologies. Assertively plagiarize bricks-and-clicks strategic theme areas rather than long-term high-impact supply chains. Progressively leverage existing fully tested e-tailers before intermandated best practices.

Wells can also be compact.

This is a compact well. Synergistically productize emerging partnerships with out-of-the-box methodologies. Assertively plagiarize bricks-and-clicks strategic theme areas rather than long-term high-impact supply chains. Progressively leverage existing fully tested e-tailers before intermandated best practices.

<div class="panel panel--well">
    [Well content here...]
</div>

<div class="panel panel--well panel--compact">
    [Well content here...]
</div>

Class Reference

Class	Info
panel	Primary container. Should be added to a `div`.
panel--compact	Displays the panel with less padding.
panel--well	Styles the panel as a well, with inset shadows.
panel--alert	Denotes an "alert" style panel.
alert--[style]	Adds styling to the alert. Available Values: "good", "bad", "warning", "info", "dark"
alert__title	Contains the title of the alert. Should be added to a `h5`.
alert__content	Contains the content of the alert. Should be added to a `div`.
alert__close	The alert's close button. Should be added to a `button`.

Introduction

Coding Standards

Class Reference

Foundation

Components

Content Types

Panels, Alerts & Wells

Compact

Alerts

Alert Title Goes Here And It Is A Really, Really Long One

This Alert Doesn't Have a Close Button

This Is A "Good" Alert

This Is A "Bad" Alert

This Is A "Warning" Alert

This Is An "Info" Alert

This Is A "Dark" Alert

Wells

Class Reference