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.

I'm an H6!

Footers have the same color options as the headers, just use bar-footer instead of bar-header. If a title is present in the footer, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written, such as:

Adding button-block to a button applies display: block display.
A block button will however go 100% of its parent's width.
In the example, the button's containing content element also has padding applied,
so there is some breathing room between the edge of the device and the buttons.

Adding button-full to a button not only applies display: block,
but also removes borders on the left and right, and any border-radius which may be applied.
This style is useful when the button should stretch across the entire width of the display.
Additionally, the button's parent element does not have padding applied.

The List is a common and simple way of displaying... that's right, a list. This is a widely
used interface across most current mobile OS's, and can include content ranging from basic
text all the way to buttons, toggles, icons, and thumbnails.

The list view is a very versatile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.

For more power you can use Ionic's AngularJS directives. Check out the AngularJS list docs to get more detailed information.

List items can also be dividers to organize and group the list items. Use the item-divider
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 easily customizable.

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 item element. Icons can easily
be added to any item by using either the built in Ionicons, or
any custom font-pack you choose. Learn more about icons.

Use item-icon-left to line up the icon to the left, and item-icon-right
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.

This example uses an <a> element for each item, which allows the entire
list item to be tappable. If the item is an <a> or <button>
element, and no icon has been added to the right, then a small right arrow will automatically be added.

In the example, the first item only has a left aligned icon. The second item has both
left and right side icons. The third item has a left aligned icon and an item-note. The fourth
icon has added a badge element.

Item 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 styled item, use the item-thumbnail-left to have it align on the left, and item-thumbnail-right for the right side.

Lists can also be inset inside their container, instead of going full width. The main difference
is that a list list-inset element has margin. An inset list is similar to a card,
except an inset list does not have a box-shadow. Since list list-inset does not have a box-shadow,
it'll be more performant when scrolling.
Inset forms shows other examples of its usage.

<divclass="list list-inset"><divclass="item">
Raiders of the Lost Ark
</div>
...
</div>

Cards have become widely used in recent years. They are a great way to contain and organize information, while also setting up predictable expectations for the user. With so much content to display at once, and often so little screen realestate, cards have fast become the design pattern of choice for many companies, including the likes of Google, Twitter, and Spotify..

For mobile experiences, Cards make it easy to display the same information visually across many different screen sizes. They allow for more control, are flexible, and can even be animated. Cards are usually placed on top of one another, but they can also be used like a "page" and swiped between, left and right.

<divclass="card"><divclass="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div></div>

Cards add a box-shadow by default, whereas it's cousin list list-inset does not. For performance reasons,
when scrolling a large card with many items its recommended to use inset lists instead.

Cards can be customized similarly to how you would fill a normal screen. For example, a card can easily have Headers and Footers placed inside of them. Add the item-divider classname above or below the content within the card element.

<divclass="card"><divclass="item item-divider">
I'm a Header in a Card!
</div><divclass="item item-text-wrap">
This is a basic Card with some text.
</div><divclass="item item-divider">
I'm a Footer in a Card!
</div></div>

Pretty Hate Machine

Here is a showcase of a card using several different items. It begins with the list card element, utilizing the item-avatar list item, an item-body element for images and text, and a footer with the item-divider classname.

<divclass="list card"><divclass="item item-avatar"><imgsrc="mcfly.jpg"><h2>Marty McFly</h2><p>November 05, 1955</p></div><divclass="item item-body"><imgclass="full-image"src="delorean.jpg"><p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p><p><ahref="#"class="subdued">1 Like</a><ahref="#"class="subdued">5 Comments</a></p></div></div>

Cards

Marty McFly

November 05, 1955

This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of a tabs, icons aligned left, within the card-footer.

In the example, it'll default to 100% width (no borders on the left and right), and uses the
placeholder attribute to simulate the input's label. Then the user begins to enter
text into the input the placeholder label will be hidden. Notice how <textarea> can also be used as a multi-line text input.

Stacked labels always places the label on top of the input. Each item should
have item-stacked-label assigned, and the input's label
should have input-label assigned.
This example also uses the placeholder attribute so
users have a hint of what type of text the input is looking for.

Floating labels are just like Stacked Labels,
except that their labels animate, or "float" up when text is entered in the input.
Each item should have item-floating-label assigned, and the input's
label should have input-label assigned.

Enter text in the example to the right to see the floating labels in action.
This example also uses the placeholder attribute so
user's have a hint of what type of text the input is looking for.

By default each input item will fill 100% of the width of its parent element (the list).
However, you can inset the list using either the list list-inset or card classnames.
The card classname applies a lower box shadow while list-inset does not.
Additionally, if the list's parent element has padding assigned then this will also
give the form an inset appearance.

Icons can be easily added to the left of an item-input input. Simply add an
icon before the <input>. By default the icon
will take the color of label text. However, you can also use add placeholder-icon
to give it a placeholder color.

A toggle technically is the same thing as an HTML checkbox input,
except it looks different and is easier to use on a touch device. Ionic prefers
to wrap the checkbox input with the <label> in order
to make the entire toggle easy to tap or drag.

Toggles can also have colors assigned to them,
such as toggle-assertive to assign the assertive color.

Ionic's select is styled so its appearance is prettied up relative to the
browser's default style. However, when the select elements is opened,
the default behavior on how to select one of the options is still managed
by the browser.

Each platform's user-interface will be different as the user is selecting
an option. For example, on a desktop browser you'll see the traditional drop down
interface, whereas Android often has a radio-button list popup, and iOS
has a custom scroller covering the bottom half of the window.

Tabs are 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.

Tabs can be styled to match the standard Ionic colors (the example is using the default color. Use these classes to change the
color of the tab bar:
tabs-defaulttabs-lighttabs-stabletabs-positivetabs-calmtabs-balancedtabs-energizedtabs-assertivetabs-royaltabs-dark

To hide the tabbar but still show the content, add the tabs-item-hide class. Also, whenever you are using tabs, remember to add the has-tabs CSS class to your ion-content directive.

Add tabs-striped to an element above the tabs classname for Android style tabs.

Optionally, also add tabs-top to position the tab at the top

Get granular color control for striped tabs with the tabs-background-{color} and
tabs-color-{color} classes, where {color} is any of the ionic color swatches:
default,
light,
stable,
positive,
calm,
balanced,
energized,
assertive,
royal, or
dark

Note, that to have the header blend with the top tabs, add the has-tabs-top class to the header.

Ionic's grid system is different than most because of its use of the CSS Flexible Box Layout Module standard.
The advantage here is that the devices that Ionic supports, all support flexbox.

Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be. And to add to the crazy, you can vertically align content within each column.

The row classname is used to designate, surprise, a row, and col is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automatically.

Note: The borders and gray background in the demo were added so it's easier to see the structure.

By default every col added inside a row will automatically receive an equal amount of the available area. Notice in the code below that no sizes are specified anywhere in the classnames, yet each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).

You can explicitly state the size of a column if for example you'd want specific columns to be larger than the others in the same row. By default each column will evenly take up the available area, but in the case where a column should be a certain size, Ionic's grid uses a percent system (in contrast to a locked in 12 column grid).

An advantage with this grid system is that you only have to state the percentage for the column that needs it, and the others will still evenly divide up the available areas.

Another trick up flexbox's sleeve is the ability to easily vertically
align columns. Vertical alignment includes top, center and bottom, and can be applied to every column in a row, or to specific columns.

In the demo, we've made the last column in each row to have the tallest content in order to demonstrate
how the content of the others vertically align. The first row shows the default which is to take the same height as the tallest column in the same row.

There may be cases where a row of columns will not fit nicely in the available area.
The responsive classes can be used to turn each column in a row into its own row at
certain breakpoints.

For example, if you want a row of columns to turn in to stacked rows when the
viewport is pretty small, you would use the .responsive-sm class. The
example to the right is a simulation of what it'd look like.

Ionic comes with a set of colors to start with, but as a general rule colors are meant to be overridden. We prefer saying that Ionic provides a recommended naming convention for your colors, swatches, themes, etc.

Utility colors are added to help set a naming convention. You'll notice Ionic purposely does not use words like "red" or "blue", but instead have colors which represent an emotion or generic theme.

Let's be realistic, assigning colors is one of the easier tasks in CSS, and each app will have different requirements for colors. Ionic's goal is to provide a clean system to build on top of and maintain, and stays away from dictating how each app chooses to color its custom design.

To customize the colors you can simply override those coming from the ionic.css CSS file. Additionally, since Ionic is built using Sass, for more power and flexibility you could also modify and extend the color variables within the _variables.scss file.

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 and margins throughout the app.

The padding utility classes can be reused to give any element's content some breathing room,
meaning it adds a default 10px 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 layout.

padding Adds padding around every side.

padding-vertical Adds padding to the top and bottom.

padding-horizontal Adds padding to the left and right.

padding-top Adds padding to the top.

padding-right Adds padding to the right.

padding-bottom Adds padding to the bottom.

padding-left Adds padding to the left.

Padding

The gray square represents an element, and the blue square represents
the element's content when padding has been applied.