Redbooth

Cells

CellsCells - Basic

This element is used for list of "cells" that live inside cards

MR
Mr. Robot
<div class="cells__item [modifier class]">
  <div class="cells__item__icon">
    <span class="js-avatar tb-avatar tb-avatar-small tb-avatar-has-color bg-picker-orange-2">
      <span class="tb-avatars-initials">MR</span>
    </span>
  </div>
  <div class="cells__item__body">
    <div class="cells__item__name">Mr. Robot</div>
  </div>
  <div class="cells__item__meta">
    <button class="button button-icon-only button-middle button--naked">
      <i class="button-icon icon-tb-cross"></i>
    </button>
  </div>
</div>

Cells ItemCells - Basic

This element is used for the element of "cell"

  • .cells__item--dim - A darker version
  • .cells__item--own - A "owned" colored version
  • .cells__item--special - An "accent" colored version
MR
Mr. Robot
.cells__item--dim
MR
Mr. Robot
.cells__item--own
MR
Mr. Robot
.cells__item--special
MR
Mr. Robot
<div class="cells__item [modifier class]">
  <div class="cells__item__icon">
    <span class="js-avatar tb-avatar tb-avatar-small tb-avatar-has-color bg-picker-orange-2">
      <span class="tb-avatars-initials">MR</span>
    </span>
  </div>
  <div class="cells__item__body">
    <div class="cells__item__name">Mr. Robot</div>
  </div>
  <div class="cells__item__meta">
    <button class="button button-icon-only button-middle button--naked">
      <i class="button-icon icon-tb-cross"></i>
    </button>
  </div>
</div>