epfl-elements 1.0.1 → 4.0.0

package/dist/components/molecules/list-group/list-group-teasers.twig

@@ -0,0 +1,55 @@
+<div class="list-group">
+  {% for i in 1..4 %}
+
+      <div class="list-group-teaser list-group-item list-group-teaser-container">
+        <div class="list-group-teaser-thumbnail">
+          <a href="#" class="link-trapeze-horizontal">
+            {% include '@atoms/picture/picture-news-thumb.twig' %}
+          </a>
+        </div>
+        <div class="list-group-teaser-content">
+          <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+          <p>
+            <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+            <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+              Epicureum esse, si probarem, quae ille diceret?</span>
+          </p>
+        </div>
+      </div>
+  {% endfor %}
+
+  <div class="list-group-teaser list-group-item list-group-teaser-container teaser-img-right">
+    <div class="list-group-teaser-thumbnail">
+      <a href="#" class="link-trapeze-horizontal">
+        {% include '@atoms/picture/picture-news-thumb.twig' %}
+      </a>
+    </div>
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p class="teaser-url text-small text-muted mb-2">https://www.epfl.ch/research/facilities/biological-electron-microscopy/</p>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+          Epicureum esse, si probarem, quae ille diceret?</span>
+      </p>
+    </div>
+  </div>
+
+  <div class="list-group-teaser list-group-item list-group-teaser-container">
+    <div class="list-group-teaser-content">
+      <h3 class="h5"><a href="#">Physics: new e-books for the AIAA Education Series</a></h3>
+      <p class="teaser-url text-small text-muted mb-2">https://www.epfl.ch/research/facilities/biological-electron-microscopy/</p>
+      <p>
+        <time datetime="2018-03-26"><span class="sr-only">Published:</span>26.03.2018</time>
+        <span class="text-muted">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ad populum me vocas, eum. Quid enim me prohiberet
+          Epicureum esse, si probarem, quae ille diceret?</span>
+      </p>
+    </div>
+  </div>
+
+  {# {% if bottomlink %} #}
+    <a href="#" class="list-group-teaser-more">
+      Afficher plus d'actualités
+    </a>
+  {# {% endif %} #}
+</div>

package/dist/components/molecules/list-group/list-group.twig

@@ -0,0 +1,4 @@
+<ul class="list-group list-group-flush">
+  <li class="list-group-item">Computer science</li>
+  <li class="list-group-item">Communication systems</li>
+</ul>

package/dist/components/molecules/list-group/list-group.yml

@@ -0,0 +1,21 @@
+name: list-group
+title: List group
+notes: |
+  Describe the list-group component here.
+wrapper: ''
+background: ''
+variants:
+  - name: borderless
+    title: Borderless
+    notes: |
+      The Borderless variant.
+    background: ''
+    wrapper: ''
+  - name: infoscience
+    title: Infoscience
+    notes: |
+      List of Infoscience publications.
+  - name: teasers
+    title: Teasers
+    notes: |
+      List group variant that can be used to display a teasers listing

package/dist/components/molecules/map/map.twig

@@ -0,0 +1,7 @@
+<h4 class="sr-only">Access map</h4>
+<figure class="media-map">
+  {% include '@atoms/picture/picture.twig' %}
+  <figcaption class="media-map-over">
+    <a href="#" class="btn btn-primary btn-block">Itinéraire vers le bureau BP (1er étage)</a>
+  </figcaption>
+</figure>

package/dist/components/molecules/map/map.yml

@@ -0,0 +1,2 @@
+title: Map
+name: map

package/dist/components/molecules/metabox/metabox.twig

@@ -0,0 +1,56 @@
+<div class="d-flex flex-column h-100 py-3">
+  <h4>Détails de l'événement</h4>
+  <table class="table">
+    <tbody>
+      <tr>
+        <td>Date</td>
+        <td>
+          <span itemprop="startDate" content="2018-01-13T12:00">
+            13.01.2018 - 12:00 → 13:30
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td>Catégorie</td>
+        <td>Technologie</td>
+      </tr>
+      <tr>
+        <td>Avec</td>
+        <td>Prof Mohamed Bentires-Alj</td>
+      </tr>
+      <tr>
+        <td>Lieu</td>
+        <td>
+          <div itemprop="location" itemscope itemtype="http://schema.org/Place">
+            <span itemprop="name"><a href="http://plan.epfl.ch/?room=SV2811">SV 2811</a></span>
+            <div class="d-none" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
+              <span itemprop="streetAddress">EPFL</span><br>
+              <span itemprop="addressLocality">Lausanne</span>,
+              <span itemprop="postalCode">1015</span>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td>Prix</td>
+        <td>
+          <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+            <div itemprop="price" content="0">Accès libre</div>
+            <span itemprop="priceCurrency" content="CHF" />
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td>Contact</td>
+        <td><a href="#">John Doe</a></td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="mt-3">
+    <p class="mb-2">Organisé par</p>
+    {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
+  </div>
+  <div class="mt-auto align-self-end">
+    {% include '@atoms/button/button.twig' %}
+  </div>
+</div>

package/dist/components/molecules/metabox/metabox.yml

@@ -0,0 +1,6 @@
+title: Metabox
+name: metabox
+wrapper: col-md-5 bg-gray-100
+notes: |
+  A box allowing the display of meta-information concerning the content of the page, whether it is an event, a laboratory, etc.
+  You can also add a call to action at the bottom if an action is available for the users

package/dist/components/molecules/pagination/pagination-center.twig

@@ -0,0 +1,39 @@
+<nav aria-label="Page navigation">
+  <ul class="pagination justify-content-center">
+    <li class="page-item">
+      <a class="page-link" href="#" aria-label="Go to first page">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-last-left' } %}
+      </a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#" aria-label="Go to previous page">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-left' } %}
+        <span class="sr-only">Previous</span>
+      </a>
+    </li>
+    <li class="page-item active">
+      <a class="page-link" href="#" aria-current="page">
+        1
+        <span class="sr-only">(Current page)</span>
+      </a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item disabled">
+      <a class="page-link" href="#" aria-label="Next">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' } %}
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
+    <li class="page-item disabled">
+      <a class="page-link" href="#" aria-label="Last page">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-last-right' } %}
+        <span class="sr-only">Last page</span>
+      </a>
+    </li>
+  </ul>
+</nav>

package/dist/components/molecules/pagination/pagination-load-more.twig

@@ -0,0 +1 @@
+<a href="#" class="btn btn-light btn-block">Load more content...</a>

package/dist/components/molecules/pagination/pagination.twig

@@ -0,0 +1,39 @@
+<nav aria-label="Page navigation">
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#" aria-label="Go to first page">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-last-left' } %}
+      </a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#" aria-label="Go to previous page">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-left' } %}
+        <span class="sr-only">Previous</span>
+      </a>
+    </li>
+    <li class="page-item active">
+      <a class="page-link" href="#" aria-current="page">
+        1
+        <span class="sr-only">(Current page)</span>
+      </a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item disabled">
+      <a class="page-link" href="#" aria-label="Next">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-right' } %}
+        <span class="sr-only">Next</span>
+      </a>
+    </li>
+    <li class="page-item disabled">
+      <a class="page-link" href="#" aria-label="Last page">
+        {% include "@atoms/icon/icon.twig" with { icon: 'icon-chevron-last-right' } %}
+        <span class="sr-only">Last page</span>
+      </a>
+    </li>
+  </ul>
+</nav>

package/dist/components/molecules/pagination/pagination.yml

@@ -0,0 +1,13 @@
+title: Pagination
+name: pagination
+variants:
+  - name: center
+    title: Centered pagination
+    notes: |
+      Same as the default pagination, but with a `justify-content-center` class to center it.
+  - name: load-more
+    title: Load more
+    notes: |
+      The Load more variant.
+    background: ''
+    wrapper: ''

package/dist/components/molecules/question/question.twig

@@ -0,0 +1,26 @@
+<form class="question" action="">
+
+  <div class="question-img">
+    {% include '@atoms/picture/picture-question.twig' %}
+  </div>
+
+  <div class="question-content">
+    <h2 class="question-title">{{ type ?: 'Type de question' }}</h2>
+    <h3 class="question-subtitle mt-3">{{ title ?: 'Titre de la question' }}</h3>
+
+    <div class="question-answers mt-4">
+      {% set options = options|default(['Option 1', 'Option 2', 'Option 3']) %}
+      {% for option in options %}
+        <input type="radio" id="custom-radio{{loop.index}}" name="customRadio" class="custom-control-input">
+        <label class="custom-control-label" for="custom-radio{{loop.index}}">
+          <span class="custom-control-label-content">
+          {{ option }}</span>
+          <span class="trapeze-horizontal d-none d-lg-block"></span>
+          <span class="trapeze-vertical d-lg-none"></span>
+        </label>
+      {% endfor %}
+    </div>
+
+    <input type="submit" class="btn btn-primary mt-4" value="Voter">
+  </div>
+</form>

package/dist/components/molecules/question/question.yml

@@ -0,0 +1,2 @@
+title: Question
+name: question

package/dist/components/molecules/quote/quote.twig

@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col-6 offset-3 col-sm-4 offset-sm-4 col-md-2 offset-md-0 text-center text-md-right">
+    {% include "@atoms/picture/picture-avatar.twig" %}
+  </div>
+
+  <blockquote class="blockquote mt-3 col-md-10 border-0">
+    <p class="mb-0">EPFL greatly helps alumni remembering their high value on the job market. Boosting self confidence helps to find and successfully apply for interesting positions. Very systematic, good psychology.</p>
+    <footer class="blockquote-footer"><cite title="Fabien">Fabien</cite>, Diploma in Electrical and Electronic Engineering, 2002 <br> Engineering STI</footer>
+  </blockquote>
+</div>

package/dist/components/molecules/quote/quote.yml

@@ -0,0 +1,6 @@
+title: Quote
+name: quote
+wrapper: container
+notes: |
+  The goal of that component is to display a blockquote with its author avatar next to it.
+  For information, `.blockquote` elements are already styled ([See typography documentation](/#/doc/design--typography.html))

package/dist/components/molecules/search/search-mobile.twig

@@ -0,0 +1,39 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+<form action="#" class="d-xl-none">
+  <a id="search-mobile-toggle" class="search-mobile-toggle searchform-controller" href="#">
+    {% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
+    {% if language == 'fr' %}
+    <span class="toggle-label sr-only">Afficher / masquer le formulaire de recherche</span>
+    {% endif %}
+    {% if language == 'en' %}
+    <span class="toggle-label sr-only">Show / hide the search form</span>
+    {% endif %}
+  </a>
+  <div class="input-group search-mobile" role="search">
+    <div class="input-group-prepend">
+      <span class="input-group-text">
+        {% include '@atoms/icon/icon.twig' with { icon: 'icon-search' } %}
+      </span>
+    </div>
+    {% if language == 'fr' %}
+    <label for="search" class="sr-only">Rechercher sur le site</label>
+    <input type="text" class="form-control" name="search" placeholder="Rechercher">
+    {% endif %}
+    {% if language == 'en' %}
+    <label for="search" class="sr-only">Search on the site</label>
+    <input type="text" class="form-control" name="search" placeholder="Search">
+    {% endif %}
+    <div class="input-group-append">
+      <a id="search-mobile-close" class="search-mobile-close searchform-controller" href="#">
+        {% include '@atoms/icon/icon.twig' with { icon: 'icon-close' } %}
+        {% if language == 'fr' %}
+        <span class="toggle-label sr-only">Masquer le formulaire de recherche</span>
+        {% endif %}
+        {% if language == 'en' %}
+        <span class="toggle-label sr-only">Hide the search form</span>
+        {% endif %}
+      </a>
+    </div>
+  </div>
+</form>

package/dist/components/molecules/search/search.twig

@@ -0,0 +1,25 @@
+{% if language is not defined %}{% set language = 'fr' %}{% endif %}
+
+<div class="dropdown dropright search d-none d-xl-block">
+  <a class="dropdown-toggle" href="#" data-toggle="dropdown">
+    {% include "@atoms/icon/icon.twig" with { icon: 'icon-search' } %}
+  </a>
+  <form action="#" class="dropdown-menu border-0 p-0">
+    <div class="search-form mt-1 input-group">
+      {% if language == 'fr' %}
+      <label for="search" class="sr-only">Rechercher sur le site</label>
+      <input type="text" class="form-control" name="search" placeholder="Rechercher" >
+      <button type="submit" class="d-none d-xl-block btn btn-primary input-group-append">Valider</button></div>
+      {% endif %}
+      {% if language == 'en' %}
+      <label for="search" class="sr-only">Search on the site</label>
+      <input type="text" class="form-control" name="search" placeholder="Search" >
+      <button type="submit" class="d-none d-xl-block btn btn-primary input-group-append">Validate</button></div>
+      {% endif %}
+      {% if language == 'de' %}
+      <label for="search" class="sr-only">Forschen</label>
+      <input type="text" class="form-control" name="search" placeholder="Suchen" >
+      <button type="submit" class="d-none d-xl-block btn btn-primary input-group-append">Bestätigen</button></div>
+      {% endif %}
+  </form>
+</div>

package/dist/components/molecules/search/search.yml

@@ -0,0 +1,9 @@
+title: Search
+name: search
+variants:
+  - name: mobile
+    title: Search Mobile
+    notes: |
+      Used on mobile breakpoints only, inside of the [header](#/organisms/header) component, displayed when the menu is opened.
+notes: |
+  Used on desktop only. When the icon is clicked, a search form is displayed in a dropdown

package/dist/components/molecules/sidenotes/sidenotes.twig

@@ -0,0 +1,20 @@
+<article>
+  <div class="row">
+    <div class="col-sm-6">
+      <p>Maintaining <a href="#sidenotes" aria-describedby="sidenote-label" id="sidenotes-ref">sidenotes</a> manually can be a pain. By using <a href="#css" aria-describedby="sidenote-label" id="css-ref">CSS</a> <a href="#css-counters" aria-describedby="sidenote-label" id="css-counters-ref">counters</a> to add the numbered references in the text and an ordered list to display the actual sidenotes in the aside, it becomes extremely easy.</p>
+    </div>
+
+    <div class="col-sm-5 ml-auto">
+      <aside>
+        <h2 class="sr-only" id="sidenote-label">Sidenotes</h2>
+        <ol>
+          <li id="sidenotes">Sidenotes are notes placed at the right of a page. They cite references or comment on a designated part of the text above it.</li>
+
+          <li id="css">Cascading Style Sheets</li>
+
+          <li id="css-counters">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.</li>
+        </ol>
+      </aside>
+    </div>
+  </div>
+</article>

package/dist/components/molecules/sidenotes/sidenotes.yml

@@ -0,0 +1,6 @@
+title: Sidenotes
+name: sidenotes
+notes: |
+  Inherits directly of [Footnotes](/#/molecules/footnotes) styles and main concepts.
+
+  ⚠️ *The aside layout approach may change*

package/dist/components/molecules/social/social-follow.twig

@@ -0,0 +1,14 @@
+<div class="bg-gray-100 py-5">
+  <div class="container">
+    <div class="social-share-container social-share-light">
+
+      <div class="social-share ">
+        <p class="social-share-text">
+          Suivez nous sur <span class="sr-only">les réseaux sociaux</span>
+        </p>
+        {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true } %}
+      </div>
+
+    </div>
+  </div>
+</div>

package/dist/components/molecules/social/social.twig

@@ -0,0 +1,58 @@
+<div class="bg-gray-100 py-5">
+  <div class="container">
+    <div class="social-share-container">
+
+      <div class="social-share ">
+        <p class="social-share-text">
+          Partager cette page
+        </p>
+        <ul class="social-icon-list list-inline">
+          <li>
+            {% include '@atoms/social-icon/social-icon-single-link.twig' with {
+              pretty_name: 'Share on Facebook',
+              icon: 'icon-facebook',
+              round: round,
+              discrete: true,
+              url: '#'
+            } %}
+          </li>
+          <li>
+            {% include '@atoms/social-icon/social-icon-single-link.twig' with {
+              pretty_name: 'Share on Twitter',
+              icon: 'icon-twitter',
+              round: round,
+              discrete: true,
+              url: '#'
+            } %}
+          </li>
+          <li>
+            {% include '@atoms/social-icon/social-icon-single-link.twig' with {
+              pretty_name: 'Share on LinkedIn',
+              icon: 'icon-linkedin',
+              round: round,
+              discrete: true,
+              url: '#'
+            } %}
+          </li>
+          <li>
+            {% include '@atoms/social-icon/social-icon-single-link.twig' with {
+              pretty_name: 'Share by e-mail',
+              icon: 'icon-mail-plane',
+              round: round,
+              discrete: true,
+              url: '#'
+            } %}
+          </li>
+        </ul>
+      </div>
+
+      <div class="social-share-copylink">
+        <div class="input-group">
+          <input type="text" class="form-control sr-only" value="www.epfl.ch/xyz" aria-label="Lien de partage">
+          <button class="btn btn-primary btn-sm social-share-copy" title="Copier l'URL de la page" type="button" data-success="URL copiée !">Copier l'URL</button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

package/dist/components/molecules/social/social.yml

@@ -0,0 +1,7 @@
+title: Social
+name: social
+wrapper: bg-gray-100
+variants:
+  - name: follow
+    title: Follow
+    wrapper: col-12

package/dist/components/molecules/social-feed/social-feed-facebook.twig

@@ -0,0 +1,17 @@
+<div class="social-feed">
+  {% include '@atoms/social-icon/social-icon.twig' with { icon: 'icon-facebook', round: true } %}
+
+  <div class="social-feed-content">
+    <div>
+      <p class="social-feed-header"><strong>@epflENAC</strong> <span class="text-small">il y a 8 heures</span></p>
+      <p>A Berlin, les étudiantes et étudiants de Dominique Perrault exposent leurs travaux à la galerie Aedes Architecture Forum du 27 janvier au 8 mars. @dpa_official http://www.aedes..</p>
+
+      {% include '@atoms/picture/picture-one-third.twig' %}
+
+      <p>What's your fave spot for sunset on campus? 😎</p>
+    </div>
+    <div>
+      <a class="btn btn-secondary mt-4">Likez notre page Facebook</a>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/social-feed/social-feed-instagram.twig

@@ -0,0 +1,17 @@
+<div class="social-feed">
+  {% include '@atoms/social-icon/social-icon.twig' with { icon: 'icon-instagram', round: true } %}
+
+  <div class="social-feed-content">
+    <div>
+      <p class="social-feed-header"><strong>@epflENAC</strong> <span class="text-small">il y a 8 heures</span></p>
+      <p>A Berlin, les étudiantes et étudiants de Dominique Perrault exposent leurs travaux à la galerie Aedes Architecture Forum du 27 janvier au 8 mars. @dpa_official http://www.aedes..</p>
+
+      {% include '@atoms/picture/picture-one-third-square.twig' %}
+
+      <p>What's your fave spot for sunset on campus? 😎</p>
+    </div>
+    <div>
+      <a class="btn btn-secondary mt-4">Suivez-nous sur Instagram</a>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/social-feed/social-feed.twig

@@ -0,0 +1,17 @@
+<div class="social-feed">
+  {% include '@atoms/social-icon/social-icon.twig' with { icon: 'icon-twitter', round: true } %}
+
+  <div class="social-feed-content">
+    <div>
+      <p class="social-feed-header"><strong>@epflENAC</strong> <span class="text-small">il y a 8 heures</span></p>
+      <p>A Berlin, les étudiantes et étudiants de Dominique Perrault exposent leurs travaux à la galerie Aedes Architecture Forum du 27 janvier au 8 mars. @dpa_official http://www.aedes..</p>
+
+      {# {% include '@atoms/picture/picture-one-third.twig' %} #}
+
+      <p>What's your fave spot for sunset on campus? 😎</p>
+    </div>
+    <div>
+      <a class="btn btn-secondary mt-4">Nous rejoindre sur Twitter</a>
+    </div>
+  </div>
+</div>

package/dist/components/molecules/social-feed/social-feed.yml

@@ -0,0 +1,12 @@
+title: Social feed
+name: social-feed
+wrapper: col-4
+variants:
+  - name: facebook
+    title: Facebook
+    wrapper: col-4
+  - name: instagram
+    title: Instagram
+    wrapper: col-4
+notes: |
+  To display different type of social feed, use variants of the `social-icon`

package/dist/components/molecules/sponsor/sponsor.twig

@@ -0,0 +1,6 @@
+<figure>
+  <img class="img-fluid d-block mx-auto" src="https://via.placeholder.com/300x150.jpg" alt="Sponsor">
+  <hr>
+  <figcaption>Lorem ipsum dolor sit amet.</figcaption>
+  <hr class="bold">
+</figure>

package/dist/components/molecules/sponsor/sponsor.yml

@@ -0,0 +1,2 @@
+title: Sponsor
+name: sponsor

package/dist/components/molecules/tables/tables-boxed-sortable.twig

@@ -0,0 +1,22 @@
+<table class="table table-boxed table-sortable" data-tablesaw-sortable>
+  <thead>
+    <tr>
+      <th data-tablesaw-sortable-col>Header one</th>
+      <th data-tablesaw-sortable-col>Header two</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Curabitur blandit</td>
+      <td>Morbi leo porta</td>
+    </tr>
+    <tr>
+      <td>Tempus porttitor</td>
+      <td>Duis mollis</td>
+    </tr>
+    <tr>
+      <td>Commodo luctus nisi</td>
+      <td>Blandit tempus porttitor</td>
+    </tr>
+  </tbody>
+</table>

package/dist/components/molecules/tables/tables-boxed.twig

@@ -0,0 +1,22 @@
+<table class="table table-boxed">
+  <thead>
+    <tr>
+      <th>Header one</th>
+      <th>Header two</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Curabitur blandit</td>
+      <td>Morbi leo porta</td>
+    </tr>
+    <tr>
+      <td>Tempus porttitor</td>
+      <td>Duis mollis</td>
+    </tr>
+    <tr>
+      <td>Commodo luctus nisi</td>
+      <td>Blandit tempus porttitor</td>
+    </tr>
+  </tbody>
+</table>