Product page

There are two types of product details pages:

.ct-productDetails
.ct-productDetails–type2

Product details

Product details type 2

You can use the with the following HTML markup:

 <div class="col-md-8 col-lg-9">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="ct-heading ct-u-marginBottom20">
                                <h3 class="text-uppercase">Summary</h3>
                            </div>
                            <div class="ct-u-displayTableVertical ct-productDetails">
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Price</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span class="ct-price">$ 1 450 000</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Area</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>185 m2</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Status</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>Sale</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Type</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>House</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Location</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>San Francisco, CA 55689</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Beds</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Baths</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Garage</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Pool</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>yes</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="ct-heading ct-u-marginBottom20">
                                <h3 class="text-uppercase">Description</h3>
                            </div>
                            <p class="ct-u-marginBottom20">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere.
                            </p>
                            <div class="ct-heading ct-u-marginBottom20">
                                <h3 class="text-uppercase">Property Details</h3>
                            </div>
                            <div class="ct-u-displayTableVertical ct-productDetails--type2 ct-u-marginBottom20">
                                <div class="ct-u-displayTableCell">
                                    <ul class="list-unstyled">
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span class="text-capitalize">air conditioning</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span class="text-capitalize">ADSL cable</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span class="text-capitalize">WiFi</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-times-circle negative"></i>
                                            <span class="text-capitalize">HiFi audio</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span class="text-capitalize">fridge</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span class="text-capitalize">grill</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="ct-u-displayTableCell">
                                    <ul class="list-unstyled">
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span class="text-capitalize">Full HD TV</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-times-circle negative"></i>
                                            <span class="text-capitalize">Digital antenna</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-check-circle"></i>
                                            <span>Kitchen with Island</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-times-circle negative"></i>
                                            <span class="text-capitalize">exotic garden</span>
                                        </li>
                                        <li>
                                            <i class="fa fa-times-circle negative"></i>
                                            <span class="text-capitalize">guest house</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ct-heading ct-u-marginBottom20">
                                <h3 class="text-uppercase">Map</h3>
                            </div>
                            <div class="ct-js-googleMap ct-googleMap ct-js-googleMap--single" data-offset="1" data-location="Richmond" data-icon="assets/images/marker-house.png" data-zoom="14" data-height="260" id="map"></div>
                        </div>
                    </div>
                </div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<h3 class="text-uppercase">Summary</h3>

</div>

<span class="ct-fw-600">Price</span>

</div>

</div>

</div>

</div>

<span class="ct-fw-600">Status</span>

</div>

</div>

</div>

<span>House</span>

</div>

<span class="ct-fw-600">Location</span>

</div>

<span>San Francisco, CA 55689</span>

</div>

</div>

</div>

<span class="ct-fw-600">Baths</span>

</div>

</div>

<span class="ct-fw-600">Garage</span>

</div>

</div>

</div>

</div>

<h3 class="text-uppercase">Description</h3>

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere.

</p>

<h3 class="text-uppercase">Property Details</h3>

</div>

<li>

<span class="text-capitalize">air conditioning</span>

</li>

<li>

<span class="text-capitalize">ADSL cable</span>

</li>

<li>

</li>

<li>

<span class="text-capitalize">HiFi audio</span>

</li>

<li>

<span class="text-capitalize">fridge</span>

</li>

<li>

<span class="text-capitalize">grill</span>

</li>

</ul>

</div>

<li>

</li>

<li>

<span class="text-capitalize">Digital antenna</span>

</li>

<li>

<span>Kitchen with Island</span>

</li>

<li>

<span class="text-capitalize">exotic garden</span>

</li>

<li>

<span class="text-capitalize">guest house</span>

</li>

</ul>

</div>

</div>

</div>

News

Siver

Estato

Disrupt

We are elite