Product Name

To Send Count stat

Does not require changes on mothership's markup

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

To Send Count stat

To use this version you need to update markup on mothership

Future Send List Count

Descriptions Here, use typography classes to customize

100,000
Contacts Added From List
100,000
PASSED STEP
100,000
Filtered
100,000
To Send Count

Future Send List Count

Use class .whole on row to highlight it. Use class .disabled to mark it as disabled

100,000
Contacts Added From List
100,000
PASSED STEPList
100,000
Filtered
100,000
To Send Count

Future Send List Count

Use class .alert on .lds-sent-list to hightlight alert on component

100,000
Contacts Added From List
100,000
PASSED STEP
100,000
Filtered
100,000
To Send Count
Show Code 
<div class="lds-sent-list ui grid gray background no margin">
  <div class="seven wide column lds-sent-description">
    <h4>Title Here</h4>
    <p class="text">Descriptions Here</p>
  </div>
  <div class="nine wide column lds-sent-funnel">>
    <div class="row dark-blue">
      <div class="count">100,000</div>
      <div class="description text tiny">Contacts Added From List</div>
    </div>
    
    <div class="row blue">
      <div class="count">100,000</div>
      <div class="description text tiny">PASSED STEP</div>
    </div>
    
    <div class="row light-blue">
      <div class="count">100,000</div>
      <div class="description text tiny">Filtered</div>
    </div>
    
    <div class="row white red">
      <div class="count">100,000</div>
      <div class="description text tiny">To Send Count</div>
    </div>
  </div>
</div>

Profile

Stats card

CONTACTS
VISITS
PAGES
FUNNELS
CONTACTS
Show Code 
<div class="ui stats card">
  <div class="content">
    <div class="stats">
      <div class="ui tiny blue progress active" data-value="3899" data-total="5000">
        <span>CONTACTS</span>
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
      <div class="ui tiny yellow progress active" data-value="4509" data-total="100000">
        <span>VISITS</span>
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
      <div class="ui tiny purple progress active" data-value="91" data-total="300">
        <span>PAGES</span>
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
      <div class="ui tiny olive progress active" data-value="45" data-total="70">
        <span>FUNNELS</span>
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
      <div class="ui tiny green progress active" data-value="1000" data-total="1000" >
        <span>CONTACTS</span>
        <div class="bar">
          <div class="progress"></div>
        </div>
      </div>
    </div>
  </div>
</div>
Alexis Ohanyan Expert Funnel Builder
45
46
CONTACTS
VISITS
PAGES
FUNNELS
Alexis Ohanyan Expert Funnel Builder
45
46
CONTACTS
VISITS
PAGES
FUNNELS
Alexis Ohanyan Expert Funnel Builder
45
46
CONTACTS
VISITS
PAGES
FUNNELS

*GASP* You maxed out your Contacts… To grow your business and to get more out of Click Funnels, we HIIIIGHLY recommend you upgrade your account now!

Upgrade Your Account
Show Code 
<div class="ui three column grid">
  <div class="three column row">
    <div class="column">
      <div class="ui fluid profile card">
        <div class="image">
          <img src="http://i.scdn.co/image/070594f113476f2e8a88f99befff3122405bcab9">
        </div>
        <div class="content">
          <a class="header">Alexis Ohanyan</a>
          <span class="rank">Expert Funnel Builder</span>

          <div class="ui small green progress levels active" data-value="854" data-total="1000" >
            <div class="level">45</div>
            <div class="green bar">
              <div class="progress centered white"></div>
            </div>
            <div class="level">46</div>
          </div>

          <div class="stats">
            <div class="ui tiny green progress active" data-value="0" data-total="5000">
              <span>CONTACTS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="0" data-total="100000">
              <span>VISITS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="0" data-total="300">
              <span>PAGES</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="0" data-total="70">
              <span>FUNNELS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="ui fluid profile card">
        <div class="image">
          <img src="http://i.scdn.co/image/070594f113476f2e8a88f99befff3122405bcab9">
        </div>
        <div class="content">
          <a class="header">Alexis Ohanyan</a>
          <span class="rank">Expert Funnel Builder</span>

          <div class="ui small green progress levels active" data-value="854" data-total="1000" >
            <div class="level">45</div>
            <div class="green bar">
              <div class="progress centered white"></div>
            </div>
            <div class="level">46</div>
          </div>

          <div class="stats">
            <div class="ui tiny green progress active" data-value="3,899" data-total="5000">
              <span>CONTACTS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="4509" data-total="100000">
              <span>VISITS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="91" data-total="300">
              <span>PAGES</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="45" data-total="70">
              <span>FUNNELS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <div class="ui fluid profile card">
        <div class="image">
          <img src="http://i.scdn.co/image/070594f113476f2e8a88f99befff3122405bcab9">
        </div>
        <div class="content">
          <a class="header">Alexis Ohanyan</a>
          <span class="rank">Expert Funnel Builder</span>

          <div class="ui small green progress levels active" data-value="854" data-total="1000" >
            <div class="level">45</div>
            <div class="green bar">
              <div class="progress centered white"></div>
            </div>
            <div class="level">46</div>
          </div>

          <div class="stats">
            <div class="ui tiny green progress active" data-value="1000" data-total="1000" >
              <span>CONTACTS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="4509" data-total="100000">
              <span>VISITS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="91" data-total="300">
              <span>PAGES</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
            <div class="ui tiny green progress active" data-value="45" data-total="70">
              <span>FUNNELS</span>
              <div class="bar">
                <div class="progress"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="message">
          <p class="text center aligned grey">
            *GASP* You maxed out your <a href="#">Contacts…</a> To grow your business and to get more out of Click Funnels, we HIIIIGHLY recommend you upgrade your account now!
          </p>
          <div class="ui secondary mini button"><b>Upgrade Your Account</b></div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.ui.progress.tiny').progress({
    label: 'ratio',
    text: {
      ratio: '<span>' + '{value}' + '</span> OF <b>{total}</b>'
    },
    onSuccess: function(){

      if($(this).progress('is complete')) {
        $(this).addClass('error')
      }
    }
  })
</script>

Statistic cards

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
SENT 3.965
SENT 3.965
Clicked
SENT 3.965
SENT 3.965
Clicked
SENT 3.965
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
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
SENT 3.965
SENT 3.965
Clicked
SENT 3.965
SENT 3.965
Clicked
SENT 3.965
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

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

SENT

35,100 / 71,502
Clicked

SENT

35,100 / 71,502
Clicked

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
$997
GROSS
$45,862
EARNINGS PER CLICK
$6,551.71
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
$6,551.71
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
$997
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
$997
GROSS
$45,862
EARNINGS PER CLICK
$6,551.71
EARNINGS PER CLICK
$6,551.71
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

1

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>