Card

Card is a section to group content and layout provides a built-in css for it. Apply .card style class to your container to use it.

<div class="card">
    Content here
</div>

<div class="card">
    <div class="card-title">Card with Title<h1>
    Content here
</div>

Content

Card with Title

Content

Input Animations

Label of an input can be animated on focus by wrapping both the input and label in an element with md-inputfield style class.

Name

<h:panelGroup styleClass="md-inputfield">
    <p:inputText id="name"/>
    <p:outputLabel for="name" value="Name" />
</h:panelGroup>

Shadows

5 levels of shadows are provided varying from ui-shadow-1 to ui-shadow-5 to define the level of depth.

<div class="ui-g">
    <div class="ui-g-12 ui-md-2">
        <div class="shadow-box"></div>
    </div>
    <div class="ui-g-12 ui-md-2">
        <div class="shadow-box ui-shadow-1"></div>
    </div>
    <div class="ui-g-12 ui-md-2">
        <div class="shadow-box ui-shadow-2"></div>
    </div>
    <div class="ui-g-12 ui-md-2">
        <div class="shadow-box ui-shadow-3"></div>
    </div>
    <div class="ui-g-12 ui-md-2">
        <div class="shadow-box ui-shadow-4"></div>
    </div>
    <div class="ui-g-12 ui-md-2">
        <div class="shadow-box ui-shadow-5"></div>
    </div>
</div>

Icons

All material icons have been ported using ui-icon- convention to be utilized by PrimeFaces components. To use an icon within a component such as button below, define it using the icon attribute prefixed by ui-icon-. In addition font-awesome icons can also be used which requires setting primefaces.FONT_AWESOME parameters in web.xml as true or manually installing font awesome.

Note: For Sapphire menu, keep the material icon name as it is instead of ui-icon.

<p:menuitem value="Filters" icon="filter-list" outcome="filters"/>

<p:commandButton type="button" value="ui-icon-check" icon="ui-icon-check" />

3d-rotation

ac-unit

access-alarm

access-alarms

access-time

accessibility

accessible

account-balance

account-balance-wallet

account-box

account-circle

adb

add

add-a-photo

add-alarm

add-alert

add-box

add-circle

add-circle-outline

add-location

add-shopping-cart

add-to-photos

add-to-queue

adjust

airline-seat-flat

airline-seat-flat-angled

airline-seat-individual-suite

airline-seat-legroom-extra

airline-seat-legroom-normal

airline-seat-legroom-reduced

airline-seat-recline-extra

airline-seat-recline-normal

airplanemode-active

airplanemode-inactive

airplay

airport-shuttle

alarm

alarm-add

alarm-off

alarm-on

album

all-inclusive

all-out

android

announcement

apps