Product Name

Statistic cards

Statistics are built on cards, but use custom JS to create the circular graph. There are currently three sizes for statistic cards, large, medium and small. The small card does not require a small class.

Large Stats Cards

Clicked

10%

SENT 3.965

Clicked

10%

SENT 3.965

Clicked

10%

SENT 3.965

Show Code

<div class="ui cards">
  <div class="ui statistic round card">
    <div class="title">
      <i class="hand point up outline icon"></i> 
      Clicked
    </div>

    <div class="content">
      <div class="progress round centered first"></div>
    </div>

    <div class="extra content">
      <div class="stats">
        <div class="stat">
          SENT
          <span class="ui text green">3.965</span>
        </div>
        <div class="stat">
          SENT
          <span class="ui text yellow">3.965</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.progress.round').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    prefix: '',
    sideSize: 100, //this is default value; optional
    lineWidth: 10, //this is default value; optional
    bars: [
      { 
        value: 89, 
        bgColor: '#eeeeee', 
        color: '#ffb90e' 
      }
    ]
  });
</script>

Disabled/unavailable stats

None

NONE 0

Show Code

<div class="ui cards">
  <div class="ui statistic round card unavailable">
    <div class="title">
      None
    </div>

    <div class="content">
      <div class="progress round centered fourth"></div>
    </div>

    <div class="extra content">
      <div class="stats">
        <div class="stat">
          NONE
          <span class="ui text yellow">0</span>
        </div>
      </div>
    </div>
  </div>
</div>

Large Stats with tool tips (pop-ups)

Clicked

10%

SENT 89

FAILED 11

Show Code

<div class="ui cards">
  <div class="ui statistic round card">
    <div class="title">
      <i class="hand point up outline icon"></i> 
      Clicked
    </div>
    <div class="content">
      <div class="progress round centered first"  data-tooltip="89 out of 100 emails sucessfully sent"></div>
    </div>
    <div class="extra content">
      <div class="stats">
        <div class="stat" data-tooltip="89 emails were sent successfully">
          SENT
          <span class="ui text green">89</span>
        </div>
        <div class="stat" data-tooltip="11 emails failed to send">
          FAILED
          <span class="ui text yellow">11</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.progress.round').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    prefix: '',
    bars: [
      { 
        value: 89, 
        bgColor: '#eeeeee', 
        color: '#ffb90e' 
      }
    ]
  });
</script>

Large Stats In Grid

Clicked

10%

SENT 3.965

Clicked

10%

SENT 3.965

Clicked

10%

SENT 3.965

None

NONE 0

Show Code

<div class="ui four column cards grid">
  <div class="column">
    <div class="ui statistic round card">
      <div class="title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="content">
        <div class="progress round centered first"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            SENT
            <span class="ui text green">3.965</span>
          </div>
          <div class="stat">
            SENT
            <span class="ui text yellow">3.965</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="content">
        <div class="progress round centered second"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            SENT
            <span class="ui text green">3.965</span>
          </div>
          <div class="stat">
            SENT
            <span class="ui text yellow">3.965</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="content">
        <div class="progress round centered third"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            SENT
            <span class="ui text green">3.965</span>
          </div>
          <div class="stat">
            SENT
            <span class="ui text yellow">3.965</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card unavailable">
      <div class="title">
        None
      </div>
      <div class="content">
        <div class="progress round centered fourth"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            NONE
            <span class="ui text yellow">0</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.progress.round').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    prefix: '',
    bars: [
      { 
        value: 89, 
        bgColor: '#eeeeee', 
        color: '#ffb90e' 
      }
    ]
  });
  //repeat for each card
</script>

Medium Stats

Clicked

10%

SENT

35,100 / 71,502

Show Code

<div class="ui cards">
  <div class="ui statistic round card">
    <div class="ui middle aligned two column grid">
      <div class="left aligned column title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="right aligned column">
        <!--  Note: the classes 'small one' are not necessary and are simply there for js selecting purposes -->
        <div class="progress round right aligned small one"></div>
      </div>
    </div>
    <div class="stats content">
      <div class="stat">
        <p class="small grey bold text">SENT</p>
        <span class="large green bold text">35,100</span>
        <span class="large text"> / </span>
        <span class="large grey bold text">71,502</span></h4>
      </div>
    </div>
  </div>
</div>


<script>
  //Note: the classes 'small one' are not necessary and are simply there for js selecting purposes
  $('.progress.round.small.one').each(function(){
    $(this).cfCircleProgress({
      theme: "statistic",
      postfix: "%",
      sideSize: 50,
      lineWidth: 4,
      bars: [
        { 
          value: 49, 
          bgColor: '#eeeeee', 
          color: '#06ae78' 
        }
      ]
    });
  })
</script>

Medium disabled/unavailable

Sent

SENT

-- / --

Show Code

<div class="ui cards">
  <div class="ui statistic round card unavailable">
    <div class="ui middle aligned two column grid">
      <div class="left aligned column title">
        <i class="hand point up outline icon"></i> 
        Sent
      </div>
      <div class="right aligned column">
        <div class="progress round right aligned small four"></div>
      </div>
    </div>
    <div class="stats content">
      <div class="stat">
        <p class="small grey bold text">SENT</p>
        <span class="large green bold text">--</span>
        <span class="large text"> / </span>
        <span class="large grey bold text">--</span></h4>
      </div>
    </div>
  </div>
</div>

<script>
  //Note: the classes 'small one' are not necessary and are simply there for js selecting purposes. Could be 'pickle feather'
  $('.progress.round.small.one').each(function(){
    $(this).cfCircleProgress({
      theme: "statistic",
      postfix: "%",
      sideSize: 50,
      lineWidth: 4,
      bars: [
        { 
          value: 49, 
          bgColor: '#eeeeee', 
          color: '#06ae78' 
        }
      ]
    });
  })
</script>

Medium Stats In Grid

Clicked

10%

SENT

35,100 / 71,502

Clicked

10%

SENT

35,100 / 71,502

Clicked

10%

SENT

35,100 / 71,502

Sent

SENT

-- / --

Show Code

<div class="ui four column cards grid">
  <div class="column">
    <div class="ui statistic round card">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Clicked
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small one"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">35,100</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">71,502</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Clicked
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small two"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">35,100</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">71,502</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Clicked
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small three"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">35,100</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">71,502</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card unavailable">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Sent
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small four"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">--</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">--</span></h4>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  //Note: the classes 'small one' are not necessary and are simply there for js selecting purposes. Could be 'pickle feather'
  $('.progress.round.small.one').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    sideSize: 50,
    lineWidth: 4,
    bars: [
      { 
        value: 49, 
        bgColor: '#eeeeee', 
        color: '#06ae78' 
      }
    ]
  });
  //repeat for each
</script>

Small Stats

AVERAGE CART VALUE

GROSS

EARNINGS PER CLICK

Show Code

<div class="ui cards">
  <div class="ui statistic card">
    <div class="content">
      <div class="ui items">
        <div class="item">
          <div class="ui image">
            <i class="large icons">
              <i class="big thin green circle icon"></i>
              <i class="chart line inverted icon"></i>
            </i>
          </div>
          <div class="content">
            <div class="description" title="Earnings Per click">
              AVERAGE CART VALUE
            </div>
            <div class="header" title="$454">$997</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Disabled/Unavailable

EARNINGS PER CLICK

Show Code

<div class="ui cards">
  <div class="ui statistic card unavailable">
    <div class="content">
      <div class="ui items">
        <div class="item">
          <div class="ui image">
            <i class="large icons">
              <i class="big thin orange circle icon"></i>
              <i class="home inverted icon"></i>
            </i>
          </div>
          <div class="content">
            <div class="description" title="Earnings Per click">
              EARNINGS PER CLICK
            </div>
            <div class="header" title="$454">$6,551.71</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With Link

AVERAGE CART VALUE

Show Code

<div class="ui cards">
  <a href="#" class="ui statistic card">
    <div class="content">
      <div class="ui items">
        <div class="item">
          <div class="ui image">
            <i class="large icons">
              <i class="big thin green circle icon"></i>
              <i class="chart line inverted icon"></i>
            </i>
          </div>
          <div class="content">
            <div class="description" title="Earnings Per click">
              AVERAGE CART VALUE
            </div>
            <div class="header" title="$454">$997</div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

Small Stats In Grid

AVERAGE CART VALUE

GROSS

EARNINGS PER CLICK

Show Code

<div class="ui four column cards grid">
  <div class="column">
    <div class="ui statistic card fluid">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin green circle icon"></i>
                <i class="chart line inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                AVERAGE CART VALUE
              </div>
              <div class="header" title="$454">$997</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic card fluid">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin yellow circle icon"></i>
                <i class="chart bar inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                GROSS
              </div>
              <div class="header" title="$454">$45,862</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic card fluid">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin orange circle icon"></i>
                <i class="home inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                EARNINGS PER CLICK
              </div>
              <div class="header" title="$454">$6,551.71</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic card unavailable">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin orange circle icon"></i>
                <i class="home inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                EARNINGS PER CLICK
              </div>
              <div class="header" title="$454">$6,551.71</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nested stats cards

Currently only used in Contact Profile header

ACTION
SCORE

Show Code

<div class="ui cards">
  <div class="ui statistic nested card">
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#E4E35D" data-bg="#0a5185" data-percent='0.25'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#2ccf70" data-bg="#156399" data-percent='0.14'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#9f58b6" data-bg="#1f71ab" data-percent='0.21'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#3398d8" data-bg="#2a80bf" data-percent='0.36'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#10be9a" data-bg="#3892d0" data-percent='0.35'></canvas>
    </div>
    <div class="score centered">
      <p>1</p>
      <span>ACTION<br>SCORE</span>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.nested.statistic .progress.round').cfCircleProgress({
    theme: 'nested',
    content: "<p>26</p><span>ACTION<br>SCORE</span>",
    sideSize: 150, //size is customizable
    lineWidth: 5, //so is line width (thickness)
    bars: [
      { value: 15, bgColor: '#0a5185', color: '#e4e35d' },
      { value: 88, bgColor: '#156399', color: '#2ccf70' },
      { value: 41, bgColor: '#1f71ab', color: '#9f58b6' },
      { value: 55, bgColor: '#3892d0', color: '#1ebd6e' },
    ]
  });
</script>

To Send Count stat

10,000

Total contact List

-5,000

Filtered

-2,000

Passed Step

3,000

To send count

Future Send List (disabled row)

10,000

Total contact List

-2,000

Filtered

Passed Step

3,000

To send count

10,000

Total contact List

-5,000

Filtered

-2,000

Passed Step

3,000

To send count

FUNNELS

FOLLOW-UP FUNNELS

PRODUCTS

Product Name

PAGES

Statistic cards

Statistic cards

Large Stats Cards

Disabled/unavailable stats

Large Stats with tool tips (pop-ups)

Large Stats In Grid

Medium Stats

Medium disabled/unavailable

Medium Stats In Grid

Small Stats

Disabled/Unavailable

With Link

Small Stats In Grid

Nested stats cards

To Send Count stat

Future Send List (disabled row)