Boxes

Boxes are simple and convenient styled containers to display and constrain content to develop shaped and contained layouts, instead of having content floating inside the document. A box element contains the content of this very document.

• Box padding
• Dark color boxes
• Icon boxes
• Action boxes

---

Box padding

It is essential to combine a box class with one of the classes pad-lg, pad-md or pad-sm to apply the desired padding weight. Keep in mind that padding classes respond to resolution changes, so they adjust accordingly and proportionally in smaller screen resolution tiers - as a result in extra small screen resolution tier and below, the padding weight is almost identical.

All content inside a box will adapt to the padding class applied, so that white-space is kept consistent, regardless of the contained elements margin values.

Code output

HTML Markup

Copy<div class="box pad-lg">
  <h3>Title</h3>
  <p>This is a box with large padding.</p>
</div>

<div class="box pad-md">
  <h3>Title</h3>
  <p>This is a box with medium padding.</p>
</div>

<div class="box pad-sm">
  <h3>Title</h3>
  <p>This is a box with small padding.</p>
</div>

---

Dark color boxes

Dark color boxes can be used to make content stand out of the rest of the content. A class box-inverted has to be applied on the box component.

Code output

HTML Markup

Copy<div class="box box-inverted pad-lg">
  <h3>Title</h3>
  <p>This is a box with large padding.</p>
</div>

---

Icon boxes

Icon boxes allow users to create responsive grid lists of categorized items with minimal effort. The icons used must be icon fonts, so that they can be easily adjusted and styled properly. Font icons are vector-based, which means they can be infinitely magnified without loss of clarity. A selection of PCCW Global product categories has been implemented into the framework and can be found in the PCCW Global icons section.

Code output

HTML Markup

Copy<a class="box box-icon">
  <span>
  <i class="sky-icon-services-satellite"></i>
  <span>Satellite Services<br><small><strong>7 products</strong></small></span>
  </span>
</a>

<a class="box box-icon box-inverted">
  <span>
    <i class="sky-icon-services-satellite"></i>
    <span>Satellite Services<br><small><strong>7 products</strong></small></span>
  </span>
</a>

---

Action boxes

Action boxes are specifically designed to make form action triggers stand out within a form. They should be placed as the last element of a box element that includes a form.

Code output

HTML Markup

Copy<div class="box">...</div>
<div class="box-actions-footer">
  <button class="btn btn-faded">Cancel</button>
  <button type="submit" class="btn btn-main">Submit <strong>form</strong></button>
</div>