Paper

Paper can be used to build surface or other elements for your application.

The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets. Paper is the root component for a variety of other components, including Cards. Please use the most appropriate component for your needs.

Default

<div class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-paper">
      <h3>This is a sheet of paper.</h3>
      <p class="u-theme--text-secondary-on-background">
        Paper can be used to build surface or other elements for your application.
      </p>
    </div>
  </div>
</div>

<div class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-paper">
      <h3>This is a sheet of paper.</h3>
      <p class="u-theme--text-secondary-on-background">
        Paper can be used to build surface or other elements for your application.
      </p>
    </div>
  </div>
</div>

Variations

Square corners with .u-paper--square.

<div class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-paper u-paper--square u-p-xs-3">
      <h3>Hip to be a square.</h3>
      <p class="u-theme--text-secondary-on-background">
        Paper can be used to build surface or other elements for your application.
      </p>
    </div>
  </div>
</div>

<div class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-auto">
    <div class="u-paper u-paper--square u-p-xs-3">
      <h3>Hip to be a square.</h3>
      <p class="u-theme--text-secondary-on-background">
        Paper can be used to build surface or other elements for your application.
      </p>
    </div>
  </div>
</div>

Remove or increase shadow depth with the use of .u-elevation--z[number] classes.

<div class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-10">
    <div class="u-paper u-elevation--z0 u-p-xs-3">
      <h3>Flat.</h3>
      <p class="u-theme--text-secondary-on-background">
        Get in on the ground level.
      </p>
    </div>
  </div>
  <div class="u-grid-item u-xs-10 u-my-xs-8">
    <div class="u-paper u-elevation--z24 u-p-xs-3">
      <h3>Ultra Raised.</h3>
      <p class="u-theme--text-secondary-on-background">
        Hello down there!
      </p>
    </div>
  </div>
</div>

<div class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-xs-10">
    <div class="u-paper u-elevation--z0 u-p-xs-3">
      <h3>Flat.</h3>
      <p class="u-theme--text-secondary-on-background">
        Get in on the ground level.
      </p>
    </div>
  </div>
  <div class="u-grid-item u-xs-10 u-my-xs-8">
    <div class="u-paper u-elevation--z24 u-p-xs-3">
      <h3>Ultra Raised.</h3>
      <p class="u-theme--text-secondary-on-background">
        Hello down there!
      </p>
    </div>
  </div>
</div>

Paper

Default

Variations

Properties

<Paper />