Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Data Boxes

View SiteImprove Policy for This Pattern

A Data Box is a component that is used to highlight individual bits of data or stats. This component includes options for:

  • an icon (within a circle, square or by itself)
​
94,532 International Students

Basic Code and Classes:

<div class="data-box">
    <div class="cb-mainico text-csecondary">
        <span aria-hidden="true" class="ico fab fa-twitter"></span>
    </div>
    <span class="data-figure">94,532</span>
    <span class="data-description">International Students</span>
</div>
  • .data-box - applied to the containing <div>
  • .cb-mainico - applied the child <div> where the icon will appear (to use an image instead, see below)
  • .data-figure - applied the <span> that holds the main data figure (the highlighted stat/number)
  • .data-description - applied the <span> that describes and gives context to the main data figure
  • Data Boxes can be used at any width; simply wrap component within a sized <div>, or any bootstrap column

Style This Component

Notice how variations to the layout above can be made by customizing individual Pegasus elements like the following:

  • The use of a shadow on the card (apply to .feature-card)
  • The color of the icon (apply to .cb-mainico; .text-csecondary is used the above example)
  • The color of the background of the card (apply to .data-box; none is used in the above example)

Accessibility Notice!

  • .data-figure and .data-description must always be applied to a <span> and NOT a <div>.
    • Why? A <div> is a block-level element which will cause screen readers to read the data figure and data description as two different statements (94,532. International students.). A <span> is an inline element which allows them to be read correctly as one unified statement (94,352 international students.).

Styles and Variations

Style Note: Notice how variations to the layouts below can be made by customizing individual Pegasus elements like the following:

  • The use of a shadow on the icon circle/square (apply to .cb-mainico)
  • The color of the icon circle/square (apply to .cb-mainico)
  • The color of the data figure text (apply to .data-figure)
Simple Box with Default Color
101+ Programs and Degrees 
<div class="data-box bg-cgrey">
    <span class="data-figure">101+</span>
    <span class="data-description">Programs and Degrees</span>
</div>

Simple Box with Different Color

101+ Programs and Degrees

To use, simply add any text color class to the .data-figure

<div class="data-box bg-cgrey">
    <span class="data-figure text-cprimary">101+</span>
    <span class="data-description">Programs and Degrees</span>
</div>

Data Box with Circle Icon

101+ Programs and Degrees

To use, add .img-circle and any color class to div.cb-mainico.

<div class="data-box bg-cgrey">
    <div class="cb-mainico img-circle text-csecondary">
        <span aria-hidden="true" class="ico fab fa-twitter"></span>
    </div>
    <span class="data-figure">101+</span>
    <span class="data-description">Programs and Degrees</span>
</div>

Databox with Rounded-Square Icon

101+ Programs and Degrees

To use, add .img-rounded and any color class to div.cb-mainico.

<div class="data-box bg-cgrey">
    <div class="cb-mainico img-rounded text-csecondary">
        <span aria-hidden="true" class="ico fab fa-twitter"></span>
    </div>
    <span class="data-figure">101+</span>
    <span class="data-description">Programs and Degrees</span>
</div>

Patterns