dashing-framework

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/example.css" rel="stylesheet"> <title>Banner</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../../scripts/scripts.js"></script> <script src="../../scripts/prism.js"></script> </head> <body class="example-body"> <div class="main-content"> <div id="sidebarNavigation" class="example-sidebar"></div> <div class="sidebar--overlay is-hidden"></div> <div class="main"> <div class="page-header"> <button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button> <h1>Banner</h1> </div> <div class="app-content"> <div class="row"> <div class="column column--full"> <h2 class="example-header no-margin--top">Page Banner <button class="button button--transparent button--copy-link" data-id="copyurl" id="Page_Banner"></h2> <div class="row example-container"> <div class="column column--full"> <div class="page-banner" style="position: relative;"> <h1>Page Banner</h1> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="page-banner"> <h1>Page Banner</h1> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Page Banner with subhead <button class="button button--transparent button--copy-link" data-id="copyurl" id="Page_Banner_With_Subhead"></h2> <div class="row example-container"> <div class="column column--full"> <div class="page-banner" style="position: relative;"> <h2>Add a Bill to this Need</h2> <h4>Need #481516 – Broken Arm</h4> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="page-banner"> <h2>Add a Bill to this Need</h2> <h4>Need #481516 – Broken Arm</h4> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Default Card Banner <button class="button button--transparent button--copy-link" data-id="copyurl" id="Default_Card_Banner"></h2> <div class="row example-container"> <div class="column column--full"> <div class="card no-margin"> <div class="card-header"> <h3>Default Banner</h3> </div> <div class="card-content"> <div class="card-banner"> <p>This is a card banner</p> </div> </div> <div class="card-footer"> <p>Use a banner within a card to display additional context</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card no-margin"> <div class="card-header"> <h3>Default Banner</h3> </div> <div class="card-content"> <div class="card-banner"> <p>This is a card banner</p> </div> </div> <div class="card-footer"> <p>Use a banner within a card to display additional context</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header" id="cardBannerSuccess">Card Banner with success <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_Banner_With_Success"></h2> <div class="row example-container"> <div class="column column--full"> <div class="card no-margin"> <div class="card-header"> <h3>Success Banner</h3> </div> <div class="card-content"> <div class="card-banner has-success"> <i class="dashing-icon dashing-icon--checkmark-filled"></i> <p>Your file is ready to upload</p> </div> </div> <div class="card-footer"> <p>Use success banners to notify users of a successful action.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card no-margin"> <div class="card-header"> <h3>Success Banner</h3> </div> <div class="card-content"> <div class="card-banner has-success"> <i class="dashing-icon dashing-icon--checkmark-filled"></i> <p>Your file is ready to upload</p> </div> </div> <div class="card-footer"> <p>Use success banners to notify users of a successful action.</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header" id="cardBannerWarning">Card Banner with warning <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_Banner_With_Warning"></h2> <div class="row example-container"> <div class="column column--full"> <div class="card no-margin"> <div class="card-header"> <h3>Warning Banner</h3> </div> <div class="card-content"> <div class="card-banner has-warning"> <i class="dashing-icon dashing-icon--info-filled"></i> <p>You may only submit bill information and upload images for one statement at a time. If you have multiple statements to submit, please enter them separately.</p> </div> </div> <div class="card-footer"> <p>Use warning banners to inform your user of potential errors.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card no-margin"> <div class="card-header"> <h3>Warning Banner</h3> </div> <div class="card-content"> <div class="card-banner has-warning"> <i class="dashing-icon dashing-icon--info-filled"></i> <p>You may only submit bill information and upload images for one statement at a time. If you have multiple statements to submit, please enter them separately.</p> </div> </div> <div class="card-footer"> <p>Use warning banners to inform your user of potential errors.</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header" id="cardBannerError">Card Banner with error <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_Banner_With_Error"></h2> <div class="row example-container"> <div class="column column--full"> <div class="card no-margin"> <div class="card-header"> <h3>Error Banner</h3> </div> <div class="card-content"> <div class="card-banner has-error"> <i class="dashing-icon dashing-icon--alert-filled"></i> <p>You must complete all fields below before continuing</p> </div> </div> <div class="card-footer"> <p>Use error banners to display critical and important information to your user after they have performed an action.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card no-margin"> <div class="card-header"> <h3>Error Banner</h3> </div> <div class="card-content"> <div class="card-banner has-error"> <i class="dashing-icon dashing-icon--alert-filled"></i> <p>You must complete all fields below before continuing</p> </div> </div> <div class="card-footer"> <p>Use error banners to display crucial information to your user.</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header" id="cardBannerButton">Card Banner with button <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_Banner_With_Button"></h2> <div class="row example-container"> <div class="column column--full"> <div class="card no-margin"> <div class="card-header"> <h3>Banner with Button</h3> </div> <div class="card-content"> <div class="card-banner has-button"> <p>This is a card banner</p> <button type="button" class="button button--border button--gray button--smooth" style="margin-left: auto;">Learn More</button> </div> </div> <div class="card-footer"> <p>Use a banner within a card to display additional context. If you have a button make sure to add <code class="example-text">.has-button</code> to reduce the padding.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card no-margin"> <div class="card-header"> <h3>Banner with Button</h3> </div> <div class="card-content"> <div class="card-banner has-button"> <p>This is a card banner</p> <button type="button" class="button button--border button--gray button--smooth" style="margin-left: auto;">Learn More</button> </div> </div> <div class="card-footer"> <p>Use a banner within a card to display additional context. If you have a button make sure to add <code class="example-text">.has-button</code> to reduce the padding.</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header" id="cardBannerLink">Card Banner with link <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_Banner_With_Link"></h2> <div class="row example-container"> <div class="column column--full"> <div class="card no-margin"> <div class="card-header"> <h3>Banner with Link</h3> </div> <div class="card-content"> <div class="card-banner"> <p>This is a card banner with <a>link here</a></p> </div> </div> <div class="card-footer"> <p>Links within in <code class="example-text">.card-banner</code> get an underline border and transition.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card no-margin"> <div class="card-header"> <h3>Banner with Link</h3> </div> <div class="card-content"> <div class="card-banner"> <p>This is a card banner with <a>link here</a></p> </div> </div> <div class="card-footer"> <p>Use a banner within a card to display additional context. If you have a link make sure to add <code class="example-text">.has-link</code> to inherit color and use border-bottom.</p> </div> </div></code> </pre> </div> </div> </div> </body> </html>