Loading

T13 UI Framework

Typography

The typography is based on a 10px font-size. All values are relative to this base value.

Heading Styles

  • Heading 1 (24px)

  • Heading 2 (18px)

  • Heading 3 (16px)

  • Heading 4 (14px)

  • Heading 5 (12px)

  • Heading 6 (11px)

Inline Styles

  • This text is marked strong
  • This text is emphasized.
  • This text is underlined.

Body Copy

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Blockquote

A man's worth is no greater than his ambissions. --Marcus Aurelius

Pagination

The pagination component makes use of unordered lists with BEM styling and block states.



    <ol class="t13-c-pagination">
        <li class="t13-c-pagination__chevron"><a href="#"><i class="fa fa-chevron-left"></i></a></li>
        <li class="t13-c-pagination__item"><a href="#">1</a></li>
        <li class="t13-c-pagination__item"><a href="#">2</a></li>
        <li class="t13-c-pagination__item is-active"><a href="#">3</a></li>
        <li class="t13-c-pagination__item"><a href="#">4</a></li>
        <li class="t13-c-pagination__item"><a href="#">5</a></li>
        <li class="t13-c-pagination__chevron"><a href="#"><i class="fa fa-chevron-right"></i></a></li>
      </ol>


                


      <ol class="t13-c-pagination">
          <li class="t13-c-pagination__chevron">
            <a href="#"> <i class="fa fa-chevron-left"> </i></a>
          </li>
          <li class="t13-c-pagination__item t13-c-pagination__item--bordered"> <a href="#"> 1</a></li>
          <li class="t13-c-pagination__item t13-c-pagination__item--bordered"> <a href="#"> 2</a></li>
          <li class="t13-c-pagination__item--bordered is-active"><a href="#"> 3</a></li>
          <li class="t13-c-pagination__item t13-c-pagination__item--bordered"> <a href="#"> 4</a></li>
          <li class="t13-c-pagination__item t13-c-pagination__item--bordered"> <a href="#"> 5</a></li>
          <li class="t13-c-pagination__chevron">
            <a href="#"> <i class="fa fa-chevron-right"> </i></a>
          </li>
        </ol>

Buttons

Hover and click on elements to see the hover and active styles.

Basic


<h2>Basic</h2><br />

<ul class="t13-button-container"><br />

    <li><button class="t13-button">Primary</button></li><br />

    <li><button class="t13-button"><i class="fa fa-send"></i>Send</button></li><br />

    <li><button class="t13-button"><i class="fa fa-user-plus"></i>Add User</button></li><br />

    <li><button class="t13-button" disabled><i class="fa fa-cog"></i>Settings</button></li><br />

</ul>

Call to Action Shake (Innovative)

The use of animation can be a useful tool for communicating the importance of a primary call to action. Simply add the class `t13-shake` to any call to action to implement the animation. Some use cases can be found below.

Hover Shake

Hover over the buttons to see the shake animation in action.

Call to Action On Page

The example on a sample page shows how the shake movement immediately draws your eye to the call to action.

Call to Action On Page With 5s Delay

The `animation-delay` property can be set to not shake until a certain amount of time has passed. This allows the visitor a chance to read the site and take action before the visual animation takes place.

Hover your mouse anywhere in the example and wait 5s for the animation to start.



        <ul class="t13-button-container"><br />

            <li><button class="t13-button t13-shake">Primary</button></li><br />

            <li><button class="t13-button t13-shake"><i class="fa fa-send"></i>Send</button></li><br />

            <li><button class="t13-button t13-shake"><i class="fa fa-user-plus"></i>Add User</button></li><br />

            <li><button class="t13-button t13-shake" disabled><i class="fa fa-cog"></i>Settings</button></li><br />

        </ul>

Cards

Cards are an all-around flexible and composable component. They are a great way to contain and organize information, while also setting up predictable expectations for the user. Cards may contain a photo, text, and a link about a single subject.

Article Teaser

Travel

April, 2017

Travel around the World - $ 10.000

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex explicabo fugiat minus neque qui quibusdam. Accusamus facilis ipsa laborum, neque quos sequi voluptatum! Earum eius iusto molestias obcaecati voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam asperiores aspernatur cum, dolorem fugiat illum incidunt maxime molestiae natus necessitatibus quia quisquam, rerum similique voluptatibus. Accusamus consectetur porro sed. lendus repudiandae tempore vitae voluptatibus!

Read more.. 

<div class="t13-card">
  <div class="t13-card-image">
      <h2 class="t13-card-title">Travel</h2>
  </div>
  <div class="t13-card-main">
      <h4 class="t13-card-main-date">April, 2017</h4>
      <h2 class="t13-card-main-title">Travel around the World - $ 10.000</h2>
      <hr class="t13-card-hr">
      <p class="t13-card-main-content">Lorem ipsum dolor sit amet</p>
      <span class="t13-cards-button t13-cards-button-primary t13-cards-button-hover">Read more..</span>
  </div>
</div>

Contact Card

profile-pic

Peyton Anderson

Senior Frontend Developer


<div class="t13-card">
  <div class="t13-card-image">
    <img class="t13-card-profile-img" src="https://randomuser.me/api/portraits/women/11.jpg" alt="profile-pic">
  </div>
  <div class="t13-card-main-profile">
    <h1 class="t13-card-main-profile-name">Peyton Anderson </h1>
    <h3 class="t13-card-main-profile-name-desc">Senior Frontend Developer</h3>
    <hr class="t13-card-hr t13-card-hr-gray">
    <div class="t13-card-profile-social">
      <a href=""><i class="fa fa-envelope" aria-hidden="true"></i></a>
      <a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
      <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

Call to Action Card

Take a survey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex explicabo fugiat minus neque qui quibusdam. Accusamus facilis ipsa laborum, neque quos sequi voluptatum! Earum eius iusto molestias obcaecati voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Nope Okay! 

<div class="t13-card">
  <div class="t13-card-action">
    <div class="t13-card-header">
      <i class="fa fa-pencil" aria-hidden="true"></i>
    </div>
    <div class="t13-card-main">
      <h2 class="t13-card-main-title t13-cards-text-big">Take a survey?</h2>
      <p class="t13-card-main-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex explicabo fugiat minus neque qui
        quibusdam. Accusamus facilis ipsa laborum, neque quos sequi voluptatum! Earum eius iusto molestias
        obcaecati voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <div class="t13-cards-button t13-cards-button-container">
        <span class="t13-cards-button t13-cards-button-gray t13-cards-button-gray-hover">Nope</span>
        <span class="t13-cards-button t13-cards-button-primary t13-cards-button-hover ">Okay!</span>
      </div>
    </div>
  </div>
</div>

Call to Action Card Fluid

Take a survey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex explicabo fugiat minus neque qui quibusdam. Accusamus facilis ipsa laborum, neque quos sequi voluptatum! Earum eius iusto molestias obcaecati voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Nope Okay! 

<div class="t13-card t13-card-fluid">
  <div class="t13-card-action">
    <div class="t13-card-header">
      <i class="fa fa-pencil" aria-hidden="true"></i>
    </div>
    <div class="t13-card-main">
      <h2 class="t13-card-main-title t13-cards-text-big">Take a survey?</h2>
      <p class="t13-card-main-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ex explicabo fugiat minus neque qui
        quibusdam. Accusamus facilis ipsa laborum, neque quos sequi voluptatum! Earum eius iusto molestias
        obcaecati voluptate?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
      <div class="t13-cards-button t13-cards-button-container">
        <span class="t13-cards-button t13-cards-button-gray t13-cards-button-gray-hover">Nope</span>
        <span class="t13-cards-button t13-cards-button-primary t13-cards-button-hover ">Okay!</span>
      </div>
    </div>
  </div>
</div>

Accordions

Accordions are elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user. Hover and click on elements to see the hover and active styles.

Default Accordion

Cows Everywhere

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.

Even more Cows Everywhere

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.

Cow alarm

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.


<div class="t13-accordion">
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="section1" type="checkbox">
    <label class="t13-accordion-tab-label" for="section1">Section 1</label>
    <div class="t13-accordion-tab-content">
      <h2>Cows Everywhere</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="section2" type="checkbox">
    <label class="t13-accordion-tab-label" for="section2">Section 2</label>
    <div class="t13-accordion-tab-content">
      <h2>Even more Cows Everywhere</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="section3" type="checkbox">
    <label class="t13-accordion-tab-label" for="section3">Section 3</label>
    <div class="t13-accordion-tab-content">
      <h2>Cow alarm</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
</div>

Clean Accordion

Cows Everywhere

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.

Even more Cows Everywhere

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.

Cow alarm

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.


<div class="t13-accordion clean">
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="cleansection1" type="checkbox">
    <label class="t13-accordion-tab-label" for="cleansection1">Section 1</label>
    <div class="t13-accordion-tab-content">
      <h2>Cows Everywhere</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="cleansection2" type="checkbox">
    <label class="t13-accordion-tab-label" for="cleansection2">Section 2</label>
    <div class="t13-accordion-tab-content">
      <h2>Even more Cows Everywhere</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="cleansection3" type="checkbox">
    <label class="t13-accordion-tab-label" for="cleansection3">Section 3</label>
    <div class="t13-accordion-tab-content">
      <h2>Cow alarm</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
</div>

Modern Accordion

Cows Everywhere

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.

Even more Cows Everywhere

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.

Cow alarm

Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit.


<div class="t13-accordion modern">
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="modernsection1" type="checkbox">
    <label class="t13-accordion-tab-label" for="modernsection1">Section 1</label>
    <div class="t13-accordion-tab-content">
      <h2>Cows Everywhere</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="modernsection2" type="checkbox">
    <label class="t13-accordion-tab-label" for="modernsection2">Section 2</label>
    <div class="t13-accordion-tab-content">
      <h2>Even more Cows Everywhere</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
  <div class="t13-accordion-tab">
    <input class="t13-accordion-tab-input" id="modernsection3" type="checkbox">
    <label class="t13-accordion-tab-label" for="modernsection3">Section 3</label>
    <div class="t13-accordion-tab-content">
      <h2>Cow alarm</h2>
      <p>Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur adipisicing
        elit. Bacon ipsum dolor sit amet, consectetur adipisicing elit. Bacon ipsum dolor sit amet, consectetur
        adipisicing elit.</p>
    </div>
  </div>
</div>

Tabs

Hover and click on elements to see the hover and active styles.

Horizontal tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto a officiis totam eos sed architecto, rem vitae qui placeat, natus quae reprehenderit nihil dolor voluptas suscipit ex, minima ipsum ratione?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quis vero eaque, amet vel quia. Tenetur ipsum hic eum dolorem sunt eius odio, quisquam nesciunt cumque delectus, aperiam ab neque?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellat vel fugiat, doloremque, commodi ipsam et voluptatibus totam tempore, fuga possimus nihil libero aliquam officiis, porro consequatur vitae sed sit.

Forms

Most common form contains name, email, message field and submit button. Just change the name of the fields to use for different actions.

Signup


<div class="t13-form-signup t13-form-fluid">
  <header class="t13-form-header">
    <h1 class="t13-form-signup-title">Join Us.</h1>
  </header>

  <form class="t13-form-signup-form" action="#">
    <label for="sigUsername"><i class="fa fa-user" aria-hidden="true"></i></label>
    <input type="text" name="Username" id="sigUsername" data-username="" placeholder="Username" >

    <label for="sigEmail"><i class="fa fa-envelope" aria-hidden="true"></i></label>
    <input type="email" name="Email" id="sigEmail" data-email="" placeholder="Email" />

    <label for="sigPassword"><i class="fa fa-unlock-alt" aria-hidden="true"></i></label>
    <input type="password" name="Password" id="sigPassword" data-password="" placeholder="Password">


    <label for="radio_1" class="t13-forms-lblradio"><input id="radio_1" type="radio" name="radio" checked>
    <span class="outer"><span class="inner"></span></span>Radio 1</label>

    <label for="radio_2" class="t13-forms-lblradio"><input id="radio_2" type="radio" name="radio" checked>
    <span class="outer"><span class="inner"></span></span>Radio 2</label>

    <label for="radio_3" class="t13-forms-lblradio"><input id="radio_3" type="radio" name="radio" checked>
    <span class="outer"><span class="inner"></span></span>Radio 3</label>

    <input id="chb1" class="t13-forms-chbx" type="checkbox" name="checkbox" checked><label for="chb1">Checkbox 1</label>
    <input id="chb2" class="t13-forms-chbx" type="checkbox" name="checkbox" checked><label for="chb2">Checkbox 2</label>
    <input id="chb3" class="t13-forms-chbx" type="checkbox" name="checkbox" checked><label for="chb3">Checkbox 3</label>
    <input id="chb4" class="t13-forms-chbx" type="checkbox" name="checkbox" checked><label for="chb4">Checkbox 4</label>

    <button class="t13-forms-button t13-forms-button-large t13-forms-button-primary t13-forms-button-hover">Sign Up</button>
  </form>
</div>

Submit

Contact Us.


<div class="t13-form-submit t13-form-fluid">
  <header class="t13-form-header">
    <h1 class="t13-form-submit-title">Contact Us.</h1>
  </header>
  <form class="t13-form-submit-form" action="#">
    <div class="t13-form-submit-inp">

      <span class="t13-form-submit-inp-container">
        <input class="t13-form-fields" type="text" name="Username" id="subUsername" data-username="">
        <label class="t13-form-lbl" for="subUsername">Name</label>
      </span>
      <span class="t13-form-submit-inp-container">
        <input class="t13-form-fields" type="email" name="Email" id="subEmail" data-email="" />
        <label class="t13-form-lbl" for="subEmail">Email</label>
      </span>

    </div>
    <span class="t13-form-submit-inp-container">
      <label class="t13-form-lbl" for="subMessage">Message</label>
      <textarea class="t13-form-fields" name="message" id="subMessage" cols="30" rows="10"></textarea>
    </span>

    <button class="t13-forms-button t13-forms-button-large t13-forms-button-primary t13-forms-button-hover">Submit</button>

  </form>
</div>

Same-Page Form (Innovative)

Functionally, an animated same-page form allows you to collect relevant information from a user while communicating orientation (i.e. is the user moving forward of backwards). This can be combined with progress elements to add duration as well (i.e. how much longer until the form is filled out). Possible uses include survey questions on a site or profile update requests. The simplicity invites the user to start submitting information and, once vested, the user will often continue to completion.

Same-Page Form Example

The form is laid out like a conveyor belt, making primary use of translateX to move to the each step. In this simple example, you can see a transform with rotation and a very slight scale enhancement on the first step. The second step uses a simple transform for the second step. Each step can be animated individually.

next
next
Congratulations! Start again?


    <div class="t13-af-container">
        <div class="t13-af-form-wrapper t13-af-example">
          <div class="t13-af-conveyor">
            <div class="t13-af-form t13-af-stage1">
              <input type="text" placeholder="Enter Your First Name" />
              <div class="t13-af-button">next</div>
            </div>
            <div class="t13-af-form t13-af-stage2">
              <input type="text" placeholder="Enter Your Last Name" />
              <div class="t13-af-button2">next</div>
            </div>
            <div class="t13-af-form t13-af-stage3">
              <div class="t13-af-button3">Congratulations! Start again?</div>
            </div>
          </div>
        </div>
      </div>

Tables

Data tables display raw data. Data tables are be embedded on surface, such as a card. They can include: Corresponding visualization, The opportunity to query and manipulate data

Simple

Name Position Office Age
Name Position Office Age
John Doe System Architect Edingburgh 50
Andrew Ramos Software Engineer London 45
Bodo Wagner CTO Berlin 55
Carly Hurst Javascript Developer Berlin 30 

<div class="t13-table-container" style="overflow-x:auto">
  <table class="t13-table t13-table-simple">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>System Architect</td>
        <td>Edingburgh</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Andrew Ramos</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>45</td>
      </tr>
      <tr>
        <td>Bodo Wagner</td>
        <td>CTO</td>
        <td>Berlin</td>
        <td>55</td>
      </tr>
      <tr>
        <td>Carly Hurst</td>
        <td>Javascript Developer</td>
        <td>Berlin</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>

Colored

Name Position Office Age
Name Position Office Age
John Doe System Architect Edingburgh 50
Andrew Ramos Software Engineer London 45
Bodo Wagner CTO Berlin 55
Carly Hurst Javascript Developer Berlin 30 

 <div class="t13-table-container" style="overflow-x:auto">
  <table class="t13-table t13-table-colored">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>System Architect</td>
        <td>Edingburgh</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Andrew Ramos</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>45</td>
      </tr>
      <tr>
        <td>Bodo Wagner</td>
        <td>CTO</td>
        <td>Berlin</td>
        <td>55</td>
      </tr>
      <tr>
        <td>Carly Hurst</td>
        <td>Javascript Developer</td>
        <td>Berlin</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>

Editable

Name Position Office Age
Name Position Office Age
John Doe System Architect Edingburgh 50
Andrew Ramos Software Engineer London 45
Bodo Wagner CTO Berlin 55
Carly Hurst Javascript Developer Berlin 30 

 <div class="t13-table-container" style="overflow-x:auto">
  <table class="t13-table t13-table-editable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td contenteditable="true">John Doe</td>
        <td contenteditable="true">System Architect</td>
        <td contenteditable="true">Edingburgh</td>
        <td contenteditable="true">50</td>
      </tr>
      <tr>
        <td contenteditable="true">Andrew Ramos</td>
        <td contenteditable="true">Software Engineer</td>
        <td contenteditable="true">London</td>
        <td contenteditable="true">45</td>
      </tr>
      <tr>
        <td contenteditable="true">Bodo Wagner</td>
        <td contenteditable="true">CTO</td>
        <td contenteditable="true">Berlin</td>
        <td contenteditable="true">55</td>
      </tr>
      <tr>
        <td contenteditable="true">Carly Hurst</td>
        <td contenteditable="true">Javascript Developer</td>
        <td contenteditable="true">Berlin</td>
        <td contenteditable="true">30</td>
      </tr>
    </tbody>
  </table>
</div>

Lists

Lists present multi line items vertically as a single element. This lists are best to present data types.

Simple

  • Product 1
  • Product 2
  • Product 3
  • Product 4

 <ul class="t13-lists-base">
  <li class="t13-lists-simple-item">Product 1</li>
  <li class="t13-lists-simple-item">Product 2</li>
  <li class="t13-lists-simple-item">Product 3</li>
  <li class="t13-lists-simple-item">Product 4</li>
</ul>

Colored

  • Product 1
  • Product 2
  • Product 3
  • Product 4

 <ul class="t13-lists-base">
  <li class="t13-lists-colored-item">Product 1</li>
  <li class="t13-lists-colored-item">Product 2</li>
  <li class="t13-lists-colored-item">Product 3</li>
  <li class="t13-lists-colored-item">Product 4</li>
</ul>

List with Image

  • pic

    Johanna Williams

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem

  • Johanna Williams

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem

    pic 

<ul class="t13-lists-base">
  <li class="t13-lists-image-item t13-lists-image-item-fl-left">
    <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="pic">
    <div class="t13-list-image-container-fl-left">
      <h4>Johanna Williams</h4>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.dolorem dolorem
        far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and
        Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem </p>
    </div>
  </li>
  <li class="t13-lists-image-item t13-lists-image-item-fl-right">
    <div class="t13-list-image-container-fl-right">
      <h4>Johanna Williams</h4>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.dolorem dolorem
        far from the countries Vokalia and Consonantia.dolorem dolorem far from the countries Vokalia and
        Consonantia.dolorem dolorem far from the countries Vokalia and Consonantia.dolorem dolorem </p>
    </div>
    <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="pic">
  </li>
  <li class="t13-lists-image-item"></li>
</ul>

Carousel

Image Gallery and Carousel example.

Carousel


 <ul class="t13-carousel-gallery">
  <li>
	<a href="#img1"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 1"> </a>
	<article class="t13-carousel-gallery-article" id="img1">
	  <figure>
		<a href="#img2"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 1"> </a>
		<figcaption>Picture 1</figcaption>
	  </figure>
	  <nav>
		<a class="close" href="#close"> Close</a>
		<a class="arrow prev" href="#img15"> Previous</a>
		<a class="arrow next" href="#img2"> Next</a>
	  </nav>
	</article>
  </li>

  <li>
	<a href="#img2"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 2"> </a>
	<article class="t13-carousel-gallery-article" id="img2">
	  <figure>
		<a href="#img3"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 2"> </a>
		<figcaption>Picture 2</figcaption>
	  </figure>
	  <nav>
		<a class="close" href="#close"> Close</a>
		<a class="arrow prev" href="#img1"> Previous</a>
		<a class="arrow next" href="#img3"> Next</a>
	  </nav>
	</article>
  </li>

  <li>
	<a href="#img3"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 3"> </a>
	<article class="t13-carousel-gallery-article" id="img3">
	  <figure>
		<a href="#img4"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 3"> </a>
		<figcaption>Picture 3</figcaption>
	  </figure>
	  <nav>
		<a class="close" href="#close"> Close</a>
		<a class="arrow prev" href="#img2"> Previous</a>
		<a class="arrow next" href="#img4"> Next</a>
	  </nav>
	</article>
  </li>

  <li>
	<a href="#img4"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 4"> </a>
	<article class="t13-carousel-gallery-article" id="img4">
	  <figure>
		<a href="#img5"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 4"> </a>
		<figcaption>Picture 4</figcaption>
	  </figure>
	  <nav>
		<a class="close" href="#close"> Close</a>
		<a class="arrow prev" href="#img3"> Previous</a>
		<a class="arrow next" href="#img5"> Next</a>
	  </nav>
	</article>
  </li>

  <li>
	<a href="#img5"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 5"> </a>
	<article class="t13-carousel-gallery-article" id="img5">
	  <figure>
		<a href="#img6"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 5"> </a>
		<figcaption>Picture 5</figcaption>
	  </figure>
	  <nav>
		<a class="close" href="#close"> Close</a>
		<a class="arrow prev" href="#img4"> Previous</a>
		<a class="arrow next" href="#img6"> Next</a>
	  </nav>
	</article>
  </li>

  <li>
	<a href="#img6"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 6"> </a>
	<article class="t13-carousel-gallery-article" id="img6">
	  <figure>
		<a href="#img7"> <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 6"> </a>
		<figcaption>Picture 6</figcaption>
	  </figure>
	  <nav>
		<a class="close" href="#close"> Close</a>
		<a class="arrow prev" href="#img5"> Previous</a>
		<a class="arrow next" href="#img7"> Next</a>
	  </nav>
	</article>
  </li>

  ..................

3D Box

Image Gallery and Carousel example.


<div class="t13-carousel-flow">
<ul class="t13-carousel-flow-list">

  <input class="t13-carousel-flow-inp" type="checkbox" name="flow-item" id="flow-pic1" />
  <li class="t13-carousel-flow-item">
  <label class="t13-carousel-flow-lbl" for="flow-pic1">
    <figure class="t13-flow-item-fig">
  <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 1">
  <figcaption class="t13-flow-item-figcap"> Text 1</figcaption>
  <p class="t13-flow-item-figcap-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </figure>
  </label>
</li>

  <input class="t13-carousel-flow-inp" type="checkbox" name="flow-item" id="flow-pic1" />
  <li class="t13-carousel-flow-item">
  <label class="t13-carousel-flow-lbl" for="flow-pic1">
    <figure class="t13-flow-item-fig">
  <img src="src/images/city-q-c-600-400-4.jpg" alt="Picture 1">
  <figcaption class="t13-flow-item-figcap"> Text 1</figcaption>
  <p class="t13-flow-item-figcap-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </figure>
  </label>
</li>

</ul>
</div>

Graphical Bar

The chart component can be used, to present data visual without any programming.

CSS Bar Chart

Programming Languages used by Developers
React 31%
Vanilla JavaScript 49.77%
AngularJS 16.09%
PHP 5.41%
ASP.NET 1.62%
Pyhton 25%

<dl class="t13-bars-horizontal-chart">
	<h1>CSS Bar Chart</h1>
	<dt class="t13-bars-horizontal-name">Programming Languages used by Developers </dt>
	<dd class="t13-bars-horizontal-percentage t13-bars-horizontal-percentage-31" data-percent="31%"><span class="text">React 31%</span></dd>
	<dd class="t13-bars-horizontal-percentage t13-bars-horizontal-percentage-49" data-percent="49.77%"><span class="text">Vanilla JavaScript 49.77%</span></dd>
	<dd class="t13-bars-horizontal-percentage t13-bars-horizontal-percentage-16" data-percent="16.09%"><span class="text">AngularJS 16.09%</span></dd>
	<dd class="t13-bars-horizontal-percentage t13-bars-horizontal-percentage-5" data-percent="5.41%"><span class="text">PHP 5.41%</span></dd>
	<dd class="t13-bars-horizontal-percentage t13-bars-horizontal-percentage-2" data-percent="1.62%"><span class="text">ASP.NET 1.62%</span></dd>
	<dd class="t13-bars-horizontal-percentage t13-bars-horizontal-percentage-25" data-percent="25%"><span class="text">Pyhton  25%</span></dd>
</dl>

Modals

This model was built entirely using CSS without any JavaScript.

Launch Modal
X

America's Top Modal

Why male modals?

No, seriously! Why male modals!?


<article>
  <a class="t13-button" href="#t13-modal-box-1"> Launch Modal</a>

  <div class="t13-modal-box" id="t13-modal-box-1">
	<div>
	  <a href="#close" title="close" class="t13-modal-box__close"> X</a>
	  <h2>America's Top Modal</h2>
	  <p>Why male modals?</p>
	  <p>No, seriously! Why male modals!?</p>

	  <iframe width="640" height="360" src="https://www.youtube.com/embed/WHrn_pHW2so" frameborder="0" allowfullscreen></iframe>
	</div>
  </div>
</article>

Text to Speech (Innovative)

The Text2Speech component, reads all data which gets selected by the user. It uses the Web Speech API. It can be used by using the commands Shift+b to get started and Shift+v to cancel or the control panel on the left side. Select first the text and then push the start/stop button

Text from BrainyQuote

Successful people maintain a positive focus in life no matter what is going on around them. They stay focused on their past successes rather than their past failures, and on the next action steps they need to take to get them closer to the fulfillment of their goals rather than all the other distractions that life presents to them. Jack Canfield. I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed. Michael Jordan. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. Steve Jobs. 

<script src="src/scripts/speech.js" defer="defer"></script>

Text2Speech

* select the text and push the start button *