<commit_before>{{#contentFor "title"}}Utlities{{/contentFor}}
{{#contentFor "tabName"}}utilities{{/contentFor}}
{{!< layouts/components.html}}

<h1 class="content-header">Utilities</h1>


<section class="pl-section" id="hover">
  <h3><a href="hover">Hover Effects</a></h3>
  <p>Add hover effects to elements to indicate elements that can be interacted with.</p>

  <h4 id="hoverShadow"><a href="#hoverShadow">Shadow</a></h4>
  <p>Add a shadow to element using <code>.hover-shadow</code>.</p>
  <div class="pl-example">

    <div class="card hover-shadow">
      <div class="card-block">
        A card that adds a dropshadow on mouse hover.
      </div>
    </div>

    <pre>
      <code class="html">
&lt;div class=&quot;card hover-shadow&quot;&gt;
  &lt;div class=&quot;card-block&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
      </code>
    </pre>
  </div>

  <h4 id="hoverDim"><a href="#hoverDim">Dim</a></h4>
  <p>Dim text or an entire element using <code>.hover-dim</code>.</p>
  <div class="pl-example">

    <p><a href="#" class="hover-dim">Link Text</a></p>

    <div class="card hover-dim">
      <div class="card-block">
        A card that dims on mouse hover.
      </div>
    </div>
    <pre>
      <code class="html">
&lt;div class=&quot;card hover-dim&quot;&gt;
  &lt;div class=&quot;card-block&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
      </code>
    </pre>
  </div>

  <h4 id="hoverPointer"><a href="#hoverPointer">Pointer (mouse)</a></h4>
  <p>Change the mouse cursor to a pointer on hover, to indicate elements that can be interacted with. This is best used in combination with another hover effect.</p>
  <div class="pl-example">
    <div class="card hover-shadow hover-pointer">
      <div class="card-block">
        A card that changes mouse cursor to pointer, and adds a shadow on hover.
      </div>
    </div>
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;card hover-shadow hover-pointer&quot;&gt;
  &lt;div class=&quot;card-block&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
    </code>
  </pre>

  <h4 id="hoverDim"><a href="#hoverDim">Underline</a></h4>
  <p>Underline text or text within an element using <code>.hover-underline</code>.</p>
  <div class="pl-example">
    <div class="card hover-underline">
      <div class="card-block">
        <h4 class="card-title">Header Underline</h4>
        <p class="card-text">A card that underlines text on hover.</p>
      </div>
    </div>
    <pre>
      <code class="html">
&lt;div class=&quot;card hover-underline&quot;&gt;
  &lt;div class=&quot;card-block&quot;&gt;
    &lt;h4 class=&quot;card-title&quot;&gt;Header Underline&lt;/h4&gt;
    &lt;p class=&quot;card-text&quot;&gt;A card that underlines text on hover.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
      </code>
    </pre>
  </div><commit_msg>documentation cleanup<commit_after>{{#contentFor "title"}}Utlities{{/contentFor}}
{{#contentFor "tabName"}}utilities{{/contentFor}}
{{!< layouts/components.html}}

<h1 class="content-header">Utilities</h1>


<section class="pl-section" id="hover">
  <h3><a href="hover">Hover Effects</a></h3>
  <p>Add hover effects to elements to indicate elements that can be interacted with.</p>

  <h4 id="hoverShadow"><a href="#hoverShadow">Shadow</a></h4>
  <p>Add a shadow to element using <code>.hover-shadow</code>.</p>
  <div class="pl-example">

    <div class="card hover-shadow m-b-0">
      <div class="card-block">
        A card that adds a dropshadow on mouse hover.
      </div>
    </div>
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;card hover-shadow&quot;&gt;
&lt;div class=&quot;card-block&quot;&gt;
  ...
&lt;/div&gt;
&lt;/div&gt;
    </code>
  </pre>

  <h4 id="hoverDim"><a href="#hoverDim">Dim</a></h4>
  <p>Dim text or an entire element using <code>.hover-dim</code>.</p>
  <div class="pl-example">

    <p><a href="#" class="hover-dim">Link Text</a></p>

    <div class="card hover-dim m-b-0">
      <div class="card-block">
        A card that dims on mouse hover.
      </div>
    </div>
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;card hover-dim&quot;&gt;
&lt;div class=&quot;card-block&quot;&gt;
  ...
&lt;/div&gt;
&lt;/div&gt;
    </code>
  </pre>

  <h4 id="hoverPointer"><a href="#hoverPointer">Pointer (mouse)</a></h4>
  <p>Change the mouse cursor to a pointer on hover, to indicate elements that can be interacted with. This is best used in combination with another hover effect.</p>
  <div class="pl-example">
    <div class="card hover-shadow hover-pointer m-b-0">
      <div class="card-block">
        A card that changes mouse cursor to pointer, and adds a shadow on hover.
      </div>
    </div>
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;card hover-shadow hover-pointer&quot;&gt;
  &lt;div class=&quot;card-block&quot;&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
    </code>
  </pre>

  <h4 id="hoverDim"><a href="#hoverDim">Underline</a></h4>
  <p>Underline text or text within an element using <code>.hover-underline</code>.</p>
  <div class="pl-example">
    <div class="card hover-underline m-b-0">
      <div class="card-block">
        <h4 class="card-title">Header Underline</h4>
        <p class="card-text">A card that underlines text on hover.</p>
      </div>
    </div>
  </div>
  <pre>
    <code class="html">
&lt;div class=&quot;card hover-underline&quot;&gt;
&lt;div class=&quot;card-block&quot;&gt;
  &lt;h4 class=&quot;card-title&quot;&gt;Header Underline&lt;/h4&gt;
  &lt;p class=&quot;card-text&quot;&gt;A card that underlines text on hover.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
    </code>
  </pre>
{'fraction_non_alphanumeric': 0.19867786314096839, 'fraction_numerical': 0.006432017152045739, 'mean_word_length': 3.5549227013832385, 'pattern_counts': {'":': 0, '<': 179, '<?xml version=': 0, '>': 177, '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': '86308', 'n_tokens_mistral': 2057, 'n_tokens_neox': 2012, 'n_words': 476}