Boxes

Documentation for callcentrum boxes.

Files

app/styles/modules/_callcentrum.scss

Info box

Callcentrum info boxes are designed to display content in informative way such as list. Info box can have header .callcntr-info-box_header and multiple content wrappers .callcntr-info-box_content.

Example:code
Code: 
<article class="callcntr-info-box">
  <header class="callcntr-info-box_header">
    <h3>Agents</h3>
  </header>
  <div class="callcntr-info-box_content">
    <h4 class="text-normal">Reports of incoming calls</h4>
    <ul class="list list-no-borders">
      <li class="list-item"><a>Hourly</a></li>
      <li class="list-item"><a>Daily</a></li>
      <li class="list-item"><a>Weekly</a></li>
    </ul>
  </div>
  <div class="callcntr-info-box_content">
    <h4 class="text-normal">Reports of incoming and outgoing calls</h4>
    <ul class="list list-no-borders">
      <li class="list-item"><a>Summary incoming and outgoing</a></li>
    </ul>
  </div>
</article>

Gray info box with icon

Info box can by gray theme with class .callcntr-info-box-gray.

Example:code

settingsSettings

Code: 
<article class="callcntr-info-box callcntr-info-box-gray">
  ...
</article>

Small info box

Class .callcntr-info-box-small makes info box more condensed.

Note

You can use .callcntr-status component in info box header.
Example:code
Test_IPEX
  • Všetci
    12
  • Volní
    5
  • Obsadený
    5
  • Na pauze
    4
  • Hovory
    0
  • Čakajúci
    0
  • Neviriešené
    5
Code: 
<article class="callcntr-info-box callcntr-info-box-small">
  <header class="callcntr-info-box_header">
    <div class="callcntr-status">
      <i class="callcntr-status-type callcntr-status-type-green"></i>
      <div class="callcntr-status-content">
        <div class="callcntr-status-content-line text-color-black">Test_IPEX</div>
      </div>
    </div>
  </header>
  <div class="callcntr-info-box_content">
    <ul class="list list-no-borders">
      <li class="list-item">Všetci
        <div class="pull-right">12</div>
      </li>
      <li class="list-item">Volní
        <div class="pull-right">5</div>
      </li>
    </ul>
  </div>
</article>

Vertical box

Callcentrum vertical box

Example:code

83

Prebiehajúcich hovorov

51

Čakajúcich hovorov

93

Prebiehajúcich hovorov

00:12:32

Obslúžených hovorov

02:45:12

V callcentre

Code: 
<article class="callcntr-box-vertical">
  <div class="callcntr-box-vertical_item">
    <h3 class="no-mrg">83</h3>
    <p class="no-mrg text-color-gray-400">Prebiehajúcich hovorov</p>
  </div>
  <div class="callcntr-box-vertical_item">
    <h3 class="no-mrg">51</h3>
    <p class="no-mrg text-color-gray-400">Čakajúcich hovorov</p>
  </div>
</article>