Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

DataView Responsive

DataView offers basic responsiveness. You can improve this for e.g. large screen via gridRowStyleClass-attribute. Additional you can use PrimeFlex instead of Grid CSS via flex-attribute or set primefaces.FLEX as context-param.

ui-button
ui-button
Fitness
Low Stock
Purple Band
Product Description
$79.00
Accessories
Low Stock
Chakra Bracelet
Product Description
$32.00
Accessories
In Stock
Bamboo Watch
Product Description
$65.00
Accessories
Low Stock
Chakra Bracelet
Product Description
$32.00
Fitness
In Stock
Pink Band
Product Description
$79.00
Accessories
Out of Stock
Brown Purse
Product Description
$120.00
Fitness
In Stock
Yoga Set
Product Description
$20.00
Accessories
In Stock
Black Watch
Product Description
$72.00
Electronics
In Stock
Yellow Earbuds
Product Description
$89.00
Clothing
In Stock
Light Green T-Shirt
Product Description
$49.00
Electronics
In Stock
Yellow Earbuds
Product Description
$89.00
Clothing
In Stock
Sneakers
Product Description
$78.00

<div class="product card">
    <h:form id="form">
        <p:dataView var="product" value="#{dataGridView.products}" rows="12" paginator="true"
                    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                    gridIcon="pi pi-th-large" listIcon="pi pi-bars"
                    layout="grid" gridRowStyleClass="p-lg-6 p-xl-4" flex="true">

            <p:dataViewGridItem>
                <div class="product-grid-item card border-1">
                    <div class="product-grid-item-top">
                        <div>
                            <i class="pi pi-tag product-category-icon"/>
                            <span class="product-category">#{product.category}</span>
                        </div>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                    </div>
                    <div class="product-grid-item-content">
                        <p:graphicImage name="images/product/#{product.image}" library="demo"/>
                        <div class="product-name">#{product.name}</div>
                        <div class="product-description">#{product.description}</div>
                        <p:rating readonly="true" value="#{product.rating}"/>
                    </div>
                    <div class="product-grid-item-bottom">
                        <h:outputText value="#{product.price}" styleClass="product-price">
                            <f:convertNumber currencySymbol="$" type="currency"/>
                        </h:outputText>
                        <p:commandButton type="button"
                                            value="Add To Cart"
                                            icon="pi pi-shopping-cart"
                                            disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                        </p:commandButton>
                    </div>
                </div>
            </p:dataViewGridItem>

            <p:dataViewListItem>
                <div class="product-list-item">
                    <p:graphicImage name="demo/images/product/#{product.image}"/>
                    <div class="product-list-detail">
                        <div class="product-name">#{product.name}</div>
                        <div class="product-description">#{product.description}</div>
                        <p:rating readonly="true" value="#{product.rating}"/>
                        <i class="pi pi-tag product-category-icon"/><span
                            class="product-category">#{product.category}</span>
                    </div>
                    <div class="product-list-action">
                        <h:outputText value="#{product.price}" styleClass="product-price">
                            <f:convertNumber currencySymbol="$" type="currency"/>
                        </h:outputText>
                        <p:commandButton type="button"
                                            value="Add To Cart"
                                            icon="pi pi-shopping-cart"
                                            disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
                        </p:commandButton>
                        <span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
                    </div>
                </div>
            </p:dataViewListItem>
        </p:dataView>

    </h:form>
</div>