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
In Stock
Yoga Set
Product Description
$20.00
Electronics
Low Stock
Headphones
Product Description
$175.00
Accessories
In Stock
Purple Gemstone Necklace
Product Description
$45.00
Accessories
Out of Stock
Pink Purse
Product Description
$110.00
Fitness
Low Stock
Blue Band
Product Description
$79.00
Fitness
In Stock
Pink Band
Product Description
$79.00
Electronics
Low Stock
Game Controller
Product Description
$99.00
Electronics
Low Stock
Headphones
Product Description
$175.00
Electronics
In Stock
Yellow Earbuds
Product Description
$89.00
Fitness
In Stock
Lime Band
Product Description
$79.00
Fitness
In Stock
Yoga Mat
Product Description
$20.00
Accessories
In Stock
Galaxy Earrings
Product Description
$34.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>