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>Cards</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>Cards</h1> <a href="http://design.samaritanministries.org/product/components/cards/" target="_blank" class="button button--small button--smooth float-right"> View Guidelines </a> </div> <div class="app-content"> <div class="row"> <div class="column column--full"> <h2 class="example-header no-margin--top">Default Card <button class="button button--transparent button--copy-link" data-id="copyurl" id="Default_Card"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card"> <div class="card--header"> <h3>This is a simple card</h3> </div> <div class="card--content"> <p class="remove-margin--top">Dashing Cards are used to contain and display any type of content.</p> <p class="remove-margin--bottom">This is an example of a simple card. Its little markup makes it very convenient to use.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card"> <div class="card--header"> <h3>This is a simple card</h3> </div> <div class="card--content"> <p class="remove-margin--top">Dashing Cards are used to contain and display any type of content.</p> <p class="remove-margin--bottom">This is an example of a simple card. Its little markup makes it very convenient to use.</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Centered content in a card <button class="button button--transparent button--copy-link" data-id="copyurl" id="Centered_Content_In_A_Card"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card center-align"> <div class="card--header"> <h3>This is a simple card</h3> </div> <div class="card--content"> <p>To center content within a card, apply the <a href="https://github.com/dashframework/dashing/blob/2b4f977910aa2cd9c54309d08aae915af283fda0/sass/modules/typography/_typography.scss#L19-L21">alignment utility class</a> <code class="example-text">.center-align</code> to a <code class="example-text">.card</code> element. If you want more control, apply the utility class to the <code class="example-text">.card--header</code>, <code class="example-text">.card--content</code>, or <code class="example-text">.card--footer</code> elements.</p> </div> <div class="card--footer"> <button class="button button--blue">Centered Button</button> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card center-align"> <div class="card--header"> <h3>This is a simple card</h3> </div> <div class="card--content"> <p>To center content within a card, apply the <a href="https://github.com/dashframework/dashing/blob/2b4f977910aa2cd9c54309d08aae915af283fda0/sass/modules/typography/_typography.scss#L19-L21">alignment utility class</a> <code class="example-text">.center-align</code> to a <code class="example-text">.card</code> element. If you want more control, apply the utility class to the <code class="example-text">.card--header</code>, <code class="example-text">.card--content</code>, or <code class="example-text">.card--footer</code> elements.</p> </div> <div class="card--footer"> <button class="button button--blue">Centered Button</button> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Separation within cards <button class="button button--transparent button--copy-link" data-id="copyurl" id="Seperation_Within_Cards"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card"> <div class="card--header has-border"> <h3>Creating line separation with an <code class="example-text"><hr></code> and <code class="example-text">.has-border</code></h3> </div> <div class="card--content"> <p class="remove-margin--top">Use the <code class="example-text">.has-border</code> class on your <code class="example-text">.card--header</code> or <code class="example-text">.card--footer</code> element to create a line separation between content </p> <hr> <p>Placing an <code class="example-text"><hr></code> within <code class="example-text">.card--header</code>, <code class="example-text">card--content</code>, or <code class="example-text">card--footer</code> will allow you to separate content within your card, while still respecting your <code class="example-text">$grid-gutter</code>.</p> <hr> <p class="remove-margin--bottom">Use the <a href="https://github.com/dashframework/dashing/blob/v1.0.7/sass/base/utilities/_utilities.scss#L12-L16">remove-margin</a> utility classes to remove unnecessary margin in your paragraphs.</p> </div> <hr> <div class="card--content"> <p class="remove-margin">Use an <code class="example-text"><hr></code> outside of <code class="example-text">.card--header</code>, <code class="example-text">card--content</code>, or <code class="example-text">card--footer</code> to span your <code class="example-text"><hr></code> edge to edge.</p> </div> <div class="card--footer has-border"> <button class="button button--primary">Button</button> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card"> <div class="card--header has-border"> <h3>Creating line separation with an <code class="example-text"><hr></code> and <code class="example-text">.has-border</code></h3> </div> <div class="card--content"> <p class="remove-margin--top">Use the <code class="example-text">.has-border</code> class on your <code class="example-text">.card--header</code> or <code class="example-text">.card--footer</code> element to create a line separation between content </p> <hr> <p>Placing an <code class="example-text"><hr></code> within <code class="example-text">.card--header</code>, <code class="example-text">card--content</code>, or <code class="example-text">card--footer</code> will allow you to separate content within your card, while still respecting your <code class="example-text">$grid-gutter</code>.</p> <hr> <p class="remove-margin--bottom">Use the <a href="https://github.com/dashframework/dashing/blob/v1.0.7/sass/base/utilities/_utilities.scss#L12-L16">remove-margin</a> utility classes to remove unnecessary margin in your paragraphs.</p> </div> <hr> <div class="card--content"> <p class="remove-margin">Use an <code class="example-text"><hr></code> outside of <code class="example-text">.card--header</code>, <code class="example-text">card--content</code>, or <code class="example-text">card--footer</code> to span your <code class="example-text"><hr></code> edge to edge.</p> </div> <div class="card--footer has-border"> <button class="button button--primary">Button</button> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Selectable Card <button class="button button--transparent button--copy-link" data-id="copyurl" id="Selectable_Card"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card is-selectable"> <div class="card--header"> <h3>This is a selectable card</h3> </div> <div class="card--footer"> <button class="button button--primary button--transparent">Click me</button> </div> </div> <div class="card is-selectable is-disabled"> <div class="card--header"> <h3>This is a disabled selectable card</h3> </div> <div class="card--footer"> <button class="button button--primary button--transparent">Can't click me</button> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"> <div class="card is-selectable"> <div class="card--header"> <h3>This is a selectable card</h3> </div> <div class="card--footer"> <button class="button button--primary button--transparent">Click me</button> </div> </div>  <div class="card is-selectable is-disabled"> <div class="card--header"> <h3>This is a disabled selectable card</h3> </div> <div class="card--footer"> <button class="button button--primary button--transparent">Can't click me</button> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Dashed Card <button class="button button--transparent button--copy-link" data-id="copyurl" id="Dashed_Card"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card card--dashed"> <div class="card--header"> <h3>This is a dashed card</h3> </div> <div class="card--content"> <p class="remove-margin--top">To use a dashed card, apply <code class="example-text">.card--dashed</code> after <code class="example-text">.card</code>.</p> </div> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card card--dashed"> <div class="card--header"> <h3>This is a dashed card</h3> </div> <div class="card--content"> <p class="remove-margin--top">To use a dashed card, apply <code class="example-text">.card--dashed</code> after <code class="example-text">.card</code>.</p> </div> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Form Elements in a Card <button class="button button--transparent button--copy-link" data-id="copyurl" id="Form_Elements_In_A_Card"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card"> <div class="card--header"> <h3>This is a card with a form</h3> </div> <form> <fieldset class="card--content"> <div class="row row--nested"> <div class="column column--full column--nested"> <label>Label</label> <input type="text"> </div> </div> <div class="row row--nested"> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> </div> <div class="row row--nested"> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> </div> </fieldset> <div class="card--footer"> <button class="button button--green">Submit</button> <button class="button button--secondary button--transparent">Cancel</button> </div> </form> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card"> <div class="card--header"> <h3>This is a card with a form</h3> </div> <form> <fieldset class="card--content"> <div class="row row--nested"> <div class="column column--full column--nested"> <label>Label</label> <input type="text"> </div> </div> <div class="row row--nested"> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> </div> <div class="row row--nested"> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> <div class="column column--half column--nested"> <label>Label</label> <input type="text"> </div> </div> </fieldset> <div class="card--footer"> <button class="button button--green">Submit</button> <button class="button button--secondary button--transparent">Cancel</button> </div> </form> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Card List <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_List"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card" style="overflow: hidden;" data-id="need"> <ul class="card--list is-selectable"> <li class="space-between"><span>Ryan Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Jill Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Jackson Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Emily Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> </ul> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card" style="overflow: hidden;" data-id="need"> <ul class="card--list is-selectable"> <li class="space-between"><span>Ryan Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Jill Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Jackson Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Emily Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> </ul> </div></code> </pre> </div> </div> <<<<<<< HEAD <div class="row"> <div class="column column--full"> <h2 class="example-header">Card List <button class="button button--transparent button--copy-link" data-id="copyurl" id="Card_List"></button></h2> <div class="row example-container"> <div class="column column--full"> <div class="card" style="overflow: hidden;" data-id="need"> <ul class="card--list is-selectable"> <li>Ryan Fitz</li> <li>Jill Fitz</li> <li>Jackson Fitz</li> <li>Emily Fitz</li> </ul> </div> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="card" style="overflow: hidden;" data-id="need"> <ul class="card--list is-selectable"> <li class="space-between"><span>Ryan Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Jill Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Jackson Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> <li class="space-between"><span>Emily Fitz</span><i class="dashing-icon dashing-icon--arrow-right"></i></li> </ul> </div></code> </pre> </div> </div> ======= >>>>>>> 77fa7e12c7ac11b7e3ba9871129ce9658abb90a0 </div> </body> </html>