lims-frontent/tests/unit/views/theme/__snapshots__/Typography.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Typography.vue renders correctly 1`] = `
<div>
  <div
    class="card"
  >
    <div
      class="card-header"
    >
      
      Headings
    
    </div>
     
    <div
      class="card-body"
    >
      <p>
        Documentation and examples for Bootstrap typography,
        including global settings, headings, body text, lists, and more.
      </p>
       
      <table
        class="table"
      >
        <thead>
          <tr>
            <th>
              Heading
            </th>
             
            <th>
              Example
            </th>
          </tr>
        </thead>
         
        <tbody>
          <tr>
            <td>
              <p>
                <code
                  class="highlighter-rouge"
                >
                  
                  &lt;h1&gt;&lt;/h1&gt;
                
                </code>
              </p>
            </td>
             
            <td>
              <span
                class="h1"
              >
                h1. Bootstrap heading
              </span>
            </td>
          </tr>
           
          <tr>
            <td>
              <p>
                <code
                  class="highlighter-rouge"
                >
                  
                  &lt;h2&gt;&lt;/h2&gt;
                
                </code>
              </p>
            </td>
             
            <td>
              <span
                class="h2"
              >
                h2. Bootstrap heading
              </span>
            </td>
          </tr>
           
          <tr>
            <td>
              <p>
                <code
                  class="highlighter-rouge"
                >
                  
                  &lt;h3&gt;&lt;/h3&gt;
                
                </code>
              </p>
            </td>
             
            <td>
              <span
                class="h3"
              >
                h3. Bootstrap heading
              </span>
            </td>
          </tr>
           
          <tr>
            <td>
              <p>
                <code
                  class="highlighter-rouge"
                >
                  
                  &lt;h4&gt;&lt;/h4&gt;
                
                </code>
              </p>
            </td>
             
            <td>
              <span
                class="h4"
              >
                h4. Bootstrap heading
              </span>
            </td>
          </tr>
           
          <tr>
            <td>
              <p>
                <code
                  class="highlighter-rouge"
                >
                  
                  &lt;h5&gt;&lt;/h5&gt;
                
                </code>
              </p>
            </td>
             
            <td>
              <span
                class="h5"
              >
                h5. Bootstrap heading
              </span>
            </td>
          </tr>
           
          <tr>
            <td>
              <p>
                <code
                  class="highlighter-rouge"
                >
                  
                  &lt;h6&gt;&lt;/h6&gt;
                
                </code>
              </p>
            </td>
             
            <td>
              <span
                class="h6"
              >
                h6. Bootstrap heading
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
   
  <div
    class="card"
  >
    <div
      class="card-header"
    >
      
      Headings
    
    </div>
     
    <div
      class="card-body"
    >
      <p>
        <code
          class="highlighter-rouge"
        >
          .h1
        </code>
         through
        
        <code
          class="highlighter-rouge"
        >
          .h6
        </code>
        
        classes are also available, for when you want to match the font
        styling of a heading but cannot use the associated HTML element.
      
      </p>
       
      <div
        class="bd-example"
      >
        <p
          class="h1"
        >
          h1. Bootstrap heading
        </p>
         
        <p
          class="h2"
        >
          h2. Bootstrap heading
        </p>
         
        <p
          class="h3"
        >
          h3. Bootstrap heading
        </p>
         
        <p
          class="h4"
        >
          h4. Bootstrap heading
        </p>
         
        <p
          class="h5"
        >
          h5. Bootstrap heading
        </p>
         
        <p
          class="h6"
        >
          h6. Bootstrap heading
        </p>
      </div>
    </div>
  </div>
   
  <div
    class="card"
  >
    <div
      class="card-header"
    >
      
      Display headings
    
    </div>
     
    <div
      class="card-body"
    >
      <p>
        
        Traditional heading elements are designed to work best in the meat
        of your page content. When you need a heading to stand out,
        consider using a 
        <strong>
          display heading
        </strong>
        —a larger,
         slightly more opinionated heading style.
      
      </p>
       
      <div
        class="bd-example bd-example-type"
      >
        <table
          class="table"
        >
          <tbody>
            <tr>
              <td>
                <span
                  class="display-1"
                >
                  Display 1
                </span>
              </td>
            </tr>
             
            <tr>
              <td>
                <span
                  class="display-2"
                >
                  Display 2
                </span>
              </td>
            </tr>
             
            <tr>
              <td>
                <span
                  class="display-3"
                >
                  Display 3
                </span>
              </td>
            </tr>
             
            <tr>
              <td>
                <span
                  class="display-4"
                >
                  Display 4
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
   
  <div
    class="card"
  >
    <div
      class="card-header"
    >
      
      Inline text elements
    
    </div>
     
    <div
      class="card-body"
    >
      <p>
        
        Traditional heading elements are designed to work best in the meat
        of your page content. When you need a heading to stand out,
        consider using a 
        <strong>
          display heading
        </strong>
        —a larger,
        slightly more opinionated heading style.
      
      </p>
       
      <div
        class="bd-example"
      >
        <p>
          You can use the mark tag to 
          <mark>
            highlight
          </mark>
           text.
        </p>
         
        <p>
          <del>
            
          This line of text is meant to be treated as deleted text.
        
          </del>
        </p>
         
        <p>
          <s>
            
          This line of text is meant to be treated as no longer accurate.
        
          </s>
        </p>
         
        <p>
          <ins>
            
          This line of text is meant to be treated as an addition to the document.
        
          </ins>
        </p>
         
        <p>
          <u>
            This line of text will render as underlined
          </u>
        </p>
         
        <p>
          <small>
            
          This line of text is meant to be treated as fine print.
        
          </small>
        </p>
         
        <p>
          <strong>
            This line rendered as bold text.
          </strong>
        </p>
         
        <p>
          <em>
            This line rendered as italicized text.
          </em>
        </p>
      </div>
    </div>
  </div>
   
  <div
    class="card"
  >
    <div
      class="card-header"
    >
      
      Description list alignment
    
    </div>
     
    <div
      class="card-body"
    >
      <p>
        
        Align terms and descriptions horizontally by using our grid system’s
        predefined classes (or semantic mixins). For longer terms, you can
        optionally add a 
        <code
          class="highlighter-rouge"
        >
          .text-truncate
        </code>
        
        class to truncate the text with an ellipsis.
      
      </p>
       
      <div
        class="bd-example"
      >
        <dl
          class="row"
        >
          <dt
            class="col-sm-3"
          >
            Description lists
          </dt>
           
          <dd
            class="col-sm-9"
          >
            
            A description list is perfect for defining terms.
          
          </dd>
           
          <dt
            class="col-sm-3"
          >
            Euismod
          </dt>
           
          <dd
            class="col-sm-9"
          >
            <p>
              Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
            </p>
             
            <p>
              Donec id elit non mi porta gravida at eget metus.
            </p>
          </dd>
           
          <dt
            class="col-sm-3"
          >
            Malesuada porta
          </dt>
           
          <dd
            class="col-sm-9"
          >
            
            Etiam porta sem malesuada magna mollis euismod.
          
          </dd>
           
          <dt
            class="col-sm-3 text-truncate"
          >
            Truncated term is truncated
          </dt>
           
          <dd
            class="col-sm-9"
          >
            
            Fusce dapibus, tellus ac cursus commodo, tortor mauris
            condimentum nibh, ut fermentum massa justo sit amet risus.
          
          </dd>
           
          <dt
            class="col-sm-3"
          >
            Nesting
          </dt>
           
          <dd
            class="col-sm-9"
          >
            <dl
              class="row"
            >
              <dt
                class="col-sm-4"
              >
                Nested definition list
              </dt>
               
              <dd
                class="col-sm-8"
              >
                
                Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
              
              </dd>
            </dl>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>
`;