Content rows

Content rows are suitable to promote featured content.

• Featured content row
• Hero content row

---

Featured content row

Featured content rows are sections with different contrast to make content stand out that can only be placed before or after the main content container. Simply wrap content within a content-featured class and position carefully within the table layout structure.

Code output

HTML markup

Copy<!-- ... -->
  <div class="content-featured">
    <div class="container">
      <h2 class="text-center">Featured content title<br><small>Featured content subtitle</small></h2>
      <p class="text-center">Sample featured content paragraph text.</p>
    </div>
  </div>

  <div class="content">
    <!-- ... -->
  </div>

  <div class="content-featured">
    <div class="container">
      <h2 class="text-center">Featured content title<br><small>Featured content subtitle</small></h2>
      <p class="text-center">Sample featured content paragraph text.</p>
    </div>
  </div>
<!-- ... -->

A ligther color variation of the featured content is also available, simply by applying a content-feature-light class on the featured content row.

Code output

HTML markup

Copy<div class="content-featured content-featured-light">
  <!-- ... -->
</div>

---

Hero content row

A hero content row is a large image-based box used to promote content, usually placed at the top of the page after the header row. Its content is centered both horizontally and vertically. It comes in 3 different heights by applying the appopriate classes content-hero at 175px, content-hero-md at 320px and content-hero-lg at 440px. Below is a rendered representation of a hero box with its markup.

Code output

HTML markup

Copy<div class="content-hero" style="background-image:url('img/hk-strip-bg.jpg');">
  <h2>Hero box content</h2>
</div>

The background hero images, should be heavily optimized and should comply with PCCW Global marketing guidelines. The hero background image should adapt to the hero boxes using the background-size:cover property and should be vertically and horizontally center aligned, which means that in cases where the hero box is larger in either of the two dimensions, the background-image will expand proportionally so that the background area is completely covered. In the example above the background image is placed inline and all the necessary properties are applied using css. The use images that have the item of focus centered in the background image is encouraged.