<commit_before>---
layout: docs
title: "Ionic Framework - Documentation and Guide"
---

<div class="device-preview ionic">
  <div class="screen-bg"></div>
  <div class="default-screen ionic-body active-preview">
    <div class="content-wrapper">
      <div class="content padding has-header">
      </div>
    </div>
  </div>
</div>


<!-- Ionic Documentation
  ================================================== -->

<div class="docs-section active" id="overview">

  <h1>Structure</h1>

  <p>Before you start building your Ionic app, you'll need to have a few things in place.<p>

  <h3>Doctype and Viewport</h3>
  <p>
    For Ionic to work properly, make sure you have the HTML5 DOCTYPE specified and you are using correct meta viewport settings:
  </p>
{% highlight html %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
{% endhighlight %}
</div>


<!-- Layout
  ================================================== -->
<div class="docs-section" id="layout">
  <h2><a href="#layout">Layout &amp; Structure</a></h2>
  <p>
    Ionic's layout is based off common native app layouts. In order to make your app feel native, you'll need to make sure you follow
    certain HTML markup guidelines. Check out the <a href="/getting-started/#basic-template">Basic Template</a> in the 
    <a href="/getting-started/">Getting started</a> page.
  </p>

</div>



<!-- Header
  ================================================== -->
<div class="docs-section" id="header">

  <h3><a href="#header">Header</a></h3>

  <p>
    Headers are fixed regions at the top of a screen that can contain
    a title label, and <a href="#buttons-headers-footers">left/right buttons</a> for navigation or to carry out varoius actions.
  </p>

  <p>Headers come in a variety of fun flavors:</p>

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-default"><div class="h1 title">bar-default</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-default">
  <h1 class="title">Default</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-secondary"><div class="h1 title">bar-secondary</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-secondary">
  <h1 class="title">Secondary</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-primary"><div class="h1 title">bar-primary</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-primary">
  <h1 class="title">Primary</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-info"><div class="h1 title">bar-info</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-info">
  <h1 class="title">Info</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-success"><div class="h1 title">bar-success</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-success">
  <h1 class="title">Success</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-warning"><div class="h1 title">bar-warning</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-warning">
  <h1 class="title">Warning</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-danger"><div class="h1 title">bar-danger</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-danger">
  <h1 class="title">Danger</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-dark"><div class="h1 title">bar-dark</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-dark">
  <h1 class="title">Dark</h1>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Header</div>
    </div>
  </div>

</div>



<!-- Sub Header
  ================================================== -->
<div class="docs-section" id="subheader">

  <h3><a href="#subheader">Sub Header</a></h3>
  <p>
    A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers. Have a look at 
    <a href="#button-bar">Button Bars</a> to get other ideas on how it could be used.
  </p>
{% highlight html %}
<div class="bar bar-header bar-default">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader bar-default">
  <h2 class="title">Sub Header</h2>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Header</div>
    </div>
    <div class="bar bar-subheader bar-secondary">
      <div class="h2 title">Sub Header</div>
    </div>
  </div>

</div>



<!-- Content
  ================================================== -->
<div class="docs-section" id="content">

  <h3><a href="#content">Content</a></h3>

  <p>
    The content area in Ionic is the scrollable viewport of your app.
    While your headers and footers will be fixed to the top and 
    bottom, respectively, the content area will fill the remaining available space.
  </p>
  <p>
    The content area also sits "behind" the header and footer to provide
    a see-through effect. Primary content element should have the 
    <code>content</code> class applied.
    No thrills here other than default appearances for the various type element.
  </p>
  <p>
    <strong>Note:</strong> The containing <code>content</code> element also has the
    <code>padding</code> class applied (more about <a href="#utility">padding</a> is
    discussed a few sections later).
  </p>

{% highlight html %}
<div class="content-wrapper">
  <div class="content padding">
    ...
  </div>
</div>
{% endhighlight %}

  <div class="doc-example">
    <div class="content-wrapper">
      <div class="content padding">
        <h1>I'm an H1!</h1>
        <h2>I'm an H2!</h2>
        <h3>I'm an H3!</h3>
        <h4>I'm an H4!</h4>
        <h5>I'm an H5!</h5>
        <h6>I'm an H6!</h6>
        <p>I'm a paragraph with a <a href="#">link</a>!</p>
      </div>
    </div>
  </div>

</div>



<!-- Footer
  ================================================== -->
<div class="docs-section" id="footer">

  <h3><a href="#footer">Footer</a></h3>

  <p>
    Footers are regions at the bottom of a screen that can contain varoius types of content.
  </p>

{% highlight html %}
<div class="bar bar-footer">
  ...
</div>
{% endhighlight %}

  <p>
    Footers have the same color options as the headers, just use <code>bar-footer</code> instead of <code>bar-header</code>.
  </p>

  <div class="doc-example ionic">
    <div class="bar bar-footer bar-secondary">
      <div class="h1 title">Footer</div>
    </div>
  </div>

</div>



<!-- Utility Classes
  ================================================== -->
<div class="docs-section" id="utility">

  <h3><a href="#utility">Utility Classes</a></h3>

  <p>
    Many components in Ionic purposely have both padding and margin reset set to zero.
    In many instances apps will have components bleed to the edge of the screen, 
    and by starting each component at zero, developers can easily control padding throughout the app. 
  </p>
  <p>
    The <code>padding</code> utility classes can be reused to give any element's content some breathing room, 
    meaning it adds a default <code>15px</code> between the outer box of the element and its inner content. 
    The following classes are not required for any element, but may be helpful with your designs. 
  </p>
  <ul>
    <li>
      <code>padding</code> Adds padding around every side.
    </li>
    <li>
      <code>padding-vertical</code> Adds padding to the top and bottom.
    </li>
    <li>
      <code>padding-horizontal</code> Adds padding to the left and right.
    </li>
    <li>
      <code>padding-top</code> Adds padding to the top.
    </li>
    <li>
      <code>padding-right</code> Adds padding to the right.
    </li>
    <li>
      <code>padding-bottom</code> Adds padding to the bottom.
    </li>
    <li>
      <code>padding-left</code> Adds padding to the left.
    </li>
  </ul>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Utility Classes: Padding</div>
    </div>
    <div class="content has-header padding">
      
      <div class="padding-example">
        <div></div>
      </div>

      <p style="margin:0 24px">
        The gray square represents an element, and the blue square represents
        the element's content when <code>padding</code> has been applied.
      </p>

    </div>
  </div>

</div>



<!-- Components
  ================================================== -->
<div class="docs-section" id="components">

  <h2><a href="#components">Components</a></h2>

  <p>
    Ionic comes with tons of CSS and Javascript components found in most modern mobile devices. We've made sure to include some of the most popular mobile paradigms and interactions such as, <a href="#buttons">Buttons</a>, <a href="#navbar">Nav Bars</a>, <a href="#cards">Cards</a>, <a href="#forms">Forms</a>, and <a href="#action-sheets">Action Sheets</a>. Pick and choose what you need, customize to your heart's desire.
  </p>

</div>



<!-- Buttons
  ================================================== -->
<div class="docs-section" id="buttons">

  <h3><a href="#buttons">Buttons</a></h3>

  <div class="sub-links">
    <a href="#block-buttons">Block</a>
    <a href="#full-buttons">Full Width</a>
    <a href="#outlined-buttons">Outline</a>
    <a href="#clear-buttons">Clear</a>
    <a href="#buttons-headers-footers">Headers</a>
    <a href="#clear-buttons-headers">Clear Headers</a>
    <a href="#button-bar">Button Bars</a>
  </div>

  <p>
    Ah, the Button, an essential part of any mobile experience. Buttons are commonly used to send/retrieve data and form navigation between screens. Like the <a href="#header">Header</a>, they come in the full spectrum of Ionic's default color options.
  </P>
  <p>
    Buttons can be displayed inline, block, outlined, icon-only, or clear (text only), and come in 
    many different styles. By default a button has <code>display: inline-block</code>  
    applied. Other options include <code>block</code> buttons for a full width.
  </p>

{% highlight html %}
<button class="button button-default">Default</button>

<button class="button button-secondary">Secondary</button>

<button class="button button-primary">Primary</button>

<button class="button button-info">Info</button>

<button class="button button-success">Success</button>

<button class="button button-warning">Warning</button>

<button class="button button-danger">Danger</button>

<button class="button button-dark">Dark</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header padding">
        <p>
          <button class="button button-default">button-default</button>
        </p>
        <p>
          <button class="button button-secondary">button-secondary</button>
        </p>
        <p>
          <button class="button button-primary">button-primary</button>
        </p>
        <p>
          <button class="button button-info">button-info</button>
        </p>
        <p>
          <button class="button button-success">button-success</button>
        </p>
        <p>
          <button class="button button-warning">button-warning</button>
        </p>
        <p>
          <button class="button button-danger">button-danger</button>
        </p>
        <p>
          <button class="button button-dark">button-dark</button>
        </p>
      </div>
    </div>
  </div>

</div>



<!-- Block Buttons
  ================================================== -->
<div class="docs-section" id="block-buttons">

  <h3><a href="#block-buttons">Block Buttons</a></h3>
  <p>
    Adding <code>block</code> to a button applies <code>display: block</code> display. 
    A block button will however go 100% of its parent's width.
    In the example, the button's containing content element also has <code>padding</code> applied,
    so there is some breathing room between the edge of the device and the buttons.
  </p>

{% highlight html %}
<button class="button block button-primary">
  Block Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Block Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content padding has-header">
        <button class="button block button-default">button-default</button>
        <button class="button block button-secondary">button-secondary</button>
        <button class="button block button-primary">button-primary</button>
        <button class="button block button-info">button-info</button>
        <button class="button block button-success">button-success</button>
        <button class="button block button-warning">button-warning</button>
        <button class="button block button-danger">button-danger</button>
        <button class="button block button-dark">button-dark</button>
      </div>
    </div>
  </div>

</div>



<!-- Full Width Block Buttons
  ================================================== -->
<div class="docs-section" id="full-buttons">

  <h3><a href="#full-buttons">Full Width Block Buttons</a></h3>
  <p>
    Adding <code>button-full</code> to a button not only applies <code>display: block</code>,
    but also removes borders on the left and right, and any border-radius which may be applied. 
    This style is useful when th button should stretch across the entire width of the display.
    Additionally, the button's parent element <em>does not</em> have <code>padding</code> applied.
  </p>

{% highlight html %}
<button class="button button-full button-primary">
  Full Width Block Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Full Width Block Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        <button class="button button-full button-default">button-default</button>
        <button class="button button-full button-secondary">button-secondary</button>
        <button class="button button-full button-primary">button-primary</button>
        <button class="button button-full button-info">button-info</button>
        <button class="button button-full button-success">button-success</button>
        <button class="button button-full button-warning">button-warning</button>
        <button class="button button-full button-danger">button-danger</button>
        <button class="button button-full button-dark">button-dark</button>
      </div>
    </div>
  </div>

</div>



<!-- Outlined Buttons
  ================================================== -->
<div class="docs-section" id="outlined-buttons">

  <h3><a href="#outlined-buttons">Outlined Buttons</a></h3>

  <p>
    Use <code>button-outline</code> to apply an outline button style, which also
    has a transparent background. 
  </p>
  <p>
    <strong>Note:</strong> The text and border will take the color of the applied button style, meaning 
    <code>button-primary</code> will result in blue text and border, with a transparent background.
  </p>

{% highlight html %}
<button class="button button-outline button-primary">
  Outlined Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Outlined Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content padding has-header">
        <p>
          <button class="button button-outline button-default">button-default</button>
        </p>
        <p>
          <button class="button button-outline button-secondary">button-secondary</button>
        </p>
        <p>
          <button class="button button-outline button-primary">button-primary</button>
        </p>
        <p>
          <button class="button button-outline button-info">button-info</button>
        </p>
        <p>
          <button class="button button-outline button-success">button-success</button>
        </p>
        <p>
          <button class="button button-outline button-warning">button-warning</button>
        </p>
        <p>
          <button class="button button-outline button-danger">button-danger</button>
        </p>
        <p>
          <button class="button button-outline button-dark">button-dark</button>
        </p>
      </div>
    </div>
  </div>

</div>



<!-- Clear Buttons
  ================================================== -->
<div class="docs-section" id="clear-buttons">

  <h3><a href="#clear-buttons">Clear Buttons</a></h3>

  <p>
    Add <code>button-clear</code> to remove the border and make the text stand out.
  </p>
  <p>
    <strong>Note:</strong> The text will take the color of the applied button style, meaning 
    <code>button-primary</code> will result in blue text and no border instead of a blue background.
  </p>

{% highlight html %}
<button class="button button-clear button-primary">
  Clear Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Clear Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content padding has-header">
        <p>
          <button class="button button-clear button-default">button-default</button>
        </p>
        <p>
          <button class="button button-clear button-secondary">button-secondary</button>
        </p>
        <p>
          <button class="button button-clear button-primary">button-primary</button>
        </p>
        <p>
          <button class="button button-clear button-info">button-info</button>
        </p>
        <p>
          <button class="button button-clear button-success">button-success</button>
        </p>
        <p>
          <button class="button button-clear button-warning">button-warning</button>
        </p>
        <p>
          <button class="button button-clear button-danger">button-danger</button>
        </p>
        <p>
          <button class="button button-clear button-dark">button-dark</button>
        </p>
      </div>
    </div>
  </div>

</div>



<!-- Buttons in Headers/Footers
  ================================================== -->
<div class="docs-section" id="buttons-headers-footers">

  <h3><a href="#buttons-headers-footers">Buttons in Headers</a></h3>

  <p>
    When buttons are placed in headers or footers, they take the style of the 
    bar by default, so you don't have to use the extra style classes. 
    To change this, add the desired style class.
  </p>

{% highlight html %}
<div class="bar bar-header bar-default">
  <button class="button">
    <i class="icon-navicon"></i>
  </button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">
    Edit
  </button>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="padding">
      <div class="bar bar-header bar-default">
        <button class="button">
          <i class="icon-navicon"></i>
        </button>
        <div class="h1 title">Header Buttons</div>
        <button class="button pull-right">
          Edit
        </button>
      </div>
    </div>
  </div>

</div>



<!-- Clear Buttons in Headers
  ================================================== -->
<div class="docs-section" id="clear-buttons-headers">

  <h3><a href="#clear-buttons-headers">Clear Buttons in Headers</a></h3>

  <p>
    For a more minimal approach to header buttons, simply add the <code>button-clear</code> classname to remove the background button color and border.
  </p>

{% highlight html %}
<button class="button button-icon">
  <div class="bar bar-header bar-default">
    <button class="button button-icon">
      <i class="icon-navicon"></i>
    </button>
    <h1 class="title">Header Buttons</div>
    <button class="button button-clear button-primary">
      Edit
    </button>
  </div>
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="padding">
      <div class="bar bar-header bar-default">
        <button class="button button-icon">
          <i class="icon-navicon"></i>
        </button>
        <div class="h1 title">Header Buttons</div>
        <button class="button button-clear button-primary">
          Edit
        </button>
      </div>
    </div>
  </div>

</div>



<!-- Button Bar
  ================================================== -->
<div class="docs-section" id="button-bar">

  <h3><a href="#button-bar">Button Bar</a></h3>
  <p>
    Buttons can also be easily grouped together using the <code>button-bar</code> classname. 
    In this example, a button bar was added to the default header bar, as well as in the main content area of the screen.
  </p>

{% highlight html %}
<div class="button-bar">
  <a class="button">Success</a>
  <a class="button">Warning</a>
  <a class="button">Danger</a>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="button-bar">
        <a class="button">Success</a>
        <a class="button">Warning</a>
        <a class="button">Danger</a>
      </div>
    </div>
  </div>

</div>



<!-- List
  ================================================== -->
<div class="docs-section" id="list">

  <h3><a href="#list">List</a></h3>

  <div class="sub-links">
    <a href="#list-dividers">Divider</a>
    <a href="#list-icons">Icons</a>
    <a href="#list-thumbnails">Thumbnails</a>
  </div>

  <p>
    The List is a common and simple way of displaying... that's right, a list. This is a widely 
    used interface across in most current mobile OS's, and can include content ranging from basic 
    text all the way to buttons, toggles, icons, and thumbnails.
  </p>
  <p>
    The list view is a very versitile and powerful component used to display lists of 
    data. List views support various interaction modes such as editing, swipe to edit,
    drag to reorder, and pull to refresh. List views can be used in virtual mode to efficiently handle
    large lists of data by only rendering the items the user can see.
  </p>
  <p>
    Both the list, which contains the list items, and the list items themselves
    can be any HTML element. The containing element requires the <code>list</code> 
    class and each list item requires the <code>list-item</code> class.
  </p>

{% highlight html %}
<list
  is-editing=".."
  on-refresh-holding=".."
  on-refresh-opening=".."
  on-refresh=".."
  animation=".."
  delete-icon=".."
  reorder-icon="..">
    <!-- items here -->
    <list-item ng-repeat="item in items">
    </list-item>
</list>
{% endhighlight %}

  <p>
    Lists have many options that can be configured and events that can be handled:
  </p>
  <table class="table">
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>virtual</td>
        <td><b>boolean</b></td>
        <td>false</b>
        <td>Whether to virtually handle list items, offloading items that are not in the viewport. This option
          may have unintended side-effects for certain applications, so it is not enabled by default. However,
          it is recommended for large lists.
        </td>
      </tr>
      <tr>
        <td>is-editing</td>
        <td><b>boolean</b></td>
        <td>false</b>
        <td>A boolean value indicating whether to put the list in "edit mode"</td>
      </tr>
      <tr>
        <td>on-refresh</td>
        <td><b>function</b></td>
        <td></b>
        <td>Called when the list has been pulled to refresh and is now refreshing.</td>
      </tr>
      <tr>
        <td>on-refresh-opening</td>
        <td><b>function(ratio)</b></td>
        <td></b>
        <td>A callback triggered as the list is being pulled to refresh. This triggers for every drag event and sends the
          ratio of how far down the list is being pulled before it refreshes (between 0 and 1).</td>
      </tr>
      <tr>
        <td>on-refresh-holding</td>
        <td><b>function</b></td>
        <td></b>
        <td>A callback triggered when the list is being pulled down and held before refreshing.</td>
      </tr>
      <tr>
        <td>animation</td>
        <td><b>className</b></td>
        <td></b>
        <td>An animation class to apply on the list for animating children.</td>
      </tr>
      <tr>
        <td>delete-icon</td>
        <td><b>icon className</b></td>
        <td>icon-minus-circled</b>
        <td>The class name of the icon to show for all deletion items. We recommend the default
          <a href="http://ionicons.com/">ionicon</a> <b>icon-minus-circled</b>
        </td>
      </tr>
      <tr>
        <td>reorder-icon</td>
        <td><b>icon className</b></td>
        <td>icon-navicon</td>
        <td>The class name of the icon to show for reordering. The recommended default is
          <b>icon-navicon</b>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        
        <ul class="list">
          <li class="list-item">
           <div class="list-item-content">
            <NAME>
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Harvey
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Henry
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Tobias
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Buster
           </div>
          </li>
        </ul>

      </div>
    </div>
  </div>


<!-- List Items
  ================================================== -->

  <h4>List Items</h4>
  
  <p>
    List items make up the bulk of lists. List items can be swiped,
    reordered, deleted, and selected. They support hidden button bars
    that are exposed after swiping, and trigger events on deletion and
    selection.
  </p>
  <p>
    List items also support embedded form elements and right-hand icons.
  </p>

{% highlight html %}
<list-item 
  buttons="item.buttons"
  can-delete="true"
  can-reorder="true"
  can-swipe="true"
  on-delete="deleteProject(project)"
  on-select="selectProject(project)">
  <!-- item content -->
</list-item>
{% endhighlight %}
  <p>
    The content specified in the item content area will be the main content of the displayed item.
    Make sure to add an icon at the end if you want a right-handed icon.
  </p>
  <table class="table">
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Type</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>buttons</td>
        <td><b>Array</b></td>
        <td>Buttons is an array of objects specifying the hidden buttons show underneath an item when swiped. The format of each
          button object is:
<code>
<pre>
{
  text: 'Delete',
  type: 'button-danger',
  buttonClicked: function(item) {},
}
</pre>
</code></td>
      </tr>
      <tr>
        <td>can-delete</td>
        <td><b>boolean</b></td>
        <td>Whether this item can be deleted by the user.</td>
      </tr>
      <tr>
        <td>can-reorder</td>
        <td><b>boolean</b></td>
        <td>Whether this item can be reordered.</td>
      </tr>
      <tr>
        <td>can-swipe</td>
        <td><b>boolean</b></td>
        <td>Wheter this item can be swiped to expose the hidden buttons.</td>
      </tr>
      <tr>
        <td>on-delete</td>
        <td><b>function</b></td>
        <td>Called when an item is deleted by the user.</td>
      </tr>
      <tr>
        <td>on-select</td>
        <td><b>function</b></td>
        <td>Called when an item is selected or "tapped" by the user.</td>
      </tr>
    </tbody>
  </table>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Items</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        ...
      </div>
    </div>
  </div>

</div>



<!-- List Dividers
  ================================================== -->
<div class="docs-section" id="list-dividers">

  <h3><a href="#list-dividers">List Dividers</a></h3>

  <p>
    List items can also be dividers to organize and group the list items. Use the <code>list-divider</code>
    class to create a divider for any child element of the list. 
    By default list item dividers will have a different background color and font-weight,
    but this is highly customizable. 
  </p>

{% highlight html %}
<div class="list">

  <div class="list-divider">
    Candy Bars
  </div>

  <a class="list-item" href="#">
   <div class="list-item-content">
    Butterfinger
   </div>
  </a>

  ...

</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Dividers</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        
        <div class="list">
          
          <div class="list-divider">
            Candy Bars
          </div>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Butterfinger
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Kit Kat
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Snickers
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Twix
           </div>
          </a>
          
          <div class="list-divider">
            Hard Candy
          </div>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Jolly Rancher
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            LifeSavers
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Skittles
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Gobstoppers
           </div>
          </a>

        </div>

      </div>
    </div>
  </div>

</div>



<!-- List Icons
  ================================================== -->
<div class="docs-section" id="list-icons">

  <h3><a href="#list-icons">List Icons</a></h3>

  <p>
    Lists can have icons assigned either to the left and/or right side of each list item,
    and the alignment classes should be assigned to each <code>list-item</code> element.
  </p>
  <p>
    Use <code>list-icon-left</code> to line up the icon to the left, and <code>list-icon-right</code>
    to set the icon to the right. When a list item has an icon on both sides then both classes
    will need to be applied.
  </p>
  <p>
    In the example, the first list item only has a left aligned icon. The second item has both 
    left and right side icons, and the third only has a right side icon. Additionally, the first
    icon has <code>fill-icon</code> applied so it inverts the background and foreground.
  </p>
  <p>
    This example uses an <code>&lt;a&gt;</code> element for each item, which allows the entire 
    list item to be tappable. Note that both a list and its list items can be any element, meaning
    they're not restricted to just <code>&lt;ul&gt;</code> with <code>&lt;li&gt;</code> elements.
  </p>

{% highlight html %}
<div class="list">

  <a class="list-item list-icon-left">
   <div class="list-item-content">
    <i class="icon-gear-a fill-icon"></i>
    Settings
   </div>
  </a>

  <a class="list-item list-icon-left">
   <div class="list-item-content">
    <i class="icon-wifi"></i>
    Wifi
   </div>
  </a>

  <a class="list-item">
   <div class="list-item-content">
    Advanced
    <i class="icon-arrow-right-c"></i>
   </div>
  </a>

  <a class="list-item list-icon-right">
   <div class="icon-document-text">
    More Info
    <i class="icon-arrow-right-c"></i>
   </div>
  </a>

</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Icons</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        
        <div class="list">

          <div class="list-divider">
            Control Panel
          </div>

          <a class="list-item list-icon-left">
           <div class="list-item-content">
            <i class="icon-gear-a fill-icon"></i>
            Settings
           </div>
          </a>

          <a class="list-item list-icon-left">
           <div class="list-item-content">
            <i class="icon-wifi"></i>
            Wifi
           </div>
          </a>

          <a class="list-item list-icon-left list-icon-right">
           <div class="list-item-content">
            <i class="icon-help"></i>
            More Info
            <i class="icon-arrow-right-c"></i>
           </div>
          </a>

          <a class="list-item list-icon-right">
           <div class="list-item-content">
            Advanced
            <i class="icon-chevron-right"></i>
           </div>
          </a>

        </div>

      </div>
    </div>
  </div>

</div>



<!-- List Thumbnails
  ================================================== -->
<div class="docs-section" id="list-thumbnails">

  <h3><a href="#list-thumbnails">List Thumbnails</a></h3>

  <p>
    List Thumbnails are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail style list, use the <code>list-thumbnail</code> classname. In this example, we are using images of album covers.
  </p>

{% highlight html %}
<div class="list">

    <a class="list-item list-thumbnail" href="#">
      <div class="list-item-content">
        <img src="cover.jpg">
        <h2>Pretty Hate Machine</h2>
        <p>Nine Inch Nails</p>
      </div>
    </a>

    ...

</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Thumbnails</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">

        <div class="list">

          <div class="list-divider">
            Albums
          </div>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
              <h2>Nine Inch Nailes</h2>
              <p>Pretty Hate Machine</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
              <h2>Smashing Pumpkins</h2>
              <p>Siamese Dream</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
              <h2>Nirvana</h2>
              <p>Nevermind</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
              <h2>Beastie Boys</h2>
              <p>License To Ill</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
              <h2>Green Day</h2>
              <p>Dookie</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/41-iL07GstL.jpg">
              <h2>Stone Temple Pilots</h2>
              <p>Core</p>
            </div>
          </a>

        </div>

      </div>
    </div>
  </div>

</div>



<!-- Tab Bar
  ================================================== -->
<div class="docs-section" id="tabbar">

  <h3><a href="#tabbar">Tab Bar</a></h3>

  <p>
    The Tab Bar is a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
  </p>

{% highlight html %}
<div class="tabs">
  <a class="tab-item">
    <i class="icon-home"></i>
    Item 1
  </a>
  <a class="tab-item">
    <i class="icon-home"></i>
    Item 2
  </a>
  <a class="tab-item">
    <i class="icon-home"></i>
    Item 3
  </a>
</div>
{% endhighlight %}

  <p>
    The Tab Bar can be styled to match the standard colors. Use these classes to change the
    color of the tab bar:
    <code>tabs-default</code>
    <code>tabs-secondary</code>
    <code>tabs-primary</code>
    <code>tabs-info</code>
    <code>tabs-success</code>
    <code>tabs-warning</code>
    <code>tabs-danger</code>
    <code>tabs-dark</code>
  </p>

  <div class="doc-example ionic">
    <div class="tabs">
      <a class="tab-item">
        <i class="icon-home"></i>
        Item 1
      </a>
      <a class="tab-item">
        <i class="icon-home"></i>
        Item 2
      </a>
      <a class="tab-item">
        <i class="icon-home"></i>
        Item 3
      </a>
    </div>
  </div>

</div>


<!-- Side Menu
  ================================================== -->
<div class="docs-section" id="sidemenu">

  <h3><a href="#sidemenu">Side Menus</a></h3>

  <table class="table table-condensed table-bordered module-info">
    <tr>
      <td>Module</td><td><code>ionic.ui.sideMenu</code></td>
    </tr>
    <tr>
      <td>Directive</td><td><code>side-menu-ctrl (attribute or class)</code></td>
    </tr>
  </table>
  <p>
    Side Menus are exposable side menus seen at various tiems in popular
    apps like Path and Facebook.
    Each menu can be exposed through dragging the content area left and/or right, or through a Javascript API.
  </p>

{% highlight html %}
<div side-menu-ctrl>
  <div class="full-section" side-menu-content>
    <h1>Content area</h1>
  </div>
  <menu side="left">
    <h2>Left Menu</h2>
  </menu>
  <menu side="right">
    <h2>Right Menu</h2>
  </menu>
</div>
{% endhighlight %}

</div>



<!-- Cards
  ================================================== -->
<div class="docs-section" id="cards">

  <h3><a href="#cards">Cards</a></h3>

  <p>
    ...
  </p>

{% highlight html %}
<div class="">
  ...
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Cards</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header padding">
        
        <div class="card">
          <div class="card-header">
            Card Header
          </div>
          <div class="card-body">
            Card Body
          </div>
          <div class="card-footer">
            Card Footer
          </div>
        </div>

      </div>
    </div>
  </div>

</div>



<!-- Forms
  ================================================== -->
<div class="docs-section" id="forms">

  <h3><a href="#forms">Forms &amp; Inputs</a></h3>

  <p>
    An <code>input-group</code> is used to group related input elements. An <code>input-row</code>
    is used to designate each individual input field and it's associated label. By default each 
    input row will fill 100% of the width of its parent element. However, you can use the <a href="#utility">utility</a>
    classnames of <code>inset</code> and <code>padding</code> to change their placement.
  </p>
  <p>
    Ionic prefers to create an <code>input-row</code> out of the <code>&lt;label&gt;</code> element 
    so that when any part of the row is tapped then the input receives focus.
  </p>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Forms</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header padding-top">
        <div class="input-group">
          <label class="input-row">
            <input type="text" placeholder="<NAME>">
          </label><commit_msg>form sublinks<commit_after>---
layout: docs
title: "Ionic Framework - Documentation and Guide"
---

<div class="device-preview ionic">
  <div class="screen-bg"></div>
  <div class="default-screen ionic-body active-preview">
    <div class="content-wrapper">
      <div class="content padding has-header">
      </div>
    </div>
  </div>
</div>


<!-- Ionic Documentation
  ================================================== -->

<div class="docs-section active" id="overview">

  <h1>Structure</h1>

  <p>Before you start building your Ionic app, you'll need to have a few things in place.<p>

  <h3>Doctype and Viewport</h3>
  <p>
    For Ionic to work properly, make sure you have the HTML5 DOCTYPE specified and you are using correct meta viewport settings:
  </p>
{% highlight html %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
{% endhighlight %}
</div>


<!-- Layout
  ================================================== -->
<div class="docs-section" id="layout">
  <h2><a href="#layout">Layout &amp; Structure</a></h2>
  <p>
    Ionic's layout is based off common native app layouts. In order to make your app feel native, you'll need to make sure you follow
    certain HTML markup guidelines. Check out the <a href="/getting-started/#basic-template">Basic Template</a> in the 
    <a href="/getting-started/">Getting started</a> page.
  </p>

</div>



<!-- Header
  ================================================== -->
<div class="docs-section" id="header">

  <h3><a href="#header">Header</a></h3>

  <p>
    Headers are fixed regions at the top of a screen that can contain
    a title label, and <a href="#buttons-headers-footers">left/right buttons</a> for navigation or to carry out varoius actions.
  </p>

  <p>Headers come in a variety of fun flavors:</p>

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-default"><div class="h1 title">bar-default</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-default">
  <h1 class="title">Default</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-secondary"><div class="h1 title">bar-secondary</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-secondary">
  <h1 class="title">Secondary</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-primary"><div class="h1 title">bar-primary</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-primary">
  <h1 class="title">Primary</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-info"><div class="h1 title">bar-info</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-info">
  <h1 class="title">Info</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-success"><div class="h1 title">bar-success</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-success">
  <h1 class="title">Success</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-warning"><div class="h1 title">bar-warning</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-warning">
  <h1 class="title">Warning</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-danger"><div class="h1 title">bar-danger</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-danger">
  <h1 class="title">Danger</h1>
</div>
{% endhighlight %}

  <div class="ionic ionic-example">
    <div class="bar bar-header bar-dark"><div class="h1 title">bar-dark</div></div>
  </div>
{% highlight html %}
<div class="bar bar-header bar-dark">
  <h1 class="title">Dark</h1>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Header</div>
    </div>
  </div>

</div>



<!-- Sub Header
  ================================================== -->
<div class="docs-section" id="subheader">

  <h3><a href="#subheader">Sub Header</a></h3>
  <p>
    A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers. Have a look at 
    <a href="#button-bar">Button Bars</a> to get other ideas on how it could be used.
  </p>
{% highlight html %}
<div class="bar bar-header bar-default">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader bar-default">
  <h2 class="title">Sub Header</h2>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Header</div>
    </div>
    <div class="bar bar-subheader bar-secondary">
      <div class="h2 title">Sub Header</div>
    </div>
  </div>

</div>



<!-- Content
  ================================================== -->
<div class="docs-section" id="content">

  <h3><a href="#content">Content</a></h3>

  <p>
    The content area in Ionic is the scrollable viewport of your app.
    While your headers and footers will be fixed to the top and 
    bottom, respectively, the content area will fill the remaining available space.
  </p>
  <p>
    The content area also sits "behind" the header and footer to provide
    a see-through effect. Primary content element should have the 
    <code>content</code> class applied.
    No thrills here other than default appearances for the various type element.
  </p>
  <p>
    <strong>Note:</strong> The containing <code>content</code> element also has the
    <code>padding</code> class applied (more about <a href="#utility">padding</a> is
    discussed a few sections later).
  </p>

{% highlight html %}
<div class="content-wrapper">
  <div class="content padding">
    ...
  </div>
</div>
{% endhighlight %}

  <div class="doc-example">
    <div class="content-wrapper">
      <div class="content padding">
        <h1>I'm an H1!</h1>
        <h2>I'm an H2!</h2>
        <h3>I'm an H3!</h3>
        <h4>I'm an H4!</h4>
        <h5>I'm an H5!</h5>
        <h6>I'm an H6!</h6>
        <p>I'm a paragraph with a <a href="#">link</a>!</p>
      </div>
    </div>
  </div>

</div>



<!-- Footer
  ================================================== -->
<div class="docs-section" id="footer">

  <h3><a href="#footer">Footer</a></h3>

  <p>
    Footers are regions at the bottom of a screen that can contain varoius types of content.
  </p>

{% highlight html %}
<div class="bar bar-footer">
  ...
</div>
{% endhighlight %}

  <p>
    Footers have the same color options as the headers, just use <code>bar-footer</code> instead of <code>bar-header</code>.
  </p>

  <div class="doc-example ionic">
    <div class="bar bar-footer bar-secondary">
      <div class="h1 title">Footer</div>
    </div>
  </div>

</div>



<!-- Utility Classes
  ================================================== -->
<div class="docs-section" id="utility">

  <h3><a href="#utility">Utility Classes</a></h3>

  <p>
    Many components in Ionic purposely have both padding and margin reset set to zero.
    In many instances apps will have components bleed to the edge of the screen, 
    and by starting each component at zero, developers can easily control padding throughout the app. 
  </p>
  <p>
    The <code>padding</code> utility classes can be reused to give any element's content some breathing room, 
    meaning it adds a default <code>15px</code> between the outer box of the element and its inner content. 
    The following classes are not required for any element, but may be helpful with your designs. 
  </p>
  <ul>
    <li>
      <code>padding</code> Adds padding around every side.
    </li>
    <li>
      <code>padding-vertical</code> Adds padding to the top and bottom.
    </li>
    <li>
      <code>padding-horizontal</code> Adds padding to the left and right.
    </li>
    <li>
      <code>padding-top</code> Adds padding to the top.
    </li>
    <li>
      <code>padding-right</code> Adds padding to the right.
    </li>
    <li>
      <code>padding-bottom</code> Adds padding to the bottom.
    </li>
    <li>
      <code>padding-left</code> Adds padding to the left.
    </li>
  </ul>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Utility Classes: Padding</div>
    </div>
    <div class="content has-header padding">
      
      <div class="padding-example">
        <div></div>
      </div>

      <p style="margin:0 24px">
        The gray square represents an element, and the blue square represents
        the element's content when <code>padding</code> has been applied.
      </p>

    </div>
  </div>

</div>



<!-- Components
  ================================================== -->
<div class="docs-section" id="components">

  <h2><a href="#components">Components</a></h2>

  <p>
    Ionic comes with tons of CSS and Javascript components found in most modern mobile devices. We've made sure to include some of the most popular mobile paradigms and interactions such as, <a href="#buttons">Buttons</a>, <a href="#navbar">Nav Bars</a>, <a href="#cards">Cards</a>, <a href="#forms">Forms</a>, and <a href="#action-sheets">Action Sheets</a>. Pick and choose what you need, customize to your heart's desire.
  </p>

</div>



<!-- Buttons
  ================================================== -->
<div class="docs-section" id="buttons">

  <h3><a href="#buttons">Buttons</a></h3>

  <div class="sub-links">
    <a href="#block-buttons">Block</a>
    <a href="#full-buttons">Full Width</a>
    <a href="#outlined-buttons">Outline</a>
    <a href="#clear-buttons">Clear</a>
    <a href="#buttons-headers-footers">Headers</a>
    <a href="#clear-buttons-headers">Clear Headers</a>
    <a href="#button-bar">Button Bars</a>
  </div>

  <p>
    Ah, the Button, an essential part of any mobile experience. Buttons are commonly used to send/retrieve data and form navigation between screens. Like the <a href="#header">Header</a>, they come in the full spectrum of Ionic's default color options.
  </P>
  <p>
    Buttons can be displayed inline, block, outlined, icon-only, or clear (text only), and come in 
    many different styles. By default a button has <code>display: inline-block</code>  
    applied. Other options include <code>block</code> buttons for a full width.
  </p>

{% highlight html %}
<button class="button button-default">Default</button>

<button class="button button-secondary">Secondary</button>

<button class="button button-primary">Primary</button>

<button class="button button-info">Info</button>

<button class="button button-success">Success</button>

<button class="button button-warning">Warning</button>

<button class="button button-danger">Danger</button>

<button class="button button-dark">Dark</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header padding">
        <p>
          <button class="button button-default">button-default</button>
        </p>
        <p>
          <button class="button button-secondary">button-secondary</button>
        </p>
        <p>
          <button class="button button-primary">button-primary</button>
        </p>
        <p>
          <button class="button button-info">button-info</button>
        </p>
        <p>
          <button class="button button-success">button-success</button>
        </p>
        <p>
          <button class="button button-warning">button-warning</button>
        </p>
        <p>
          <button class="button button-danger">button-danger</button>
        </p>
        <p>
          <button class="button button-dark">button-dark</button>
        </p>
      </div>
    </div>
  </div>

</div>



<!-- Block Buttons
  ================================================== -->
<div class="docs-section" id="block-buttons">

  <h3><a href="#block-buttons">Block Buttons</a></h3>
  <p>
    Adding <code>block</code> to a button applies <code>display: block</code> display. 
    A block button will however go 100% of its parent's width.
    In the example, the button's containing content element also has <code>padding</code> applied,
    so there is some breathing room between the edge of the device and the buttons.
  </p>

{% highlight html %}
<button class="button block button-primary">
  Block Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Block Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content padding has-header">
        <button class="button block button-default">button-default</button>
        <button class="button block button-secondary">button-secondary</button>
        <button class="button block button-primary">button-primary</button>
        <button class="button block button-info">button-info</button>
        <button class="button block button-success">button-success</button>
        <button class="button block button-warning">button-warning</button>
        <button class="button block button-danger">button-danger</button>
        <button class="button block button-dark">button-dark</button>
      </div>
    </div>
  </div>

</div>



<!-- Full Width Block Buttons
  ================================================== -->
<div class="docs-section" id="full-buttons">

  <h3><a href="#full-buttons">Full Width Block Buttons</a></h3>
  <p>
    Adding <code>button-full</code> to a button not only applies <code>display: block</code>,
    but also removes borders on the left and right, and any border-radius which may be applied. 
    This style is useful when th button should stretch across the entire width of the display.
    Additionally, the button's parent element <em>does not</em> have <code>padding</code> applied.
  </p>

{% highlight html %}
<button class="button button-full button-primary">
  Full Width Block Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Full Width Block Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        <button class="button button-full button-default">button-default</button>
        <button class="button button-full button-secondary">button-secondary</button>
        <button class="button button-full button-primary">button-primary</button>
        <button class="button button-full button-info">button-info</button>
        <button class="button button-full button-success">button-success</button>
        <button class="button button-full button-warning">button-warning</button>
        <button class="button button-full button-danger">button-danger</button>
        <button class="button button-full button-dark">button-dark</button>
      </div>
    </div>
  </div>

</div>



<!-- Outlined Buttons
  ================================================== -->
<div class="docs-section" id="outlined-buttons">

  <h3><a href="#outlined-buttons">Outlined Buttons</a></h3>

  <p>
    Use <code>button-outline</code> to apply an outline button style, which also
    has a transparent background. 
  </p>
  <p>
    <strong>Note:</strong> The text and border will take the color of the applied button style, meaning 
    <code>button-primary</code> will result in blue text and border, with a transparent background.
  </p>

{% highlight html %}
<button class="button button-outline button-primary">
  Outlined Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Outlined Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content padding has-header">
        <p>
          <button class="button button-outline button-default">button-default</button>
        </p>
        <p>
          <button class="button button-outline button-secondary">button-secondary</button>
        </p>
        <p>
          <button class="button button-outline button-primary">button-primary</button>
        </p>
        <p>
          <button class="button button-outline button-info">button-info</button>
        </p>
        <p>
          <button class="button button-outline button-success">button-success</button>
        </p>
        <p>
          <button class="button button-outline button-warning">button-warning</button>
        </p>
        <p>
          <button class="button button-outline button-danger">button-danger</button>
        </p>
        <p>
          <button class="button button-outline button-dark">button-dark</button>
        </p>
      </div>
    </div>
  </div>

</div>



<!-- Clear Buttons
  ================================================== -->
<div class="docs-section" id="clear-buttons">

  <h3><a href="#clear-buttons">Clear Buttons</a></h3>

  <p>
    Add <code>button-clear</code> to remove the border and make the text stand out.
  </p>
  <p>
    <strong>Note:</strong> The text will take the color of the applied button style, meaning 
    <code>button-primary</code> will result in blue text and no border instead of a blue background.
  </p>

{% highlight html %}
<button class="button button-clear button-primary">
  Clear Button
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Clear Buttons</div>
    </div>
    <div class="content-wrapper">
      <div class="content padding has-header">
        <p>
          <button class="button button-clear button-default">button-default</button>
        </p>
        <p>
          <button class="button button-clear button-secondary">button-secondary</button>
        </p>
        <p>
          <button class="button button-clear button-primary">button-primary</button>
        </p>
        <p>
          <button class="button button-clear button-info">button-info</button>
        </p>
        <p>
          <button class="button button-clear button-success">button-success</button>
        </p>
        <p>
          <button class="button button-clear button-warning">button-warning</button>
        </p>
        <p>
          <button class="button button-clear button-danger">button-danger</button>
        </p>
        <p>
          <button class="button button-clear button-dark">button-dark</button>
        </p>
      </div>
    </div>
  </div>

</div>



<!-- Buttons in Headers/Footers
  ================================================== -->
<div class="docs-section" id="buttons-headers-footers">

  <h3><a href="#buttons-headers-footers">Buttons in Headers</a></h3>

  <p>
    When buttons are placed in headers or footers, they take the style of the 
    bar by default, so you don't have to use the extra style classes. 
    To change this, add the desired style class.
  </p>

{% highlight html %}
<div class="bar bar-header bar-default">
  <button class="button">
    <i class="icon-navicon"></i>
  </button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">
    Edit
  </button>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="padding">
      <div class="bar bar-header bar-default">
        <button class="button">
          <i class="icon-navicon"></i>
        </button>
        <div class="h1 title">Header Buttons</div>
        <button class="button pull-right">
          Edit
        </button>
      </div>
    </div>
  </div>

</div>



<!-- Clear Buttons in Headers
  ================================================== -->
<div class="docs-section" id="clear-buttons-headers">

  <h3><a href="#clear-buttons-headers">Clear Buttons in Headers</a></h3>

  <p>
    For a more minimal approach to header buttons, simply add the <code>button-clear</code> classname to remove the background button color and border.
  </p>

{% highlight html %}
<button class="button button-icon">
  <div class="bar bar-header bar-default">
    <button class="button button-icon">
      <i class="icon-navicon"></i>
    </button>
    <h1 class="title">Header Buttons</div>
    <button class="button button-clear button-primary">
      Edit
    </button>
  </div>
</button>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="padding">
      <div class="bar bar-header bar-default">
        <button class="button button-icon">
          <i class="icon-navicon"></i>
        </button>
        <div class="h1 title">Header Buttons</div>
        <button class="button button-clear button-primary">
          Edit
        </button>
      </div>
    </div>
  </div>

</div>



<!-- Button Bar
  ================================================== -->
<div class="docs-section" id="button-bar">

  <h3><a href="#button-bar">Button Bar</a></h3>
  <p>
    Buttons can also be easily grouped together using the <code>button-bar</code> classname. 
    In this example, a button bar was added to the default header bar, as well as in the main content area of the screen.
  </p>

{% highlight html %}
<div class="button-bar">
  <a class="button">Success</a>
  <a class="button">Warning</a>
  <a class="button">Danger</a>
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="button-bar">
        <a class="button">Success</a>
        <a class="button">Warning</a>
        <a class="button">Danger</a>
      </div>
    </div>
  </div>

</div>



<!-- List
  ================================================== -->
<div class="docs-section" id="list">

  <h3><a href="#list">List</a></h3>

  <div class="sub-links">
    <a href="#list-dividers">Divider</a>
    <a href="#list-icons">Icons</a>
    <a href="#list-thumbnails">Thumbnails</a>
  </div>

  <p>
    The List is a common and simple way of displaying... that's right, a list. This is a widely 
    used interface across in most current mobile OS's, and can include content ranging from basic 
    text all the way to buttons, toggles, icons, and thumbnails.
  </p>
  <p>
    The list view is a very versitile and powerful component used to display lists of 
    data. List views support various interaction modes such as editing, swipe to edit,
    drag to reorder, and pull to refresh. List views can be used in virtual mode to efficiently handle
    large lists of data by only rendering the items the user can see.
  </p>
  <p>
    Both the list, which contains the list items, and the list items themselves
    can be any HTML element. The containing element requires the <code>list</code> 
    class and each list item requires the <code>list-item</code> class.
  </p>

{% highlight html %}
<list
  is-editing=".."
  on-refresh-holding=".."
  on-refresh-opening=".."
  on-refresh=".."
  animation=".."
  delete-icon=".."
  reorder-icon="..">
    <!-- items here -->
    <list-item ng-repeat="item in items">
    </list-item>
</list>
{% endhighlight %}

  <p>
    Lists have many options that can be configured and events that can be handled:
  </p>
  <table class="table">
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>virtual</td>
        <td><b>boolean</b></td>
        <td>false</b>
        <td>Whether to virtually handle list items, offloading items that are not in the viewport. This option
          may have unintended side-effects for certain applications, so it is not enabled by default. However,
          it is recommended for large lists.
        </td>
      </tr>
      <tr>
        <td>is-editing</td>
        <td><b>boolean</b></td>
        <td>false</b>
        <td>A boolean value indicating whether to put the list in "edit mode"</td>
      </tr>
      <tr>
        <td>on-refresh</td>
        <td><b>function</b></td>
        <td></b>
        <td>Called when the list has been pulled to refresh and is now refreshing.</td>
      </tr>
      <tr>
        <td>on-refresh-opening</td>
        <td><b>function(ratio)</b></td>
        <td></b>
        <td>A callback triggered as the list is being pulled to refresh. This triggers for every drag event and sends the
          ratio of how far down the list is being pulled before it refreshes (between 0 and 1).</td>
      </tr>
      <tr>
        <td>on-refresh-holding</td>
        <td><b>function</b></td>
        <td></b>
        <td>A callback triggered when the list is being pulled down and held before refreshing.</td>
      </tr>
      <tr>
        <td>animation</td>
        <td><b>className</b></td>
        <td></b>
        <td>An animation class to apply on the list for animating children.</td>
      </tr>
      <tr>
        <td>delete-icon</td>
        <td><b>icon className</b></td>
        <td>icon-minus-circled</b>
        <td>The class name of the icon to show for all deletion items. We recommend the default
          <a href="http://ionicons.com/">ionicon</a> <b>icon-minus-circled</b>
        </td>
      </tr>
      <tr>
        <td>reorder-icon</td>
        <td><b>icon className</b></td>
        <td>icon-navicon</td>
        <td>The class name of the icon to show for reordering. The recommended default is
          <b>icon-navicon</b>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        
        <ul class="list">
          <li class="list-item">
           <div class="list-item-content">
            <NAME>
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Harvey
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Henry
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Tobias
           </div>
          </li>
          <li class="list-item">
           <div class="list-item-content">
            Buster
           </div>
          </li>
        </ul>

      </div>
    </div>
  </div>


<!-- List Items
  ================================================== -->

  <h4>List Items</h4>
  
  <p>
    List items make up the bulk of lists. List items can be swiped,
    reordered, deleted, and selected. They support hidden button bars
    that are exposed after swiping, and trigger events on deletion and
    selection.
  </p>
  <p>
    List items also support embedded form elements and right-hand icons.
  </p>

{% highlight html %}
<list-item 
  buttons="item.buttons"
  can-delete="true"
  can-reorder="true"
  can-swipe="true"
  on-delete="deleteProject(project)"
  on-select="selectProject(project)">
  <!-- item content -->
</list-item>
{% endhighlight %}
  <p>
    The content specified in the item content area will be the main content of the displayed item.
    Make sure to add an icon at the end if you want a right-handed icon.
  </p>
  <table class="table">
    <thead>
      <tr>
        <th>Attribute</th>
        <th>Type</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>buttons</td>
        <td><b>Array</b></td>
        <td>Buttons is an array of objects specifying the hidden buttons show underneath an item when swiped. The format of each
          button object is:
<code>
<pre>
{
  text: 'Delete',
  type: 'button-danger',
  buttonClicked: function(item) {},
}
</pre>
</code></td>
      </tr>
      <tr>
        <td>can-delete</td>
        <td><b>boolean</b></td>
        <td>Whether this item can be deleted by the user.</td>
      </tr>
      <tr>
        <td>can-reorder</td>
        <td><b>boolean</b></td>
        <td>Whether this item can be reordered.</td>
      </tr>
      <tr>
        <td>can-swipe</td>
        <td><b>boolean</b></td>
        <td>Wheter this item can be swiped to expose the hidden buttons.</td>
      </tr>
      <tr>
        <td>on-delete</td>
        <td><b>function</b></td>
        <td>Called when an item is deleted by the user.</td>
      </tr>
      <tr>
        <td>on-select</td>
        <td><b>function</b></td>
        <td>Called when an item is selected or "tapped" by the user.</td>
      </tr>
    </tbody>
  </table>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Items</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        ...
      </div>
    </div>
  </div>

</div>



<!-- List Dividers
  ================================================== -->
<div class="docs-section" id="list-dividers">

  <h3><a href="#list-dividers">List Dividers</a></h3>

  <p>
    List items can also be dividers to organize and group the list items. Use the <code>list-divider</code>
    class to create a divider for any child element of the list. 
    By default list item dividers will have a different background color and font-weight,
    but this is highly customizable. 
  </p>

{% highlight html %}
<div class="list">

  <div class="list-divider">
    Candy Bars
  </div>

  <a class="list-item" href="#">
   <div class="list-item-content">
    Butterfinger
   </div>
  </a>

  ...

</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Dividers</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        
        <div class="list">

          <div class="list-divider">
            Candy Bars
          </div>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Butterfinger
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Kit Kat
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Snickers
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Twix
           </div>
          </a>
          
          <div class="list-divider">
            Hard Candy
          </div>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            <NAME>
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            LifeSavers
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Skittles
           </div>
          </a>

          <a class="list-item" href="#list-dividers">
           <div class="list-item-content">
            Gobstoppers
           </div>
          </a>

        </div>

      </div>
    </div>
  </div>

</div>



<!-- List Icons
  ================================================== -->
<div class="docs-section" id="list-icons">

  <h3><a href="#list-icons">List Icons</a></h3>

  <p>
    Lists can have icons assigned either to the left and/or right side of each list item,
    and the alignment classes should be assigned to each <code>list-item</code> element.
  </p>
  <p>
    Use <code>list-icon-left</code> to line up the icon to the left, and <code>list-icon-right</code>
    to set the icon to the right. When a list item has an icon on both sides then both classes
    will need to be applied.
  </p>
  <p>
    In the example, the first list item only has a left aligned icon. The second item has both 
    left and right side icons, and the third only has a right side icon. Additionally, the first
    icon has <code>fill-icon</code> applied so it inverts the background and foreground.
  </p>
  <p>
    This example uses an <code>&lt;a&gt;</code> element for each item, which allows the entire 
    list item to be tappable. Note that both a list and its list items can be any element, meaning
    they're not restricted to just <code>&lt;ul&gt;</code> with <code>&lt;li&gt;</code> elements.
  </p>

{% highlight html %}
<div class="list">

  <a class="list-item list-icon-left">
   <div class="list-item-content">
    <i class="icon-gear-a fill-icon"></i>
    Settings
   </div>
  </a>

  <a class="list-item list-icon-left">
   <div class="list-item-content">
    <i class="icon-wifi"></i>
    Wifi
   </div>
  </a>

  <a class="list-item">
   <div class="list-item-content">
    Advanced
    <i class="icon-arrow-right-c"></i>
   </div>
  </a>

  <a class="list-item list-icon-right">
   <div class="icon-document-text">
    More Info
    <i class="icon-arrow-right-c"></i>
   </div>
  </a>

</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Icons</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">
        
        <div class="list">

          <div class="list-divider">
            Control Panel
          </div>

          <a class="list-item list-icon-left">
           <div class="list-item-content">
            <i class="icon-gear-a fill-icon"></i>
            Settings
           </div>
          </a>

          <a class="list-item list-icon-left">
           <div class="list-item-content">
            <i class="icon-wifi"></i>
            Wifi
           </div>
          </a>

          <a class="list-item list-icon-left list-icon-right">
           <div class="list-item-content">
            <i class="icon-help"></i>
            More Info
            <i class="icon-arrow-right-c"></i>
           </div>
          </a>

          <a class="list-item list-icon-right">
           <div class="list-item-content">
            Advanced
            <i class="icon-chevron-right"></i>
           </div>
          </a>

        </div>

      </div>
    </div>
  </div>

</div>



<!-- List Thumbnails
  ================================================== -->
<div class="docs-section" id="list-thumbnails">

  <h3><a href="#list-thumbnails">List Thumbnails</a></h3>

  <p>
    List Thumbnails are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail style list, use the <code>list-thumbnail</code> classname. In this example, we are using images of album covers.
  </p>

{% highlight html %}
<div class="list">

    <a class="list-item list-thumbnail" href="#">
      <div class="list-item-content">
        <img src="cover.jpg">
        <h2>Pretty Hate Machine</h2>
        <p>Nine Inch Nails</p>
      </div>
    </a>

    ...

</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">List Thumbnails</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header">

        <div class="list">

          <div class="list-divider">
            Albums
          </div>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
              <h2>Nine Inch Nailes</h2>
              <p>Pretty Hate Machine</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
              <h2>Smashing Pumpkins</h2>
              <p>Siamese Dream</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
              <h2>Nirvana</h2>
              <p>Nevermind</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
              <h2>Beastie Boys</h2>
              <p>License To Ill</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
              <h2>Green Day</h2>
              <p>Dookie</p>
            </div>
          </a>

          <a href="#list-thumbnails" class="list-item list-thumbnail">
            <div class="list-item-content">
              <img src="//ecx.images-amazon.com/images/I/41-iL07GstL.jpg">
              <h2>Stone Temple Pilots</h2>
              <p>Core</p>
            </div>
          </a>

        </div>

      </div>
    </div>
  </div>

</div>



<!-- Tab Bar
  ================================================== -->
<div class="docs-section" id="tabbar">

  <h3><a href="#tabbar">Tab Bar</a></h3>

  <p>
    The Tab Bar is a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.
  </p>

{% highlight html %}
<div class="tabs">
  <a class="tab-item">
    <i class="icon-home"></i>
    Item 1
  </a>
  <a class="tab-item">
    <i class="icon-home"></i>
    Item 2
  </a>
  <a class="tab-item">
    <i class="icon-home"></i>
    Item 3
  </a>
</div>
{% endhighlight %}

  <p>
    The Tab Bar can be styled to match the standard colors. Use these classes to change the
    color of the tab bar:
    <code>tabs-default</code>
    <code>tabs-secondary</code>
    <code>tabs-primary</code>
    <code>tabs-info</code>
    <code>tabs-success</code>
    <code>tabs-warning</code>
    <code>tabs-danger</code>
    <code>tabs-dark</code>
  </p>

  <div class="doc-example ionic">
    <div class="tabs">
      <a class="tab-item">
        <i class="icon-home"></i>
        Item 1
      </a>
      <a class="tab-item">
        <i class="icon-home"></i>
        Item 2
      </a>
      <a class="tab-item">
        <i class="icon-home"></i>
        Item 3
      </a>
    </div>
  </div>

</div>


<!-- Side Menu
  ================================================== -->
<div class="docs-section" id="sidemenu">

  <h3><a href="#sidemenu">Side Menus</a></h3>

  <table class="table table-condensed table-bordered module-info">
    <tr>
      <td>Module</td><td><code>ionic.ui.sideMenu</code></td>
    </tr>
    <tr>
      <td>Directive</td><td><code>side-menu-ctrl (attribute or class)</code></td>
    </tr>
  </table>
  <p>
    Side Menus are exposable side menus seen at various tiems in popular
    apps like Path and Facebook.
    Each menu can be exposed through dragging the content area left and/or right, or through a Javascript API.
  </p>

{% highlight html %}
<div side-menu-ctrl>
  <div class="full-section" side-menu-content>
    <h1>Content area</h1>
  </div>
  <menu side="left">
    <h2>Left Menu</h2>
  </menu>
  <menu side="right">
    <h2>Right Menu</h2>
  </menu>
</div>
{% endhighlight %}

</div>



<!-- Cards
  ================================================== -->
<div class="docs-section" id="cards">

  <h3><a href="#cards">Cards</a></h3>

  <p>
    ...
  </p>

{% highlight html %}
<div class="">
  ...
</div>
{% endhighlight %}

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Cards</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header padding">
        
        <div class="card">
          <div class="card-header">
            Card Header
          </div>
          <div class="card-body">
            Card Body
          </div>
          <div class="card-footer">
            Card Footer
          </div>
        </div>

      </div>
    </div>
  </div>

</div>



<!-- Forms
  ================================================== -->
<div class="docs-section" id="forms">

  <h3><a href="#forms">Forms &amp; Inputs</a></h3>

  <div class="sub-links">
    <a href="#forms-placeholder-labels">Placeholder Labels</a>
    <a href="#forms-inline-labels">Inline Labels</a>
    <a href="#forms-stacked-labels">Stacked Labels</a>
  </div>

  <p>
    An <code>input-group</code> is used to group related input elements. An <code>input-row</code>
    is used to designate each individual input field and it's associated label. By default each 
    input row will fill 100% of the width of its parent element. However, you can use the <a href="#utility">utility</a>
    classnames of <code>inset</code> and <code>padding</code> to change their placement.
  </p>
  <p>
    Ionic prefers to create an <code>input-row</code> out of the <code>&lt;label&gt;</code> element 
    so that when any part of the row is tapped then the input receives focus.
  </p>

  <div class="doc-example ionic">
    <div class="bar bar-header bar-default">
      <div class="h1 title">Forms</div>
    </div>
    <div class="content-wrapper">
      <div class="content has-header padding-top">
        <div class="input-group">
          <label class="input-row">
            <input type="text" placeholder="<NAME>">
          </label>
{'fraction_non_alphanumeric': 0.18397804684303012, 'fraction_numerical': 0.0045495029246804515, 'mean_word_length': 2.604485705609301, 'pattern_counts': {'":': 0, '<': 2854, '<?xml version=': 0, '>': 2854, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7341991', 'n_tokens_mistral': 26660, 'n_tokens_neox': 25456, 'n_words': 7303}