paper-item-body.html 2.53 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">

Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
three- line items. It is a flex item that is a vertical flexbox.

      <paper-item-body two-line>
        <div>Show your status</div>
        <div secondary>Your status is visible to everyone</div>

The child elements with the `secondary` attribute is given secondary text styling.

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
`--paper-item-body-two-line-min-height`   | Minimum height of a two-line item          | `72px`
`--paper-item-body-three-line-min-height` | Minimum height of a three-line item        | `88px`
`--paper-item-body-secondary-color`       | Foreground color for the `secondary` area  | `--secondary-text-color`
`--paper-item-body-secondary`             | Mixin applied to the `secondary` area      | `{}`


<dom-module id="paper-item-body">
      :host {
        overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */

      :host([two-line]) {
        min-height: var(--paper-item-body-two-line-min-height, 72px);

      :host([three-line]) {
        min-height: var(--paper-item-body-three-line-min-height, 88px);

      :host > ::content > * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

      :host > ::content [secondary] {
        color: var(--paper-item-body-secondary-color, --secondary-text-color);



      is: 'paper-item-body'