Check out our examples, including starter templates and showcase demos.
Content
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.
* For more content options, see the Content docs.
<content padded="true">
...
</content>
List
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 versitile 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.
<ul class="list">
<li class="item">
...
</li>
</ul>
* For a more extensive overview on Lists, read AngularJS List Docs
List Dividers
List items can also be dividers to organize and group the list items. Use theitem-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.
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
List Icons
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 no a right side icon assigned (whichs defaults to the right arrow). Additionally, the thrid item also adds an item-note
. The fourth icon has added a badge
element.
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios7-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
List Avatars
List avatars 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 thelist-thumbnail
classname. In this example, we are using images of album covers.
<div class="list">
<a class="item item-avatar" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
List Thumbnails
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 theitem-thumbnail-left
to have it align on the left, and item-thumbnail-right
for the right side.
<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
...
</div>
Cards
Cards have become widely used in recent years. They're 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.
<div class="card">
<div class="item item-text-wrap">
This is a basic Card with some text.
</div>
</div>
Card Lists
Use the list card
classname to create a card with lists.
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios7-telephone"></i>
Enter phone number
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-wifi"></i>
Enter wireless password
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-card"></i>
Enter card information
</a>
</div>
Card Images
Images look great in cards, and can be combined with lists and other elements.
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
Card Showcase
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.
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="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 a Tab Bar, icons aligned left, within the card-footer.
</p>
<p>
<a href="#" class="subdued">1 Like</a>
<a href="#" class="subdued">5 Comments</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
Toggle
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.
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
This is an example of multiple toggles within a list. Note the item-toggle
class was added along side item
for each item.
<ul class="list">
<li class="item item-toggle">
HTML5
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
...
</ul>
Checkbox
A checkbox is no different than the HTML checkbox input, except it's styled differently. This is an example of multiple checkboxes within a list. Note the item-checkbox
class was added along side item
for each item.
Ionic prefers to use the <label>
element for a checkbox item in order to make the entire checkbox tappable.
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
...
</ul>
Range
This is a Range. Ranges can be themed to any default Ionic color, and used in various other elements such as a list item or card.
<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
</div>
Tab Bar
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.
* For building tabbed interfaces, see the Tab Bar Controller docs.
The containing tab bar should have the tabs
classname, and each tab should have thetab-item
classname. By default, tabs will be without an icon and text-only.
<div class="tabs">
<a class="tab-item">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
The Tab Bar can be styled to match the standard Ionic colors (the example is using thedefault
color. Use these classes to change the color of the tab bar: tabs-default
tabs-secondary
tabs-primary
tabs-info
tabs-success
tabs-warning
tabs-danger
tabs-dark
Icon-only Tab Bar
Add tabs-icon-only
along with the tabs
classname.
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
Top Icon Tab Bar
The classic tab bar. Add tabs-icon-top
along with the tabs
classname.
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
Left Icon Tab Bar
Add tabs-icon-left
along with the tabs
classname.
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
Utility
Ionic comes with a handful of utility classes to help quickly style your design. Each are optional.
Colors
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.
* For more flexibility, you can Customize Ionic With Sass
Icons
Ionic also comes with its own free and open-sourced icon font, Ionicons, with over 440 icons to choose from.
Simply add icon
and the Ionicon classname for the icon to show, which can be easily looked up on the Ionicons homepage.
<i class="icon ion-star"></i>
Note: Ionic is certainly not restricted to using only the Ionicons icon pack, so please feel free to use any icons you wish.
Padding
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 15px
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.
Grid
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.
Use 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 automagically.
Note: The borders and gray background in the demo were added so it's easier to see the structure.
Grid: Evenly Spaced Columns
By default every col
added inside a row
will automatically receiving and 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).
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Note: The borders and gray background in the demo were added so it's easier to see the structure.
Grid: Explicit Column Sizes
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.
<div class="row">
<div class="col col-50">.col.col-50</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-75">.col.col-75</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col col-75">.col.col-75</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Note: The borders and gray background in the demo were added so it's easier to see the structure.
Explicit Column Percentage Classnames |
.col-10 |
10% |
.col-20 |
20% |
.col-25 |
25% |
.col-33 |
33.3333% |
.col-50 |
50% |
.col-67 |
66.6666% |
.col-75 |
75% |
.col-80 |
80% |
.col-90 |
90% |
Grid: Offset Columns
Columns can also be offset from the left. We'll let the code and demo speak for itself.
<div class="row">
<div class="col col-33 col-offset-33">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-33">.col</div>
<div class="col col-33 col-offset-33">.col</div>
</div>
<div class="row">
<div class="col col-33 col-offset-67">.col</div>
</div>
Note: The borders and gray background in the demo were added so it's easier to see the structure.
Offset Column Percentage Classnames |
.col-offset-10 |
10% |
.col-offset-20 |
20% |
.col-offset-25 |
25% |
.col-offset-33 |
33.3333% |
.col-offset-50 |
50% |
.col-offset-67 |
66.6666% |
.col-offset-75 |
75% |
.col-offset-80 |
80% |
.col-offset-90 |
90% |
Grid: Vertically Align Columns
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.
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row">
<div class="col col-top">.col</div>
<div class="col col-center">.col</div>
<div class="col col-bottom">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-top">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-bottom">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
Note: The borders and gray background in the demo were added so it's easier to see the structure.