<commit_before>---
title: "Default"
description: |
  <p>Cubby is an evolution UI component that attempts to make displaying tabular data a little more space efficient.  It does this by hiding part of the content in a <code>td</code> element with the class of <code>.evo_c-cubby</code> in a <code>table</code> behind other data.  Content within the <code>td class="evo_c-cubby</code> tag is split into two <code>div</code>s, the first with a class of <code>.evo_c-cubby__door</code> and the second with a class of <code>.evo_c-cubby__inside</code>.  On hovering of the <code>td</code> cell, it creates the effect of a door swinging open to reveal the hidden content behind the first <code>div class="evo_c-cubby__door</code> tag.  This component requires no JavaScript.</p>

  <p>One limitation of this component is that it requires <code>hover</code> state to be firing within the client which may make it unsuitable for mobile uses.  Also, the content of both <code>div</code>s should be about the same amout to prevent content in <code>inside</code> to peak out from behind content from <code>door</code> until this can be remedied.</p>
type: cubby
order: 1
---

  <table>
    <thead>
      <tr>
        <th>Demo Column 1</th>
        <th>Demo Column 2</th>
        <th>Demo Column 3</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 1
        </div>
        <div class="evo_c-cubby__inside">
          More Info 1
        </div>
      </td>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 2
        </div>
        <div class="evo_c-cubby__inside">
          More Info 2
        </div>
      </td>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door"><commit_msg>Added the class evo_h-cubby-table to table tag in cubby for fixed height and full width of cubby.<commit_after>---
title: "Default"
description: |
  <p>Cubby is an evolution UI component that attempts to make displaying tabular data a little more space efficient.  It does this by hiding part of the content in a <code>td</code> element with the class of <code>.evo_c-cubby</code> in a <code>table</code> behind other data.  Content within the <code>td class="evo_c-cubby</code> tag is split into two <code>div</code>s, the first with a class of <code>.evo_c-cubby__door</code> and the second with a class of <code>.evo_c-cubby__inside</code>.  On hovering of the <code>td</code> cell, it creates the effect of a door swinging open to reveal the hidden content behind the first <code>div class="evo_c-cubby__door</code> tag.  This component requires no JavaScript.  The helper class <code>.evo_h-cubby-table</code> defines an arbitrary height value and width of 100% for the table containing cubby so content doesn't become hidden behind the component.</p>

  <p>One limitation of this component is that it requires <code>hover</code> state to be firing within the client which may make it unsuitable for mobile uses.  Also, the content of both <code>div</code>s should be about the same amout to prevent content in <code>inside</code> to peak out from behind content from <code>door</code> until this can be remedied.</p>
type: cubby
order: 1
---

  <table class="evo_h-cubby-table">
    <thead>
      <tr>
        <th>Demo Column 1</th>
        <th>Demo Column 2</th>
        <th>Demo Column 3</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 1
        </div>
        <div class="evo_c-cubby__inside">
          More Info 1
        </div>
      </td>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
          Demo Door 2
        </div>
        <div class="evo_c-cubby__inside">
          More Info 2
        </div>
      </td>
      <td class="evo_c-cubby">
        <div class="evo_c-cubby__door">
{'fraction_non_alphanumeric': 0.11164801627670397, 'fraction_numerical': 0.004832146490335707, 'mean_word_length': 2.9134328358208954, 'pattern_counts': {'":': 0, '<': 119, '<?xml version=': 0, '>': 119, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '92311', 'n_tokens_mistral': 1323, 'n_tokens_neox': 1236, 'n_words': 466}