Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0

All websites using the framework need to target a Level A compliance. Level AA should be reached whenever possible.

WAI-ARIAWAI-ARIA

Content is annotated using WAI-ARIA roles and states and properties. All widgets are WAI-ARIA compatible.

All modern browsers support access keys to make keyboard-only navigation easier. To activate the access keys, they all need some modifier keys combination. Below is the list of theses combinations by browser and platform:

Browser Access Key modifier keys
Browser	Platform	Modifier keys
Chrome	Windows/Linux	`Alt`
Chrome	Mac	`Ctrl` + `Opt`
Firefox	Windows/Linux	`Alt` + `Shift`
Firefox	Mac	`Ctrl` + `Opt`
Internet Explorer	Windows	`Alt`
Safari	Mac	`Ctrl` + `Opt`
Safari	Windows	`Alt`
Opera	All	`Shift` + `Esc`

The EPFL websites use an access key system derived from the UK Government Access Key Systems:

EPFL's Access Key Systems
Shortcut	Target
C	Skip to content
N	Skip to main navigation
T	Back to the top of the page
0	Go the the accessibility page
1	Go to the Homepage of the site
2	Go to the News page (if any)
3	Go to the sitemap
4	Focus the search field
5	Go to the FAQ page (if any)
6	Go to the Help page (if any)
7	Complaints procedure and feedback (if any)
8	Terms and conditions (if any)
9	Contact the website team (mailto link or link to a contact form)

InstallationInstallation

First choose one of the page templates as starting point.

Then make sure to include the auto-updating header into your html head:

http://static.epfl.ch/latest/includes/head.html

or include the optimized auto-updating head links, head scripts and footer scripts into your html head/foot for optimal performances:

http://static.epfl.ch/latest/includes/head-links.html
http://static.epfl.ch/latest/includes/head-scripts.html
http://static.epfl.ch/latest/includes/foot-scripts.html

As most templating languages do not support including content from a remote server, including the files usually comes down to:

Creating a cron job that retrieves the remote files and creates a local copy on your server every day, via wget for insance.
Including the local copy into your application templates.

Optimized head/foot filesOptimized head/foot files

For better performances it is recommended to separate the CSS and JS loading.

Include the CSS using the head links into your <head> tag.

http://static.epfl.ch/latest/includes/head-links.html

Add your custom CSS just after and before the scripts for optimal performances.

Include the head scripts before the closing of your </head> tag.

http://static.epfl.ch/latest/includes/head-scripts.html

And include the scripts before the closing of your </body> tag.

http://static.epfl.ch/latest/includes/foot-scripts.html

http://static.epfl.ch/latest/includes/foot-scripts-notracking.html

if you do not want Google Analytics tracking on your site.

HTML head template versions ready for inclusions in custom templates
Version	File name
EPFL	head-links.html
CDH	head-links-cdh.html
CDM	head-links-cdm.html
ENAC	head-links-enac.html
IC	head-links-ic.html
INTER	head-links-inter.html
SB	head-links-sb.html
STI	head-links-sti.html
SV	head-links-sv.html
Associations	head-links-associations.html
Neutral	head-links-neutral.html

All-in-one head filesAll-in-one head files

The simplest way to use the framework is to use the all-in-one head files versions:

HTML head template versions ready for inclusions in custom templates
Version	File name
EPFL	head.html
CDH	head-cdh.html
CDM	head-cdm.html
ENAC	head-enac.html
IC	head-ic.html
INTER	head-inter.html
SB	head-sb.html
STI	head-sti.html
SV	head-sv.html
Associations	head-associations.html
Neutral	head-neutral.html

Just include these into your html <head> tag.

If for some reason the latest version is not compatible with your system, specific versions can be accessed via:

http://static.epfl.ch/vX.Y.Z/includes/head.html

Put the file head-links.html, head-script.html, foot-scripts.html together.


  <head>
   <title>Website name </title>
    <meta charset="utf-8" />
    <link rel="import" href="//static.epfl.ch/latest/includes/head-links.html">
    <link rel="import" href="//static.epfl.ch/latest/includes/head-scripts.html">
  </head>
  <body>
    <div id="page" class="site site-wrapper" itemscope itemtype="http://schema.org/WebPage">
     <header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html"></header>
    </div>
   <link rel="import" href="//static.epfl.ch/latest/includes/foot-scripts.html">
  </body>

Finally make sure your template includes a fallback global header that will dynamically load the full header:


  <header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html">
    ...
  </header>

The header version that will be loaded is specified by the data-ajax-header attribute, and can be one of:

Global head template versions ready for inclusions in templates
Version	File name
Header with full search form	epfl-header.en.html
Header with no local site search	epfl-header-no-localsearch.en.html

If you chose the cron job approach described above for your CSS and JS, you'll also have to load the header via a cron job and update the data-ajax-header to point to your local copy. Otherwise you may end up with different versions that might not work properly together.

You can then further customize the search URLs and parameters as follows:

Local searchLocal search

Add the following script at the end of your template:

// Overwrite local site search
require(["epfl-jquery"], function($){
  require(["search"], function(s){
    $("#epfl-header").epfl_search("update", {engines:{site:{url: "search.html", param: "q", ac: false}}});
  });
});

site is the name of the engine that handles the local site search
url is the url where the search form will be submitted
param is the name of the parameter containing the search query
ac: false means that the default auto-complete is disabled

Global searchGlobal search

Add the following script at the end of your template:

// Overwrite global EPFL sites search
require(["epfl-jquery"], function($){
  require(["search"], function(s){
    $("#epfl-header").epfl_search("update", {engines:{epfl:{url: "search.html", param: "q", ac: false}}});
  });
});

epfl is the name of the engine that handles the global sites search
url is the url where the search form will be submitted
param is the name of the parameter containing the search query
ac: false means that the default auto-complete is disabled

Custom ScriptsCustom Scripts

Load a custom jQuery pluginLoad a custom jQuery plugin

At the end of your page, before the </body> tag, load the desired plugins as:

<script>
require(["epfl-jquery", "../relative/path/to/jquery-plugin.js", "/absolute/path/to/jquery-plugin.js"], function($) {

  // jQuery is available as $ with the plugins included
  $(".my-class").myPlugin();

});
</script>

If your plugin is not AMD compatible, you may need to load it as:

<script>
require(["epfl-jquery"], function($) {

  // jQuery is available as $ with the plugins included
  $.getScript("../relative/path/to/jquery-plugin.js", function(){
    $(".my-class").myPlugin();
  });

});
</script>

If you used epfl-jquery-notracking.js instead of epfl-jquery.js, or if you included footer-scripts-notracking.html instead of footer-scripts, you will need to call require with epfl-jquery-notracking instead of epfl-jquery.

Load datatables script Load datatables script

In the <head> of the page import:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

<script>

    require(["epfl-jquery", "//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"], function($) {
        "use strict";

        require(["datatables"], function() {
              $(function() {
                $('#example').dataTable( {
                    "order": [[ 3, "desc" ]]
                } );
              });
        })
    });
</script>

Load a jQuery plug-in different from epfl-jqueryLoad a jQuery plug-in different from epfl-jquery

<script>

require(['epfl-jquery'], function($){
    //disable epfl-jquery
    requirejs.undef('jquery');
    //jQuery new variable
    require(['http://code.jquery.com/jquery-1.11.2.min.js'], function(){
        console.log($.fn.jquery, jQuery.fn.jquery);
    });
});

</script>

Load a custom scriptLoad a custom script

Define your scripts as AMD modules:

define("script1", ["epfl-jquery"] , function ($) {

  // jQuery is available as $

  var _foo = function(){
    ...
  };

  var _bar = function(){
    ...
  };

  return {
    foo: _foo,
    bar: _bar,
  };
});

define("script2", ["epfl-jquery"] , function ($) {

  // jQuery is available as $

  var _baz = function(){
    ...
  };

  var _qux = function(){
    ...
  };

  return {
    baz: _baz,
    qux: _qux,
  };
});

At the end of your page, before the </body> tag, load the desired scripts as:

<script>
require(["epfl-jquery", "../relative/path/to/custom/script1.js", "/absolute/path/to/custom/script2.js"], function($, s1, s2) {

  // jQuery is available as $

  // script1 is available as s1
  s1.foo()
  s1.bar()

  // script2 is available as s2
  s2.baz()
  s2.qux()

});
</script>

AnalyticsAnalytics

If you use the default scripts, you will have Google Universal Analytics tracking included.

To collect the data on your account, just use the following code:

<script>
require(["epfl-jquery", "analytics"], function($, ga) {

  ga("create", "UA-000000-01", "auto");
  ga("set", "anonymizeIp", true); 
  ga("send", "pageview");

});
</script>

Remember to replace UA-000000-01 with your tracking identifier.

You can find more information in the Google Universal Analytics documentation.

Browser supportBrowser support

The framework is expected to work in all modern web browsers. Basically:

Browser support for the framework
Browser	Supported versions
Chrome	43 42
Firefox	38 37
Safari	8 7
Internet Explorer	11 10
Tablette	Ipad Air 2
Iphone	iPhone 6/iPhone 5

3rd-party libraries3rd-party libraries

The framework uses various 3rd-party libraries, some are packaged inside the scripts, others are lazy-loaded from a CDN for better performances.

Packaged librariesPackaged libraries

These libraries are included in the framework and constitute some of its building blocks.

3rd-party libraries packaged in the front-end framework
Library	Version	Role
jQuery	1.11.3	Base JavaScript library for DOM traversal and manipulation, event handling and ajax requests
TouchSwipe	1.6.12	A jQuery plugin that adds support for touch events on mobile devices
jQuery Autocomplete	1.2.24	A jQuery plugin that adds asynchronous auto-complete to search forms
Normalize.css	3.0.3	CSS normalization of default browser styles
html5shiv	3.7.3	HTML5 sectioning elements support for legacy Internet Explorer
Respond.js	1.4.2	CSS3 media queries polyfill for browsers that do not support it
RequireJS	2.1.20	JavaScript file and module loader
zeptojs	1.1.6	JavaScript library for modern browsers

CDN librariesCDN libraries

These plugin libraries are lazy-loaded on demand from cdnjs for better performances.

3rd-party libraries lazy-loaded by the front-end framework
Library	Version	Role
highlight.js	8.0	Syntax highlighting for the Web
MathJax	2.3	JavaScript display engine for mathematics (LaTeX, MathML & AsciiMath)
marked	0.3.1	A markdown parser and compiler

ChangelogChangelog

v0.28.0 - 2018.08.28v0.28.0 - 2018.08.28

Remove search filters
Remove autocomplete

v0.27.5 - 2018.08.22v0.27.5 - 2018.08.22

Fix search 'This website'
Fix links in header

v0.27.4 - 2018.07.18v0.27.4 - 2018.07.18

Add EPFL Middle East Section in header
Fix sub section in changelog

v0.27.3 - 2018.07.02v0.27.3 - 2018.07.02

Fix server name in templates and includes
Update dev dependencies

v0.27.2 - 2018.06.11v0.27.2 - 2018.06.11

Remove timestamp in ajax request for header
Fix link in header
Fix ajax cors
Clean readme

v0.27.1 - 2018.04.04v0.27.1 - 2018.04.04

Improve README
Disable package-lock.json
Fix logo size with mobile

v0.27.0 - 2018.04.03v0.27.0 - 2018.04.03

Improve svg fallback
Fix autocomplete position
Fix bfdocs path
Fix dependencies
Fix color of logo (color too dark in previous)
Fix inline style in header
Copy the archive during the deployment to download project

v0.26.1 - 2017.11.21v0.26.1 - 2017.11.21

Fix resolution of html lang attribute
Fix html of headers (remove extra tag ul & strong)
Fix related links
Fix grunt-contrib-coffee version

v0.26.0 - 2017.10.18v0.26.0 - 2017.10.18

Set cookie (from Cookie Consent) on localhost and external domain
Remove protocols in header

v0.25.0 - 2017.10.11v0.25.0 - 2017.10.11

Add science and society link in header
Add Travis-CI testing
Fix image visual.jpg
Fix scoped style in documentation
Fix HTML tag in documentation
Fix typo in README.md
Clean Google Analytics example (with anonymization)
Remove injection of CSS in Cookie Consent

v0.24.0 - 2017.08.29v0.24.0 - 2017.08.29

Add cookie policy banner
Update package grunt-w3c-html-validation
Fix unclosed element b
Remove HTTP in css
Remove HTTP in docs
Remove useless example Thumbnail Box (not in doc)
Remove tag on grunt bump

v0.23.1 - 2017.06.13v0.23.1 - 2017.06.13

Show complete news title
Update copyright date
Fix some unit tests

v0.23.0 - 2017.03.20v0.23.0 - 2017.03.20

add ip anonymization in analytics
specifies automatic cookie domain configuration

v0.22.12 - 2016.04.27v0.22.12 - 2016.04.27

change dimensions EPFL Logo
Update link in EPFL banner

v0.22.9 - 2016.04.14v0.22.9 - 2016.04.14

New logo EPFL

v0.22.8 - 2016.03.18v0.22.8 - 2016.03.18

How to integrate the EPFL banner in a site
Change "Help" link in EPFL banner
Examples: Standard Popup Image & Popup Image for downloading
Update library documentation

v0.22.6 - 2016.08.01v0.22.6 - 2016.08.01

Slideshow delay to 7 sec
Adding horizontal bar for Portal layout

v0.22.2 - 2015.10.30v0.22.2 - 2015.10.30

Image section to help users
Creation Thumbnail Box
Add mail button

v0.22.0 - 2015.10.12v0.22.0 - 2015.10.12

Final Integration of vertical navigation in horizontal navigation for mobile device
Carousel Slideshow with custom controls
Carousel With custom controls and cycleItems=True
Authorisation https in search bar

v0.21.3 - 2015.09.03v0.21.3 - 2015.09.03

First Integration of vertical navigation in horizontal navigation for mobile device

v0.20.3 - 2015.06.22v0.20.3 - 2015.06.22

General

feat - Organigramme add hashed-bg class to create hashed backgrounds
feat - auto-add code examples in the doc
fix - search form in the doc to use the new form-input-group logic
feat - improve mainnav/epflnav/search loading to avoid jumping/flickering

v0.20.2 - 2015.06.18v0.20.2 - 2015.06.18

General

feat - style select inputs in IE9+
fix vertical alignment on form input group
fix remove border on auto truncate

v0.20.1 - 2015.06.16v0.20.1 - 2015.06.16

General

suppression warning in people section

v0.20.0 - 2015.06.15v0.20.0 - 2015.06.15

General

Generic search form for actu et memento section
Improving People for enac faculty
Bug left menu on a first level faculty page
Bug logo EPFL cut in Firefox

v0.19.1 - 2015.06.06v0.19.1 - 2015.06.06

General

Update bandeau with last content
Red title in bandeau
Suppression soulignement bandeau

v0.19.0 - 2015.06.04v0.19.0 - 2015.06.04

General

Adding responsive-embeds for video
Refactoring people on 4 columns
Bug checkbox & radio buttons on mobile
Bug au-truncate for memento & alignement code source with html
Alignement code source with html for actu

v0.18.0 - 2015.05.20v0.18.0 - 2015.05.20

General

Refactoring people on 1/2 columns
Adding actu 4 images vertical/horizontal
Elimination zoom effet layout/boxes size:l/xl/xxl
Bug au-truncate for memento

v0.17.0 - 2015.05.12v0.17.0 - 2015.05.12

General

Adding study plan
Adding people on 1/2 columns

v0.16.0 - 2015.05.04v0.16.0 - 2015.05.04

General

Creation memento calendar
Improving memento box for mobile in sub-pages
Improving actu box in sub-pages
Adding datatables compatibility in doc
Fix adding .btn-multiline-list for buttons on more lines
Fix truncate removes all text on small devices

v0.15.0 - 2015.04.17v0.15.0 - 2015.04.17

Homepage

Add icon-home and social widgets
Improving memento box for mobile
Improving actu box
Adding horizontal bar
Adding separation white lines between boxes in tablette/mobile mode

v0.14.0 - 2014.11.09v0.14.0 - 2014.11.09

Styles

Add possibility to disable font size increase in big screens using .site-no-sizeadjust
Fix select dropdown icon position on firefox

v0.13.4 - 2014.11.01v0.13.4 - 2014.11.01

General

Add new icon and update message styles accordingly
Fix search form
Keyboard navigation on menubar sub-items
Fix input fields not working in some browsers

Styles

Fix icons vertical alignment

v0.13.3 - 2014.09.03v0.13.3 - 2014.09.03

General

Fix custom search and its documentation
Fix various labels in search form for better clarity and rendering

Styles

Try fixing icon font problem reports by moving the start codepoint
Fix letter spacing on global navigation items and paddings on panels
Fix search and global nav buttons highlight color
Fix top margin on global header
Adjust height for media visuals on mobile devices

Documentation

Fix styleguide not including css/js/jpg files from the theme

v0.13.2 - 2014.07.15v0.13.2 - 2014.07.15

General

Add charset and description meta tags to the templates and doc
Add favicon.ico path to templates and doc

Styles

Fix banner image size
Adjust icon line height
Adjust mainav color on mobile devices

Scripts

Remove tabindex when leaving accessibility link targets to avoid mouse focus
Fix auto-truncate (ellipsis)

Documentation

Accessibility improvements
Fix incorrect tab numbering
Update human.txt
Update visual image
Add auto-truncate example

v0.13.1 - 2014.07.09v0.13.1 - 2014.07.09

Scripts

Fix JS loading issues on IE7

Styles

Adjust vertical alignment on icons
Fix themed headgins color

Documentation

Fix some typos
Update git repository link

v0.13.0 - 2014.07.03v0.13.0 - 2014.07.03

General

Add support for pagination navigation
Add support for plain icon buttons
Add various rel attributes to links for better SEO

Styles

Improve support for un-styled lists
Fix media element height when not in list
Do not speak out presentation only element on screen readers

Scripts

Improve tree widget accessibility
Fix scripts not loading when missing require call in the footer

Documentation

Add Google Analytics documentation
Update custom scripts documentation

v0.12.1 - 2014.06.25v0.12.1 - 2014.06.25

Documentation

Fix website name template example
Add documentation for add new icons

Styles

Add 'more' icon and fixed some others

v0.12.0 - 2014.06.25v0.12.0 - 2014.06.25

General

Fix some accessibility issues
Follow 1st child link when mainnav link is just a toggle
Add test suite

Styles

Adjust media list margins
Add missing neutral CSS theme
Fix vertical alignment on buttons
Add media banner (media-banner)
Add support for disabled buttons (btn-disabled) and menu items (menu-item-disabled)
Add support for disabled and active toolbar items (toolbar-item-disabled, toolbar-item-active)
Add support for nested tabs
Small adjustments

Scripts

Fix JS trim error on IE, switch to jQuery's trim instead
Fix no-tracking libraries still including google analytics code
Fix basic destroy procedure, and validate toggle and tooltip destruction
Ignore events on disabled widgets
Various fixes

Documentation

Add jQuery module documentation
Add media banner examples
Update buttons, menubar and toolbar examples
Fix links to file includes
Add example of collapse working with mouseenter/mouseleave event

v0.11.0 – 2014.06.06v0.11.0 – 2014.06.06

Scripts

Fix JS errors on older browsers (IE<9)
Fix no-tracking JS loading

Styles

Fix some XS styles do not overwrite S styles
Add s-grid to overwrite default grid on tablets
Add in-line icons

Documentation

Fix templates path
Update templates to use the s-grid
Various fixes to the templates
Update search and sitemap pages
Document custom scripts/plugins usage
Add changelog to the doc

v0.10.2 – 2014.06.04v0.10.2 – 2014.06.04

Scripts

Add no-tracking version of the foot scripts
Fix respondjs CDN loading
Fix broken header links toggles

Styles

Fix z-index and width of notifications
Fix border on links not having the same color as the text
Add more space around links on small devices
Fix word break in code blocks

Documentation

Fix some typos and links to the templates

v0.10.1 – 2014.05.28v0.10.1 – 2014.05.28

General

Do not add heading anchors on secondary headings

Scripts

Remove tracking lib from the notracking scripts
Add missing notracking scripts
Various performance optimizations

Styles

Adjust tooltip pointer border size

Documentation

Fix background colors being all gray
Fix 3rd-party library version not showing
Various performance optimizations

v0.10.0 – 2014.05.27v0.10.0 – 2014.05.27

General

Move the documentation to the production server : bootstrap.epfl.ch
Static files are served by static.epfl.ch
Open project blog for news and maintenance announcements : bootstrap blog
Open project wiki for developer documentation : bootstrap wiki
Open git repository to the public: bootstrap git

Scripts

Enable GoogleAnalytics by default
Add no-tracking variants of the libraries
Fix jQuery noConflict mode and dependency with touch library

Styles

Fix the grid cells for small devices
Fix tooltip pointer position
Fix heading anchors positioning
Add styling for figure/figcaption
Add highlighting of social media links
Add some default styling for when JS is disabled
Add link to all results in auto-complete
Add panel-cell versions of panels for easier inclusion in grid cells
Update stroked tables styles
Adjust margin and spacing on in-line buttons, headings, media elements and table captions
Fix full-width cells not taking 100% width
Update print styles
Limit text area width to content width

Documentation

Update installation procedure and page templates
Update to include modules and widget structures as well as more examples.
Add link to JS documentation
Updated page structure documentation
Place the page header in the correct place instead of the page content
Fix link to templates folder
Add documentation for panel-cell
Update 3rd-party libraries documentation and add version numbers
Open navigation tree to show current page
Load header from the static server

Templates

Update the global homepage template
Update localnav structure to match themainnav`
Fix images sizes
Add EPFL header includes without the local search
Add minimal template examples

v0.9.0 – 2014.05.09v0.9.0 – 2014.05.09

First public beta

Page StructurePage Structure

The pages have the following structure:

.a11y: the accessibility quick navigation links
.site: the site wrapper
- #epfl-header.epfl.site-header: the global EPFL header
  - .logo: the EPFL logo
  - .epflnav: the global navigation links wrapper
    - #epfl-navigation: the global navigation links
  - .search: the search wrapper
    - #search: the search section
      - #search-form: the search form
- #header.site-header: the site header
  - .site-title: the site title
  - .bcnav: the breadcrumb navigation
  - .lang: the language selector
  - .mainnav: the main/horizontal navigation wrapper
    - #main-navigation: the main/horizontal navigation
  - #tools.tools: the tools bar
- #content.site-content.page: the actual page
  - .page-header: the page header
    - .page-title: the page title
  - .page-content: the page content
  - .page-footer: the page footer
  - #sidebar.sidebar: the side bar
    - .localnav: the secondary/vertical navigation wrapper
      - #secondary-navigation: the secondary/vertical navigation
- #footer.site-footer: the site footer
  - .login: the login link

GridGrid

The framework is based on a 12-columns grid for easier scaffolding. Each major block/row in the grid is defined using the g-row class. Individual divisions inside a block/row are then defined using the g-span-* classes.

Grid horizontal classesGrid horizontal classes

Cell widthCell width

The width of a cell in the grid is defined using the following classes:

g-span-col1

g-span-col11

g-span-col2

g-span-col10

g-span-col3

g-span-col9

g-span-col4

g-span-col8

g-span-col5

g-span-col7

g-span-col6

g-span-col7

g-span-col5

g-span-col8

g-span-col4

g-span-col9

g-span-col3

g-span-col10

g-span-col2

g-span-col11

g-span-col1

g-span-col12


  <div class="g-row">
    <div class="g-span-col1"><div class="neutral-bg-color1">g-span-col1</div></div>
    <div class="g-span-col11"><div class="neutral-bg-color1">g-span-col11</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col2"><div class="neutral-bg-color1">g-span-col2</div></div>
    <div class="g-span-col10"><div class="neutral-bg-color1">g-span-col10</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col3"><div class="neutral-bg-color1">g-span-col3</div></div>
    <div class="g-span-col9"><div class="neutral-bg-color1">g-span-col9</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col4"><div class="neutral-bg-color1">g-span-col4</div></div>
    <div class="g-span-col8"><div class="neutral-bg-color1">g-span-col8</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col5"><div class="neutral-bg-color1">g-span-col5</div></div>
    <div class="g-span-col7"><div class="neutral-bg-color1">g-span-col7</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col6"><div class="neutral-bg-color1">g-span-col6</div></div>
    <div class="g-span-col6"><div class="neutral-bg-color1">g-span-col6</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col7"><div class="neutral-bg-color1">g-span-col7</div></div>
    <div class="g-span-col5"><div class="neutral-bg-color1">g-span-col5</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col8"><div class="neutral-bg-color1">g-span-col8</div></div>
    <div class="g-span-col4"><div class="neutral-bg-color1">g-span-col4</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col9"><div class="neutral-bg-color1">g-span-col9</div></div>
    <div class="g-span-col3"><div class="neutral-bg-color1">g-span-col3</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col10"><div class="neutral-bg-color1">g-span-col10</div></div>
    <div class="g-span-col2"><div class="neutral-bg-color1">g-span-col2</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col11"><div class="neutral-bg-color1">g-span-col11</div></div>
    <div class="g-span-col1"><div class="neutral-bg-color1">g-span-col1</div></div>
  </div>
  <div class="g-row">
    <div class="g-span-col12"><div class="neutral-bg-color1">g-span-col12</div></div>
  </div>

Cell horizontal offsetCell horizontal offset

If for some reason, a cell needs to be offset from its original horizontal position, you can use:

n/a

g-offset-col1

g-offset-col2

g-offset-col3

g-offset-col4

g-offset-col5

g-offset-col6

g-offset-col7

g-offset-col8

g-offset-col9

g-offset-col10

g-offset-col11


  <div class="g-row">
    <div class="g-span-col1"><div class="neutral-bg-color1">n/a</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col1 g-span-col1"><div class="neutral-bg-color1">g-offset-col1</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col2 g-span-col1"><div class="neutral-bg-color1">g-offset-col2</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col3 g-span-col1"><div class="neutral-bg-color1">g-offset-col3</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col4 g-span-col1"><div class="neutral-bg-color1">g-offset-col4</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col5 g-span-col1"><div class="neutral-bg-color1">g-offset-col5</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col6 g-span-col1"><div class="neutral-bg-color1">g-offset-col6</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col7 g-span-col1"><div class="neutral-bg-color1">g-offset-col7</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col8 g-span-col1"><div class="neutral-bg-color1">g-offset-col8</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col9 g-span-col1"><div class="neutral-bg-color1">g-offset-col9</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col10 g-span-col1"><div class="neutral-bg-color1">g-offset-col10</div></div>
  </div>
  <div class="g-row">
    <div class="g-offset-col11 g-span-col1"><div class="neutral-bg-color1">g-offset-col11</div></div>
  </div>

Convenience classesConvenience classes

Some additional classes have been added for easier structuring. They respectively allow to create cells that span 1/12, 1/6, 1/4, 1/3, 1/2, 2/3, 3/4, 5/6, 11/12 or the full width of a row:
g-span-1_12, g-span-1_6, g-span-1_4, g-span-1_3, g-span-1_2, g-span-2_3, g-span-3_4, g-span-5_6, g-span-11_12 and g-span-1_1.

The same has been done for the cell offset g-offset-….

There is also a g-fill-cell class to have an element take up all the cell space.

Grid vertical classesGrid vertical classes

Cell heightCell height

The height of a cell in the grid can be fixed using the following classes:

g-span-row1

g-span-row2

g-span-row3

g-span-row4

g-span-row5


  <div class="g-row">
    <div class="g-span-row1 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-span-row1</div></div>
    <div class="g-span-row2 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-span-row2</div></div>
    <div class="g-span-row3 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-span-row3</div></div>
    <div class="g-span-row4 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-span-row4</div></div>
    <div class="g-span-row5 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-span-row5</div></div>
  </div>

Cell vertical offsetCell vertical offset

If for some reason, a cell needs to be offset from its original vertical position, you can use:

n/a

g-offset-row1

g-offset-row2

g-offset-row3

g-offset-row4


  <div class="g-row">
    <div class="g-span-row1 g-span-col2"><div class="g-fill-cell neutral-bg-color1">n/a</div></div>
    <div class="g-offset-row1 g-span-row1 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-offset-row1</div></div>
    <div class="g-offset-row2 g-span-row1 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-offset-row2</div></div>
    <div class="g-offset-row3 g-span-row1 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-offset-row3</div></div>
    <div class="g-offset-row4 g-span-row1 g-span-col2"><div class="g-fill-cell neutral-bg-color1">g-offset-row4</div></div>
  </div>

Nested gridsNested grids

Grids can easily be nested to offer infinite scaffolding possibilities.

g-span-1_2

g-span-1_3

g-span-2_3

g-span-1_2

g-span-3_4

g-span-1_4


  <div class="g-row">
    <div class="g-span-1_2">
      <div class="g-fill-cell neutral-bg-color1">g-span-1_2
        <div class="g-row">
          <div class="g-span-1_3"><div class="g-fill-cell neutral-bg-color4">g-span-1_3</div></div>
          <div class="g-span-2_3"><div class="g-fill-cell neutral-bg-color4">g-span-2_3</div></div>
        </div>
      </div>
    </div>
    <div class="g-span-1_2">
      <div class="g-fill-cell neutral-bg-color1">g-span-1_2
        <div class="g-row">
          <div class="g-span-3_4"><div class="g-fill-cell neutral-bg-color4">g-span-3_4</div></div>
          <div class="g-span-1_4"><div class="g-fill-cell neutral-bg-color4">g-span-1_4</div></div>
        </div>
      </div>
    </div>
  </div>

Overwrite grid in tablet layoutOverwrite grid in tablet layout

All grid-span-… and grid-offset-… classes also exist in a grid-span-s-… and grid-offset-s-… version to overwrite the layout for tablets (s-layout).
See homepage-faculty.en.html and homepage-global.html for an example.

Fixed vs fluid layoutFixed vs fluid layout

By default the width of the layout is constrained by the .site element, but it can be set to fluid by simply adding the site-fluid class to it.

Font size adjustmentsFont size adjustments

By default, the grid will adapt to larger screens and increase the font-size for easier reading when the space allows it. This feature can be disabled by adding the site-no-sizeadjust class to the .site element.

VisibilityVisibility

The visibility of individual elements can be adjusted for each screen sizes.

HidingHiding

HiddenHidden

Using the hidden class, the element is hidden from the users and the screen readers. There are also size-specific equivalents of this class to only hide elements at specific sizes:

hidden

hidden-xxs

hidden-xs

hidden-s

hidden-m

hidden-l

hidden-xl

hidden-xxl


  <div class="g-row">
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden"></div>hidden</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-xxs"></div>hidden-xxs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-xs"></div>hidden-xs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-s"></div>hidden-s</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-m"></div>hidden-m</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-l"></div>hidden-l</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-xl"></div>hidden-xl</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden-xxl"></div>hidden-xxl</div></div>
  </div>

Using the visuallyhidden class, the element is hidden from the users only, but still be visible to screen readers. There are also size-specific equivalents of this class to only hide the elements at specific sizes:

visuallyhidden

visuallyhidden-xxs

visuallyhidden-xs

visuallyhidden-s

visuallyhidden-m

visuallyhidden-l

visuallyhidden-xl

visuallyhidden-xxl


  <div class="g-row">
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden"></div>visuallyhidden</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-xxs"></div>visuallyhidden-xxs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-xs"></div>visuallyhidden-xs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-s"></div>visuallyhidden-s</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-m"></div>visuallyhidden-m</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-l"></div>visuallyhidden-l</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-xl"></div>visuallyhidden-xl</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden-xxl"></div>visuallyhidden-xxl</div></div>
  </div>

Hidden from screen readersHidden from screen readers

If you add the role="presentation" attribute on an element, it will be ignored by screen readers but still shown to normal users.

VisibleVisible

Elements that have been hidden by default can be made visible at specific sizes using the following classes:

visible-xxs

visible-xs

visible-s

visible-m

visible-l

visible-xl

visible-xxl


  <div class="g-row">
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-xxs"></div>visible-xxs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-xs"></div>visible-xs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-s"></div>visible-s</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-m"></div>visible-m</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-l"></div>visible-l</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-xl"></div>visible-xl</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="hidden visible-xxl"></div>visible-xxl</div></div>
  </div>

The same goes for visuallyhidden elements:

visible-xxs

visible-xs

visible-s

visible-m

visible-l

visible-xl

visible-xxl


  <div class="g-row">
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-xxs"></div>visible-xxs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-xs"></div>visible-xs</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-s"></div>visible-s</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-m"></div>visible-m</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-l"></div>visible-l</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-xl"></div>visible-xl</div></div>
    <div class="g-span-col3 g-span-row1"><div class="g-fill-cell"><div class="visuallyhidden visible-xxl"></div>visible-xxl</div></div>
  </div>

ColorsColors

BaseBase

Main color system
Primary font color	`#454545`
Secondary font color	`#000000`
Primary border color	`#000000`
Secondary border color	`#999c98`
1st neutral color
2nd neutral color
3rd neutral color
4th neutral color

InformationInformation

Color codes are also used to convey some information, such as operation state, problem severity, etc. Various references exist for this, such as:

The EPFL framework is based on these references and defines the following color codes:

Information color codes
State	Danger	Caution	Non-safe	Safe	Neutral
Error	Error	Warning	Info	Success	Message
Severity	Critical	High	Low	Normal	Medium
Operation	Stop		Start	Continue/Finish	More

ThemesThemes

The EPFL framework has the particularity to exist in various themes to better identify the different domains (mainly schools). The color palette is defined by the head includes that will load the corresponding style sheet.

The following table goes over these various colors:

Themes color palette
Name	1st color	2nd color	3rd color	4th color
EPFL
ENAC
SB
STI
IC
SV
CDM
CDH
INTER
Associations

Theme classesTheme classes

Each theme provides a set of classes to easily access the color palette:

Themes CSS classes
Palette	Foreground class	Background class
Current theme	local-color1	local-bg-color1
	local-color2	local-bg-color2
	local-color3	local-bg-color3
	local-color4	local-bg-color4
Neutral theme	neutral-color1	neutral-bg-color1
	neutral-color2	neutral-bg-color2
	neutral-color3	neutral-bg-color3
	neutral-color4	neutral-bg-color4
Hashed Background		hashed-bg

If you wish to use the color of another theme in one of the pages, you can use one of the following classes:

Other Themes CSS classes
Theme	Foreground class	Background class
EPFL	epfl-color	epfl-bg-color
EPFL	epfl-color2	epfl-bg-color2
ENAC	enac-color	enac-bg-color
SB	sb-color	sb-bg-color
STI	sti-color	sti-bg-color
IC	ic-color	ic-bg-color
SV	sv-color	sv-bg-color
CDM	cdm-color	cdm-bg-color
CDH	cdh-color	cdh-bg-color
INTER	inter-color	inter-bg-color
Associations	associations-color	associations-bg-color

TypographyTypography

FontsFonts

Main fonts of the front-end framework
Type	Font Styles	Usage
Primary content	Arial, Helvetica, Verdana, sans-serif	generic content
Secondary content	Georgia, 'Times New Roman', Times, serif	button-links, toolbar headers, …
Headings	"Arial Black", Arial, Helvetica, Verdana, sans-serif	content headings
Title	Impact, "Arial Black", Arial, sans-serif	site title, panel titles, sidebar headings, external content headings, …
Code	Monaco, Courier, "Lucida console", "Consolas", monospace	Code samples
Icons	epfl-symbols	Icons to illustrate an action

HeadingsHeadings

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading


  <a name="level-1-heading"></a><h1>Level 1 Heading</h1>
  <a name="level-2-heading"></a><h2>Level 2 Heading</h2>
  <a name="level-3-heading"></a><h3>Level 3 Heading</h3>
  <a name="level-4-heading"></a><h4>Level 4 Heading</h4>
  <a name="level-5-heading"></a><h5>Level 5 Heading</h5>
  <a name="level-6-heading"></a><h6>Level 6 Heading</h6>

Common contentCommon content

In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo

Odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.


  <a name="in-pellentesque-faucibus-vestibulum-nulla-at-nulla-justo"></a><h3>In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo</h3>
  <p>Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed <abbr title="Lorem ipsum dolor sit amet">auctor</abbr> neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in <i lang="la">nulla</i> enim. Phasellus molestie magna non est <u>bibendum</u> non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
  <p>Odio. Proin quis tortor orci. <dfn>Etiam</dfn> at risus et justo <b>dignissim</b> congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. <em>Quisque eget odio ac lectus vestibulum faucibus eget in metus</em>. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>

Themed contentThemed content

In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo


  <div class="themed">
    <a name="in-pellentesque-faucibus-vestibulum-nulla-at-nulla-justo"></a><h3>In Pellentesque Faucibus Vestibulum. Nulla At Nulla Justo</h3>
    <p>Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed <abbr title="Lorem ipsum dolor sit amet">auctor</abbr> neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in <i lang="la">nulla</i> enim. Phasellus molestie magna non est <u>bibendum</u> non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
    <p>Odio. Proin quis tortor orci. <dfn>Etiam</dfn> at risus et justo <b>dignissim</b> congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. <em>Quisque eget odio ac lectus vestibulum faucibus eget in metus</em>. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>
  </div>

Code blocksCode blocks

A sample Java code block:

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World");
  }
}


<pre><code class="language-java">public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World");
  }
}
</code></pre>

ImagesImages

To add images to your content, you need to add the following code:


  <img src="//lorempixel.com/32/32/abstract" alt="my image">

The image will be displayed at its original size by default, as below:


  <!-- 32 x 32 pixles -->
  <img src="//lorempixel.com/32/32/abstract" alt="my image">

  <!-- 64 x 64 pixles -->
  <img src="//lorempixel.com/64/64/abstract" alt="my image">

You can also specify the size of the image, using the width and height attributes:


  <!-- 64 x 64 pixles -->
  <img src="//lorempixel.com/128/128/abstract" alt="my image" width="64" height="64">

Bootstrap will take care of resizing the image if its width is larger than the content area, while keeping the aspect ratio intact. So if the content area has a width of 200 pixels, your image will be downsized to 200 pixels. Here is an example:


  <img src="//lorempixel.com/640/120/abstract" alt="my image">

Positioning imagesPositioning images

You can place the image to the left/right of your content using the following .left and .right CSS classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


  <img class="left" src="//lorempixel.com/64/64/abstract/1" alt="my image">
  <img class="right" src="//lorempixel.com/64/64/abstract/2" alt="my image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Images with a fixed proportionImages with a fixed proportion

If you want your image to have a width that is always a percentage of the content area, you can use the following code:


  <img src="//lorempixel.com/300/120/abstract" alt="my image" style="width: 50%;">

This will make sure your image is 50% of the content area width whether you are viewing the page on a desktop or on a mobile.

Images with a forced sizeImages with a forced size

If you need your image to have a specific size, and you do not want bootstrap to do any resizing, you just need to specify its size using an inline style attribute:


  <img src="//lorempixel.com/600/120/abstract" alt="my image" style="width:600px;height:120px;max-width:none;max-height:none">

Note that you will need your own CSS overrides if you want to do any resizing on such images.

Showing different images for different screen sizesShowing different images for different screen sizes

By default, when you add an image to your content, bootstrap will just resize it to make sure it is not cropped. But you will still have the same image for each screen size.

This is not always the optimal experience and you might want to serve a different image to mobile users than the one you show to desktop users.

There are several solutions to address this.

Using CSS classesUsing CSS classes

Bootstrap provides some CSS visibility helper classes that you can leverage for such a use case:


  <img class="hidden visible-xxs visible-xs" src="//lorempixel.com/800/120/abstract/1" alt="my image for feature phones">
  <img class="hidden visible-s" src="//lorempixel.com/800/120/abstract/2" alt="my image for smartphones and tablets">
  <img class="hidden visible-m visible-l visible-xl visible-xxl" src="//lorempixel.com/800/120/abstract/3" alt="my image for desktops">

Using the HTML5 picture elementUsing the HTML5 picture element

HTML5 provides a new element to address this particular issue. You can use it as follows:


  <picture>
    <source media="(max-width: 46em)" srcset="//lorempixel.com/800/120/abstract/1 1x, //lorempixel.com/1600/240/abstract/1 2x">
    <source media="(min-width: 61.25em)" srcset="//lorempixel.com/800/120/abstract/3 1x, //lorempixel.com/1600/240/abstract/3 2x">
    <source srcset="//lorempixel.com/800/120/abstract/2 1x, //lorempixel.com/1600/240/abstract/2 2x">
    <img src="//lorempixel.com/800/120/abstract/4" alt="my image">
  </picture>

You can read more on this approach in Responsive Images Done Right from the guys at Smashing Magazine, and also in Built-in Browser Support for Responsive Images from the HTML5 Rocks team.

ListsLists

Ordered listsOrdered lists

Nulla Facilisi. Duis Aliquet Egestas
Nullam In Dui Mauris. Vivamus Hendrerit
1. Donec Congue Lacinia Dui, A Porttitor Lectus
2. Ut In Nulla Enim. Phasellus
3. Vestibulum Ante Ipsum Primis
  1. Nullam In Dui
  2. Praesent Id Metus Massa, Ut Blandit
Lorem Ipsum Dolor Sit
Proin Quis Tortor Orci. Etiam At
Curabitur Vulputate, Ligula Lacinia Scelerisque


  <ol>
    <li>Nulla Facilisi. Duis Aliquet Egestas</li>
    <li>Nullam In Dui Mauris. Vivamus Hendrerit
      <ol>
        <li>Donec Congue Lacinia Dui, A Porttitor Lectus</li>
        <li>Ut In Nulla Enim. Phasellus</li>
        <li>Vestibulum Ante Ipsum Primis
          <ol>
            <li>Nullam In Dui</li>
            <li>Praesent Id Metus Massa, Ut Blandit</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Lorem Ipsum Dolor Sit</li>
    <li>Proin Quis Tortor Orci. Etiam At</li>
    <li>Curabitur Vulputate, Ligula Lacinia Scelerisque</li>
  </ol>

Unordered listsUnordered lists

Nulla Facilisi. Duis Aliquet Egestas
Nullam In Dui Mauris. Vivamus Hendrerit
- Donec Congue Lacinia Dui, A Porttitor Lectus
- Ut In Nulla Enim. Phasellus
- Vestibulum Ante Ipsum Primis
  - Nullam In Dui
  - Praesent Id Metus Massa, Ut Blandit
Lorem Ipsum Dolor Sit
Proin Quis Tortor Orci. Etiam At
Curabitur Vulputate, Ligula Lacinia Scelerisque


  <ul>
    <li>Nulla Facilisi. Duis Aliquet Egestas</li>
    <li>Nullam In Dui Mauris. Vivamus Hendrerit
      <ul>
        <li>Donec Congue Lacinia Dui, A Porttitor Lectus</li>
        <li>Ut In Nulla Enim. Phasellus</li>
        <li>Vestibulum Ante Ipsum Primis
          <ul>
            <li>Nullam In Dui</li>
            <li>Praesent Id Metus Massa, Ut Blandit</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Lorem Ipsum Dolor Sit</li>
    <li>Proin Quis Tortor Orci. Etiam At</li>
    <li>Curabitur Vulputate, Ligula Lacinia Scelerisque</li>
  </ul>

Definition listsDefinition lists

Proin Quis Tortor Orci

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.

Donec Congue Lacinia

Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla.

Proin Quis Tortor: In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet.
Suspendisse Dictum: Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie.

Lorem Ipsum Dolor

Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.


  <dl>
    <dt><dfn>Proin Quis Tortor Orci</dfn></dt>
    <dd>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla.</dd>
    <dt><dfn>Donec Congue Lacinia</dfn></dt>
    <dd>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla.
      <dl>
        <dt><dfn>Proin Quis Tortor</dfn></dt>
        <dd>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet.</dd>
        <dt><dfn>Suspendisse Dictum</dfn></dt>
        <dd>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie.</dd>
      </dl>
    </dd>
    <dt><dfn>Lorem Ipsum Dolor</dfn></dt>
    <dd>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.</dd>
  </dl>

Unstyled listsUnstyled lists

If you need to have a bare list, you can use the list-unstyled class to remove all the default list styles.

Nulla Facilisi. Duis Aliquet Egestas
Nullam In Dui Mauris. Vivamus Hendrerit
- Donec Congue Lacinia Dui, A Porttitor Lectus
- Ut In Nulla Enim. Phasellus
- Vestibulum Ante Ipsum Primis
Lorem Ipsum Dolor Sit
Proin Quis Tortor Orci. Etiam At
Curabitur Vulputate, Ligula Lacinia Scelerisque


  <ol class="list-unstyled">
    <li>Nulla Facilisi. Duis Aliquet Egestas</li>
    <li>Nullam In Dui Mauris. Vivamus Hendrerit
      <ul class="list-unstyled">
        <li>Donec Congue Lacinia Dui, A Porttitor Lectus</li>
        <li>Ut In Nulla Enim. Phasellus</li>
        <li>Vestibulum Ante Ipsum Primis</li>
      </ul>
    </li>
    <li>Lorem Ipsum Dolor Sit</li>
    <li>Proin Quis Tortor Orci. Etiam At</li>
    <li>Curabitur Vulputate, Ligula Lacinia Scelerisque</li>
  </ol>

TablesTables

Styled tableStyled table

To style a table, add the table class to it.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <table class="table">
    <caption>Some table caption</caption>
    <thead>
      <tr>
        <th>Entry Header 1</th>
        <th>Entry Header 2</th>
        <th>Entry Header 3</th>
        <th>Entry Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry First Line 1</td>
        <td>Entry First Line 2</td>
        <td>Entry First Line 3</td>
        <td>Entry First Line 4</td>
      </tr>
      <tr>
        <td>Entry Line 1</td>
        <td>Entry Line 2</td>
        <td>Entry Line 3</td>
        <td>Entry Line 4</td>
      </tr>
      <tr>
        <td>Entry Last Line 1</td>
        <td>Entry Last Line 2</td>
        <td>Entry Last Line 3</td>
        <td>Entry Last Line 4</td>
      </tr>
    </tbody>
  </table>

Narrow tableNarrow table

By default, tables will take up all the horizontal space available. If you wish to have a narrow table, just add the table-narrow class to it.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <table class="table table-narrow">
    <caption>Some table caption</caption>
    <thead>
      <tr>
        <th>Entry Header 1</th>
        <th>Entry Header 2</th>
        <th>Entry Header 3</th>
        <th>Entry Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry First Line 1</td>
        <td>Entry First Line 2</td>
        <td>Entry First Line 3</td>
        <td>Entry First Line 4</td>
      </tr>
      <tr>
        <td>Entry Line 1</td>
        <td>Entry Line 2</td>
        <td>Entry Line 3</td>
        <td>Entry Line 4</td>
      </tr>
      <tr>
        <td>Entry Last Line 1</td>
        <td>Entry Last Line 2</td>
        <td>Entry Last Line 3</td>
        <td>Entry Last Line 4</td>
      </tr>
    </tbody>
  </table>

Smaller tableSmaller table

You can reduce the overall text size in the table to fit in more content by adding the table-small.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <table class="table table-small">
    <caption>Some table caption</caption>
    <thead>
      <tr>
        <th>Entry Header 1</th>
        <th>Entry Header 2</th>
        <th>Entry Header 3</th>
        <th>Entry Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry First Line 1</td>
        <td>Entry First Line 2</td>
        <td>Entry First Line 3</td>
        <td>Entry First Line 4</td>
      </tr>
      <tr>
        <td>Entry Line 1</td>
        <td>Entry Line 2</td>
        <td>Entry Line 3</td>
        <td>Entry Line 4</td>
      </tr>
      <tr>
        <td>Entry Last Line 1</td>
        <td>Entry Last Line 2</td>
        <td>Entry Last Line 3</td>
        <td>Entry Last Line 4</td>
      </tr>
    </tbody>
  </table>

Stroked tableStroked table

To emphasize the division between the table rows, you can use the table-stroke class that will add full lines between the table rows.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <table class="table table-stroked">
    <caption>Some table caption</caption>
    <thead>
      <tr>
        <th>Entry Header 1</th>
        <th>Entry Header 2</th>
        <th>Entry Header 3</th>
        <th>Entry Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry First Line 1</td>
        <td>Entry First Line 2</td>
        <td>Entry First Line 3</td>
        <td>Entry First Line 4</td>
      </tr>
      <tr>
        <td>Entry Line 1</td>
        <td>Entry Line 2</td>
        <td>Entry Line 3</td>
        <td>Entry Line 4</td>
      </tr>
      <tr>
        <td>Entry Last Line 1</td>
        <td>Entry Last Line 2</td>
        <td>Entry Last Line 3</td>
        <td>Entry Last Line 4</td>
      </tr>
    </tbody>
  </table>

Striped tableStriped table

To add zebra-stripes to the table, use the table-striped class.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <table class="table table-striped">
    <caption>Some table caption</caption>
    <thead>
      <tr>
        <th>Entry Header 1</th>
        <th>Entry Header 2</th>
        <th>Entry Header 3</th>
        <th>Entry Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry First Line 1</td>
        <td>Entry First Line 2</td>
        <td>Entry First Line 3</td>
        <td>Entry First Line 4</td>
      </tr>
      <tr>
        <td>Entry Line 1</td>
        <td>Entry Line 2</td>
        <td>Entry Line 3</td>
        <td>Entry Line 4</td>
      </tr>
      <tr>
        <td>Entry Last Line 1</td>
        <td>Entry Last Line 2</td>
        <td>Entry Last Line 3</td>
        <td>Entry Last Line 4</td>
      </tr>
    </tbody>
  </table>

Hoverable tableHoverable table

To add a hover effect on the table, use the table-hover class.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <table class="table table-hover">
    <caption>Some table caption</caption>
    <thead>
      <tr>
        <th>Entry Header 1</th>
        <th>Entry Header 2</th>
        <th>Entry Header 3</th>
        <th>Entry Header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry First Line 1</td>
        <td>Entry First Line 2</td>
        <td>Entry First Line 3</td>
        <td>Entry First Line 4</td>
      </tr>
      <tr>
        <td>Entry Line 1</td>
        <td>Entry Line 2</td>
        <td>Entry Line 3</td>
        <td>Entry Line 4</td>
      </tr>
      <tr>
        <td>Entry Last Line 1</td>
        <td>Entry Last Line 2</td>
        <td>Entry Last Line 3</td>
        <td>Entry Last Line 4</td>
      </tr>
    </tbody>
  </table>

Responsive tableResponsive table

To make tables scrollable on small devices, wrap it inside an element with the table-container class.

Some table caption
Entry Header 1	Entry Header 2	Entry Header 3	Entry Header 4
Entry First Line 1	Entry First Line 2	Entry First Line 3	Entry First Line 4
Entry Line 1	Entry Line 2	Entry Line 3	Entry Line 4
Entry Last Line 1	Entry Last Line 2	Entry Last Line 3	Entry Last Line 4


  <div class="table-container">
    <table class="table">
      <caption>Some table caption</caption>
      <thead>
        <tr>
          <th>Entry Header 1</th>
          <th>Entry Header 2</th>
          <th>Entry Header 3</th>
          <th>Entry Header 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Entry First Line 1</td>
          <td>Entry First Line 2</td>
          <td>Entry First Line 3</td>
          <td>Entry First Line 4</td>
        </tr>
        <tr>
          <td>Entry Line 1</td>
          <td>Entry Line 2</td>
          <td>Entry Line 3</td>
          <td>Entry Line 4</td>
        </tr>
        <tr>
          <td>Entry Last Line 1</td>
          <td>Entry Last Line 2</td>
          <td>Entry Last Line 3</td>
          <td>Entry Last Line 4</td>
        </tr>
      </tbody>
    </table>
  </div>

QuotesQuotes

Block quotesBlock quotes

Adding the <cite> attribute to a <blockquote> (and its <footer>):

You know the golden rule, don’t you boy? Those who have the gold make the rules.

Crazy hunch-backed old guy in Aladdin


  <blockquote cite="http://www.imdb.com/character/ch0000672/quotes">
    <p>You know the golden rule, don’t you boy? Those who have the gold make the rules.</p>
    <footer><a href="http://www.imdb.com/character/ch0000672/quotes">Crazy hunch-backed old guy</a> in <cite><a href="http://en.wikipedia.org/wiki/Aladdin_(1992_Disney_film)">Aladdin</a></cite></footer>
  </blockquote>

A quote from a specification:

A person's name is not the title of a work — even if people call that person a piece of work

HTML5 for Web Developers


  <blockquote>
    <p>A person's name is not the title of a work — even if people call that person a piece of work</p>
    <footer><cite><a href="http://developers.whatwg.org/text-level-semantics.html#the-cite-element">HTML5 for Web Developers</a></cite></footer>
  </blockquote>

An academic-style book citation:

Citations … all include the following: author (or editor, compiler, or translator standing in place of the author), title (and usually subtitle), and date of publication.

The Chicago Manual of Style, 15th Edition (Chicago: University of Chicago Press, 2003), 596


  <blockquote>
    <p>Citations … all include the following: author (or editor, compiler, or translator standing in place of the author), title (and usually subtitle), and date of publication.</p>
    <footer><cite><a href="http://www.chicagomanualofstyle.org/">The Chicago Manual of Style</a></cite>, 15th Edition (Chicago: University of Chicago Press, 2003), 596</footer>
  </blockquote>

Inline quotesInline quotes

An academic-style journal citation:

The information capacity of the human motor system in controlling the amplitude of movement, Paul M. Fitts (1954). Journal of Experimental Psychology, volume 47, number 6, June 1954, pp. 381–391


  <ol>
    <li>The information capacity of the human motor system in controlling the amplitude of movement, Paul M. Fitts (1954). <cite>Journal of Experimental Psychology</cite>, volume 47, number 6, June 1954, pp. 381–391</li>
  </ol>

Nested quotations:

Luke continued, And then she called him a scruffy-looking nerf-herder! I think I’ve got a chance! The poor naive fool…


  <p>Luke continued, <q>And then she called him a <q>scruffy-looking nerf-herder</q>! I think I’ve got a chance!</q> The poor naive fool…</p>

FormsForms

Styled formStyled form

label 1

legend

label 1.1

Choice 1

Choice 2

Choice 3

legend

Choice 1

Choice 2

Choice 3

select

textarea

number

range

color

tel

url

date

time

month

week

datetime-local


  <form class="form" action="#">
    <div class="form-group">
      <label for="text1">label 1</label>
      <input name="text1" id="text1" type="text">
    </div>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <label for="text11">label 1.1</label>
        <input name="text11" id="text11" type="text">
      </div>
      <div class="form-group">
        <input id="radio11" type="radio" name="radio" value="v1">
        <label for="radio11">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="radio12" type="radio" name="radio" value="v2">
        <label for="radio12">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="radio13" type="radio" name="radio" value="v3">
        <label for="radio13">Choice 3</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <input id="checkbox11" type="checkbox" name="checkbox" value="v1">
        <label for="checkbox11">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="checkbox12" type="checkbox" name="checkbox" value="v2">
        <label for="checkbox12">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="checkbox13" type="checkbox" name="checkbox" value="v3">
        <label for="checkbox13">Choice 3</label>
      </div>
    </fieldset>
    <div class="form-group">
      <label for="select1">select</label>
      <div class="form-select">
        <select name="select1" id="select1">
          <optgroup label="group1">
            <option selected="selected">1.1</option>
            <option>1.2</option>
          </optgroup>
          <optgroup label="group2">
            <option>2.1</option>
            <option>2.2</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="textarea1">textarea</label>
      <textarea name="textarea1" id="textarea1">tutu</textarea>
    </div>
    <div class="form-group">
      <label for="search1">search</label>
      <input name="search1" type="search" id="search1">
    </div>
    <div class="form-group">
      <label for="number1">number</label>
      <input name="number1" type="number" id="number1">
    </div>
    <div class="form-group">
      <label for="range1">range</label>
      <input name="range1" type="range" id="range1">
    </div>
    <div class="form-group">
      <label for="color1">color</label>
      <input name="color1" type="color" id="color1">
    </div>
    <div class="form-group">
      <label for="tel1">tel</label>
      <input name="tel1" type="tel" id="tel1">
    </div>
    <div class="form-group">
      <label for="url1">url</label>
      <input name="url1" type="url" id="url1">
    </div>
    <div class="form-group">
      <label for="email1">email</label>
      <input name="email1" type="email" id="email1">
    </div>
    <div class="form-group">
      <label for="date1">date</label>
      <input name="date1" type="date" id="date1">
    </div>
    <div class="form-group">
      <label for="time1">time</label>
      <input name="time1" type="time" id="time1">
    </div>
    <div class="form-group">
      <label for="month1">month</label>
      <input name="month1" type="month" id="month1">
    </div>
    <div class="form-group">
      <label for="week1">week</label>
      <input name="week1" type="week" id="week1">
    </div>
    <div class="form-group">
      <label for="datetime-local1">datetime-local</label>
      <input name="datetime-local1" type="datetime-local" id="datetime-local1">
    </div>
    <input type="submit" name="form1submit" value="form1submit">
  </form>

Inline formInline form


  <form class="form form-inline" action="#">
    <div class="form-group">
      <label for="text2">label 1</label>
      <input id="text2" type="text">
    </div>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <label for="text21">label 1.1</label>
        <input id="text21" type="text">
      </div>
      <div class="form-group">
        <input id="radio21" type="radio" name="radio">
        <label for="radio21">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="radio22" type="radio" name="radio">
        <label for="radio22">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="radio23" type="radio" name="radio">
        <label for="radio23">Choice 3</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <input id="checkbox21" type="checkbox" name="checkbox">
        <label for="checkbox21">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="checkbox22" type="checkbox" name="checkbox">
        <label for="checkbox22">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="checkbox23" type="checkbox" name="checkbox">
        <label for="checkbox23">Choice 3</label>
      </div>
    </fieldset>
    <div class="form-group">
      <label for="select2">select</label>
      <div class="form-select">
        <select id="select2">
          <optgroup label="group1">
            <option selected="selected">1.1</option>
            <option>1.2</option>
          </optgroup>
          <optgroup label="group1">
            <option>2.1</option>
            <option>2.2</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="textarea2">textarea</label>
      <textarea id="textarea2">tutu</textarea>
    </div>
    <input type="submit" name="form2submit" value="form2submit">
  </form>

Vertical formVertical form


  <form class="form form-vertical" action="#">
    <div class="form-group">
      <label for="text3">label 1</label>
      <input id="text3" type="text">
    </div>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <label for="text31">label 1.1</label>
        <input id="text31" type="text">
      </div>
      <div class="form-group">
        <input id="radio31" type="radio" name="radio">
        <label for="radio31">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="radio32" type="radio" name="radio">
        <label for="radio32">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="radio33" type="radio" name="radio">
        <label for="radio33">Choice 3</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <input id="checkbox31" type="checkbox" name="checkbox">
        <label for="checkbox31">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="checkbox32" type="checkbox" name="checkbox">
        <label for="checkbox32">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="checkbox33" type="checkbox" name="checkbox">
        <label for="checkbox33">Choice 3</label>
      </div>
    </fieldset>
    <div class="form-group">
      <label for="select3">select</label>
      <div class="form-select">
        <select id="select3">
          <optgroup label="group1">
            <option selected="selected">1.1</option>
            <option>1.2</option>
          </optgroup>
          <optgroup label="group2">
            <option>2.1</option>
            <option>2.2</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="textarea3">textarea</label>
      <textarea id="textarea3">tutu</textarea>
    </div>
    <input type="submit" name="form3submit" value="form3submit">
  </form>

Horizontal formHorizontal form


  <form class="form form-horizontal" action="#">
    <div class="form-group">
      <label for="text4">label 1</label>
      <input id="text4" type="text">
    </div>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <label for="text41">label 1.1</label>
        <input id="text41" type="text">
      </div>
      <div class="form-group">
        <input id="radio41" type="radio" name="radio">
        <label for="radio41">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="radio42" type="radio" name="radio">
        <label for="radio42">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="radio43" type="radio" name="radio">
        <label for="radio43">Choice 3</label>
      </div>
    </fieldset>
    <fieldset>
      <legend>legend</legend>
      <div class="form-group">
        <input id="checkbox41" type="checkbox" name="checkbox">
        <label for="checkbox41">Choice 1</label>
      </div>
      <div class="form-group">
        <input id="checkbox42" type="checkbox" name="checkbox">
        <label for="checkbox42">Choice 2</label>
      </div>
      <div class="form-group">
        <input id="checkbox43" type="checkbox" name="checkbox">
        <label for="checkbox43">Choice 3</label>
      </div>
    </fieldset>
    <div class="form-group">
      <label for="select4">select</label>
      <div class="form-select">
        <select id="select4">
          <optgroup label="group1">
            <option selected="selected">1.1</option>
            <option>1.2</option>
          </optgroup>
          <optgroup label="group2">
            <option>2.1</option>
            <option>2.2</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="textarea4">textarea</label>
      <textarea id="textarea4">tutu</textarea>
    </div>
    <input type="submit" name="form4submit" value="form4submit">
  </form>

Input groupInput group


  <form class="form" action="#">
    <div class="form-input-group">
      <label for="text501" class="visuallyhidden">Query</label>
      <div class="form-input">
        <input id="text501" type="text" placeholder="search">
      </div>
      <div class="form-input form-input-mini">
        <button class="themed search-submit" type="submit">
          <span class="icon icon-big icon-inline icon-magnifier" role="presentation" hidden="hidden"></span>
          <span class="visuallyhidden">Search</span>
        </button>
      </div>
    </div>
  </form>
  <form class="form" action="#">
    <div class="form-input-group">
      <label for="text511" class="visuallyhidden">label 1</label>
      <div class="form-input">
        <input id="text511" type="text" placeholder="lorem">
      </div>
      <div class="form-input">
        <input id="text512" type="text" placeholder="ipsum">
      </div>
      <label for="select51" class="visuallyhidden">label 3</label>
      <div class="form-select">
        <select id="select51">
          <optgroup label="group1">
            <option selected="selected">1.1</option>
            <option>1.2</option>
          </optgroup>
          <optgroup label="group2">
            <option>2.1</option>
            <option>2.2</option>
          </optgroup>
        </select>
      </div>
      <div class="form-input form-input-mini">
        <button>dolor</button>
      </div>
    </div>
  </form>

IconsIcons

The icon module makes it easy to illustrate various actions with an icon for easier comprehension.

Default iconsDefault icons

List of in-line icons
CSS class name (to append after `icon-`)	preview
home
arrow-head-top
arrow-head-right
arrow-head-bottom
arrow-head-left
arrow-top
arrow-right
arrow-bottom
arrow-left
arrow-top-left
arrow-top-right
arrow-bottom-right
arrow-bottom-left
arrow-stop-top
arrow-stop-right
arrow-stop-bottom
arrow-stop-left
arrow-line-top
arrow-line-right
arrow-line-bottom
arrow-line-left
arrow-forward
arrow-backward
refresh
out
plus
minus
checkmark
cross
pencil
lock-locked
lock-unlocked
cogwheel
admin
access
info
question
ok
stats
text
magnifier
user
user-profile
group
hierarchy
hierarchy2
print
bulb-off
bulb-on
link
map-pointer
target
share
share-facebook
share-twitter
share-linkedin
share-googleplus
mail
mailinglist
rss
time
message
podcast
download
upload
file
file-pdf
files
area
ruler
menu
more
important

Button iconsButton icons

List of button icons
CSS class name (to append after `icon-`)	Preview
home_button
arrow-head-top_button
arrow-head-right_button
arrow-head-bottom_button
arrow-head-left_button
arrow-top_button
arrow-right_button
arrow-bottom_button
arrow-left_button
arrow-top-left_button
arrow-top-right_button
arrow-bottom-right_button
arrow-bottom-left_button
arrow-stop-top_button
arrow-stop-right_button
arrow-stop-bottom_button
arrow-stop-left_button
arrow-line-top_button
arrow-line-right_button
arrow-line-bottom_button
arrow-line-left_button
arrow-forward_button
arrow-backward_button
refresh_button
out_button
plus_button
minus_button
checkmark_button
cross_button
pencil_button
lock-locked_button
lock-unlocked_button
cogwheel_button
admin_button
access_button
info_button
question_button
ok_button
stats_button
text_button
magnifier_button
user_button
user-profile_button
group_button
hierarchy_button
hierarchy2_button
print_button
bulb-off_button
bulb-on_button
link_button
map-pointer_button
target_button
share_button
share-facebook_button
share-twitter_button
share-linkedin_button
share-googleplus_button
mail_button
mailinglist_button
rss_button
time_button
message_button
podcast_button
download_button
upload_button
file_button
file-pdf_button
files_button
area_button
ruler_button
menu_button
more_button
important_button

Themed iconsThemed icons


  <span class="icon icon-arrow-head-top themed icon-big" role="presentation" hidden="hidden"></span>
  <span class="icon icon-arrow-head-top_button themed icon-big" role="presentation" hidden="hidden"></span>

Inline iconsInline icons

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu.


  <p>Mauris<span class="icon icon-inline icon-arrow-head-top" role="presentation" hidden="hidden"></span> iaculis<span class="icon icon-inline icon-arrow-head-right" role="presentation" hidden="hidden"></span> porttitor<span class="icon icon-inline icon-arrow-head-bottom" role="presentation" hidden="hidden"></span> posuere<span class="icon icon-inline icon-arrow-head-left" role="presentation" hidden="hidden"></span>. Praesent<span class="icon icon-inline icon-arrow-top" role="presentation" hidden="hidden"></span> id<span class="icon icon-inline icon-arrow-right" role="presentation" hidden="hidden"></span> metus<span class="icon icon-inline icon-arrow-bottom" role="presentation" hidden="hidden"></span> massa<span class="icon icon-inline icon-arrow-left" role="presentation" hidden="hidden"></span>, ut<span class="icon icon-inline icon-arrow-top-left" role="presentation" hidden="hidden"></span> blandit<span class="icon icon-inline icon-arrow-top-right" role="presentation" hidden="hidden"></span> odio<span class="icon icon-inline icon-arrow-bottom-right" role="presentation" hidden="hidden"></span>. Proin<span class="icon icon-inline icon-arrow-bottom-left" role="presentation" hidden="hidden"></span> quis<span class="icon icon-inline icon-arrow-stop-top" role="presentation" hidden="hidden"></span> tortor<span class="icon icon-inline icon-arrow-stop-right" role="presentation" hidden="hidden"></span> orci<span class="icon icon-inline icon-arrow-stop-bottom" role="presentation" hidden="hidden"></span>. Etiam<span class="icon icon-inline icon-arrow-stop-left" role="presentation" hidden="hidden"></span> at<span class="icon icon-inline icon-arrow-forward" role="presentation" hidden="hidden"></span> risus<span class="icon icon-inline icon-arrow-backward" role="presentation" hidden="hidden"></span> et<span class="icon icon-inline icon-refresh" role="presentation" hidden="hidden"></span> justo<span class="icon icon-inline icon-out" role="presentation" hidden="hidden"></span> dignissim<span class="icon icon-inline icon-plus" role="presentation" hidden="hidden"></span> congue<span class="icon icon-inline icon-minus" role="presentation" hidden="hidden"></span>. Donec<span class="icon icon-inline icon-checkmark" role="presentation" hidden="hidden"></span> congue<span class="icon icon-inline icon-cross" role="presentation" hidden="hidden"></span> lacinia<span class="icon icon-inline icon-pencil" role="presentation" hidden="hidden"></span> dui<span class="icon icon-inline icon-lock-locked" role="presentation" hidden="hidden"></span>, a<span class="icon icon-inline icon-lock-unlocked" role="presentation" hidden="hidden"></span> porttitor<span class="icon icon-inline icon-cogwheel" role="presentation" hidden="hidden"></span> lectus<span class="icon icon-inline icon-admin" role="presentation" hidden="hidden"></span> condimentum<span class="icon icon-inline icon-access" role="presentation" hidden="hidden"></span> laoreet<span class="icon icon-inline icon-info" role="presentation" hidden="hidden"></span>. Nunc<span class="icon icon-inline icon-question" role="presentation" hidden="hidden"></span> eu<span class="icon icon-inline icon-ok" role="presentation" hidden="hidden"></span> ullamcorper<span class="icon icon-inline icon-stats" role="presentation" hidden="hidden"></span> orci<span class="icon icon-inline icon-text" role="presentation" hidden="hidden"></span>. Quisque<span class="icon icon-inline icon-magnifier" role="presentation" hidden="hidden"></span> eget<span class="icon icon-inline icon-user" role="presentation" hidden="hidden"></span> odio<span class="icon icon-inline icon-user-profile" role="presentation" hidden="hidden"></span> ac<span class="icon icon-inline icon-group" role="presentation" hidden="hidden"></span> lectus<span class="icon icon-inline icon-hierarchy" role="presentation" hidden="hidden"></span> vestibulum<span class="icon icon-inline icon-hierarchy2" role="presentation" hidden="hidden"></span> faucibus<span class="icon icon-inline icon-print" role="presentation" hidden="hidden"></span> eget<span class="icon icon-inline icon-bulb-off" role="presentation" hidden="hidden"></span> in<span class="icon icon-inline icon-bulb-on" role="presentation" hidden="hidden"></span> metus<span class="icon icon-inline icon-link" role="presentation" hidden="hidden"></span>. In<span class="icon icon-inline icon-map-pointer" role="presentation" hidden="hidden"></span> pellentesque<span class="icon icon-inline icon-target" role="presentation" hidden="hidden"></span> faucibus<span class="icon icon-inline icon-share" role="presentation" hidden="hidden"></span> vestibulum<span class="icon icon-inline icon-mail" role="presentation" hidden="hidden"></span>. Nulla<span class="icon icon-inline icon-mailinglist" role="presentation" hidden="hidden"></span> at<span class="icon icon-inline icon-rss" role="presentation" hidden="hidden"></span> nulla<span class="icon icon-inline icon-time" role="presentation" hidden="hidden"></span> justo<span class="icon icon-inline icon-message" role="presentation" hidden="hidden"></span>, eget<span class="icon icon-inline icon-podcast" role="presentation" hidden="hidden"></span> luctus<span class="icon icon-inline icon-download" role="presentation" hidden="hidden"></span> tortor<span class="icon icon-inline icon-upload" role="presentation" hidden="hidden"></span>. Nulla<span class="icon icon-inline icon-file" role="presentation" hidden="hidden"></span> facilisi<span class="icon icon-inline icon-file-pdf" role="presentation" hidden="hidden"></span>. Duis<span class="icon icon-inline icon-files" role="presentation" hidden="hidden"></span> aliquet<span class="icon icon-inline icon-area" role="presentation" hidden="hidden"></span> egestas<span class="icon icon-inline icon-ruler" role="presentation" hidden="hidden"></span> purus<span class="icon icon-inline icon-menu" role="presentation" hidden="hidden"></span> in<span class="icon icon-inline icon-more" role="presentation" hidden="hidden"></span> blandit<span class="icon icon-inline icon-important" role="presentation" hidden="hidden"></span>. Curabitur<span class="icon icon-inline icon-home" role="presentation" hidden="hidden"></span> vulputate<span class="icon icon-inline icon-share-facebook" role="presentation" hidden="hidden"></span>, ligula<span class="icon icon-inline icon-share-twitter" role="presentation" hidden="hidden"></span> lacinia<span class="icon icon-inline icon-share-linkedin" role="presentation" hidden="hidden"></span> scelerisque<span class="icon icon-inline icon-share-googleplus" role="presentation" hidden="hidden"></span> tempor<span class="icon icon-inline icon-arrow-line-top" role="presentation" hidden="hidden"></span>, lacus<span class="icon icon-inline icon-arrow-line-right" role="presentation" hidden="hidden"></span> lacus<span class="icon icon-inline icon-arrow-line-bottom" role="presentation" hidden="hidden"></span> ornare<span class="icon icon-inline icon-arrow-line-left" role="presentation" hidden="hidden"></span> ante, ac egestas est urna sit amet arcu.</p>

Bigger iconsBigger icons

Use the .icon-big class.

Mauris iaculis porttitor posuere


  <p><span class="icon icon-arrow-head-top" role="presentation" hidden="hidden"></span><span class="icon icon-big icon-arrow-head-top" role="presentation" hidden="hidden"></span></p>
  <p>Mauris<span class="icon icon-inline icon-arrow-head-top" role="presentation" hidden="hidden"></span> iaculis<span class="icon icon-inline icon-big icon-arrow-head-top" role="presentation" hidden="hidden"></span> porttitor posuere</p>

ButtonsButtons

The btn module allows to create styled buttons. It is especially useful to convey information using colors and icons.

Default buttonsDefault buttons

Default Default Disabled
Default Default Disabled


  <a class="btn btn-inline" href="#"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Default</a>
  <a class="btn btn-inline themed" href="#"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Default <span class="icon icon-inline icon-lock-locked" role="presentation" hidden="hidden"></span></a>
  <a class="btn btn-inline btn-disabled" href="#" aria-disabled="true"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Disabled</a>
  <br>
  <a class="btn" href="#"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Default</a>
  <a class="btn themed" href="#"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Default <span class="icon icon-inline icon-lock-locked" role="presentation" hidden="hidden"></span></a>
  <a class="btn btn-disabled" href="#" aria-disabled="true"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Disabled</a>

Icon buttonsIcon buttons

label label


  <a class="btn btn-create btn-inline icon icon-plus_button" href="#" title="label"><span class="visuallyhidden">label</span></a>
  <a class="btn btn-update icon icon-plus" href="#" title="label"><span class="visuallyhidden">label</span></a>

OperationsOperations

Start Continue Abort More
Start Continue Abort More


  <a class="btn btn-inline btn-start" href="#"><span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>Start</a>
  <a class="btn btn-inline btn-continue" href="#"><span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>Continue</a>
  <a class="btn btn-inline btn-abort" href="#"><span class="icon icon-cross_button" role="presentation" hidden="hidden"></span>Abort</a>
  <a class="btn btn-inline btn-more" href="#"><span class="icon icon-cogwheel_button" role="presentation" hidden="hidden"></span>More</a>
  <br>
  <a class="btn btn-start" href="#"><span class="icon icon-arrow-head-right" role="presentation" hidden="hidden"></span>Start</a>
  <a class="btn btn-continue" href="#"><span class="icon icon-arrow-head-right" role="presentation" hidden="hidden"></span>Continue</a>
  <a class="btn btn-abort" href="#"><span class="icon icon-cross" role="presentation" hidden="hidden"></span>Abort</a>
  <a class="btn btn-more" href="#"><span class="icon icon-cogwheel" role="presentation" hidden="hidden"></span>More</a>

Data manipulationData manipulation

Add Edit Remove Options
Add Edit Remove Options


  <a class="btn btn-inline btn-create" href="#"><span class="icon icon-plus_button" role="presentation" hidden="hidden"></span>Add</a>
  <a class="btn btn-inline btn-update" href="#"><span class="icon icon-pencil_button" role="presentation" hidden="hidden"></span>Edit</a>
  <a class="btn btn-inline btn-delete" href="#"><span class="icon icon-minus_button" role="presentation" hidden="hidden"></span>Remove</a>
  <a class="btn btn-inline btn-neutral" href="#"><span class="icon icon-cogwheel_button" role="presentation" hidden="hidden"></span>Options</a>
  <br>
  <a class="btn btn-create" href="#"><span class="icon icon-plus" role="presentation" hidden="hidden"></span>Add</a>
  <a class="btn btn-update" href="#"><span class="icon icon-pencil" role="presentation" hidden="hidden"></span>Edit</a>
  <a class="btn btn-delete" href="#"><span class="icon icon-minus" role="presentation" hidden="hidden"></span>Remove</a>
  <a class="btn btn-neutral" href="#"><span class="icon icon-cogwheel" role="presentation" hidden="hidden"></span>Options</a>

Information notificationInformation notification

Success Info Warning Error Message
Success Info Warning Error Message


  <a class="btn btn-inline btn-success" href="#"><span class="icon icon-checkmark_button" role="presentation" hidden="hidden"></span>Success</a>
  <a class="btn btn-inline btn-info" href="#"><span class="icon icon-info_button" role="presentation" hidden="hidden"></span>Info</a>
  <a class="btn btn-inline btn-warning" href="#"><span class="icon icon-info_button" role="presentation" hidden="hidden"></span>Warning</a>
  <a class="btn btn-inline btn-error" href="#"><span class="icon icon-info_button" role="presentation" hidden="hidden"></span>Error</a>
  <a class="btn btn-inline btn-neutral" href="#"><span class="icon icon-message_button" role="presentation" hidden="hidden"></span>Message</a>
  <br>
  <a class="btn btn-success" href="#"><span class="icon icon-checkmark" role="presentation" hidden="hidden"></span>Success</a>
  <a class="btn btn-info" href="#"><span class="icon icon-info" role="presentation" hidden="hidden"></span>Info</a>
  <a class="btn btn-warning" href="#"><span class="icon icon-info" role="presentation" hidden="hidden"></span>Warning</a>
  <a class="btn btn-error" href="#"><span class="icon icon-info" role="presentation" hidden="hidden"></span>Error</a>
  <a class="btn btn-neutral" href="#"><span class="icon icon-message" role="presentation" hidden="hidden"></span>Message</a>

Long buttonsLong buttons

If you need buttons that span multiple lines, you can use the .btn-multiline-list class and the following markup:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.


  <div class="btn-multiline-list">
    <p>
      <a class="btn btn-inline">
        <span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.
      </a>
    </p>
    <p>
      <a class="btn btn-inline">
        <span class="icon icon-arrow-head-right_button" role="presentation" hidden="hidden"></span>
        Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
      </a>
    </p>
  </div>

Trigger buttonTrigger button

Requires the collapse and menu widgets

Toggle menu


  <div class="btn btn-trigger toggle-collapsed ui-collapse ui-toggle" data-widget="collapse" tabindex="0" role="button" aria-controls="toggle-pane-154" id="toggle-155" aria-expanded="false">
    <span>Toggle menu</span>
    <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-154" aria-expanded="false" aria-labelledby="toggle-155" role="menu">
      <li class="menu-item" role="menuitem" tabindex="0">item 1</li>
      <li class="menu-item" role="menuitem">item 2</li>
      <li class="menu-item" role="menuitem">item 3</li>
    </ul>
  </div>

Split buttonSplit button

Requires the collapse and menu widgets


  <div class="btn btn-split">
    <button>Toggle menu</button><span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-156" id="toggle-157" aria-expanded="false"></span>
    <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-156" aria-expanded="false" aria-labelledby="toggle-157" role="menu">
      <li class="menu-item" role="menuitem" tabindex="0">item 1</li>
      <li class="menu-item" role="menuitem">item 2</li>
      <li class="menu-item" role="menuitem">item 3</li>
    </ul>
  </div>

BadgesBadges

The badge module is meant to convey secondary information such as the category of a media item, a quantity associated with a list item, etc.

Default badgeDefault badge

label label
label label


  <span class="badge">label</span>
  <a class="badge themed" href="#">label</a>
  <br>
  <span class="badge badge-quiet">label</span>
  <a class="badge badge-quiet themed" href="#">label</a>

Information badgesInformation badges

Error Warning Success Info Neutral
Error Warning Success Info Neutral


  <span class="badge badge-error">Error</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-neutral">Neutral</span>
  <br>
  <span class="badge badge-quiet badge-error">Error</span>
  <span class="badge badge-quiet badge-warning">Warning</span>
  <span class="badge badge-quiet badge-success">Success</span>
  <span class="badge badge-quiet badge-info">Info</span>
  <span class="badge badge-quiet badge-neutral">Neutral</span>

Action badgesAction badges

Create Update Delete More
Create Update Delete More


  <span class="badge badge-create">Create</span>
  <span class="badge badge-update">Update</span>
  <span class="badge badge-delete">Delete</span>
  <span class="badge badge-more">More</span>
  <br>
  <span class="badge badge-quiet badge-create">Create</span>
  <span class="badge badge-quiet badge-update">Update</span>
  <span class="badge badge-quiet badge-delete">Delete</span>
  <span class="badge badge-quiet badge-more">More</span>

MessagesMessages

The msg module allows to show a message to the user, give feedback on an operation, etc.

The message module structureThe message module structure

msg: the message wrapper
msg-content: the actual content for the panel

Various message typesVarious message types

Neutral

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.

Error

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.

Warning

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

Success

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.

Info

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis.


  <div class="msg msg-neutral">
    <p class="msg-title">Neutral</p>
    <p class="msg-content">Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.</p>
  </div>
  <div class="msg msg-error">
    <p class="msg-title">Error</p>
    <p class="msg-content">Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.</p>
  </div>
  <div class="msg msg-warning">
    <p class="msg-title">Warning</p>
    <p class="msg-content">Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.</p>
  </div>
  <div class="msg msg-success">
    <p class="msg-title">Success</p>
    <p class="msg-content">Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus.</p>
  </div>
  <div class="msg msg-info">
    <p class="msg-title">Info</p>
    <p class="msg-content">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis.</p>
  </div>

The nav module allows to create various styles of navigation.

nav: the navigation wrapper
nav-list: the list grouping items having the same depth in the navigation
nav-item: the individual items in the navigation
nav-link: the link inside each nav-item

To get an in-line navigation just add the nav-inline class.


  <nav class="nav nav-inline">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

To get a horizontal navigation just add the nav-horizontal class.


  <nav class="nav nav-horizontal">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

To get a vertical navigation just add the nav-vertical class.


  <nav class="nav nav-vertical">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

Pagination navigationPagination navigation

Use the nav-pagination class on the nav element:


  <nav class="nav nav-pagination" aria-label="Pagination" aria-describedby="pagination-details-2">
    <span class="secondary-content right" id="pagination-details-2">
      <span class="visuallyhidden">Results </span>
      <span>131</span>
      <span role="presentation">–</span><span class="visuallyhidden"> to </span>
      <span>140</span>
      <span role="presentation">/</span><span class="visuallyhidden">out of</span>
      <span>995 results</span>
    </span>
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>1</a>
      </li>
      <li class="nav-item">…</li>
      <li class="nav-item">
        <a class="nav-link" href="#" rel="prev"><span class="visuallyhidden">Previous: </span><span class="visuallyhidden">Page </span>12</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#"><span class="visuallyhidden">Currently on: </span><span class="visuallyhidden">Page </span>13</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" rel="next"><span class="visuallyhidden">Next: </span><span class="visuallyhidden">Page </span>14</a>
      </li>
      <li class="nav-item" rel="next">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>15</a>
      </li>
      <li class="nav-item">…</li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>99</a>
      </li>
    </ul>
  </nav>

For a horizontal block navigation, just add nav-block to a horizontal navigation, like this:


  <nav class="nav nav-block nav-horizontal">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

For a vertical block navigation, just add nav-block to a vertical navigation, like this:


  <nav class="nav nav-block nav-vertical">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

Just add the themed class to the horizontal nav element:


  <nav class="nav nav-block nav-horizontal themed">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

Just add the themed class to the vertical nav element:


  <nav class="nav nav-block nav-vertical themed">
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
    </ul>
  </nav>

PanelsPanels

The panel module creates content blocks that stand out of the rest of the content, allowing to highlight important information.

The panel module structureThe panel module structure

panel: the panel wrapper
panel-header: the panel header
panel-content: the actual content for the panel
panel-footer: the panel footer

Default panelsDefault panels

Class Aptent Taciti Sociosqu Ad Litora TorquentClass Aptent Taciti Sociosqu Ad Litora Torquent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed.


  <section class="panel">
    <h3 class="panel-header heading" id="class-aptent-taciti-sociosqu-ad-litora-torquent">Class Aptent Taciti Sociosqu Ad Litora Torquent<a href="#class-aptent-taciti-sociosqu-ad-litora-torquent" class="heading-anchor" rel="bookmark"><span class="visuallyhidden">Class Aptent Taciti Sociosqu Ad Litora Torquent</span></a></h3>
    <div class="panel-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed.</p>
    </div>
  </section>

Themed panelsThemed panels

Class Aptent Taciti Sociosqu Ad Litora TorquentClass Aptent Taciti Sociosqu Ad Litora Torquent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed.


  <section class="panel themed">
    <h3 class="panel-header heading">Class Aptent Taciti Sociosqu Ad Litora Torquent<a href="#" class="heading-anchor" rel="bookmark"><span class="visuallyhidden">Class Aptent Taciti Sociosqu Ad Litora Torquent</span></a></h3>
    <div class="panel-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed.</p>
    </div>
  </section>

Cell panelsCell panels

You can also add panels inside cells using the panel-cellclass and mix them with the background color classes to create content mosaics:

Panel 1

Panel 2

Panel 3

Panel 4

Panel 5

Panel 6

Panel 7

Panel 8


  <div class="g-row">
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell neutral-bg-color1">
        <span class="panel-header">Panel 1</span>
      </div>
    </div>
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell neutral-bg-color2">
        <span class="panel-header">Panel 2</span>
      </div>
    </div>
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell neutral-bg-color3">
        <span class="panel-header">Panel 3</span>
      </div>
    </div>
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell neutral-bg-color4">
        <span class="panel-header">Panel 4</span>
      </div>
    </div>
  </div>
  <div class="g-row">
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell local-bg-color1">
        <span class="panel-header">Panel 5</span>
      </div>
    </div>
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell local-bg-color2">
        <span class="panel-header">Panel 6</span>
      </div>
    </div>
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell local-bg-color3">
        <span class="panel-header">Panel 7</span>
      </div>
    </div>
    <div class="g-span-col3 g-span-row1">
      <div class="panel panel-cell local-bg-color4">
        <span class="panel-header">Panel 8</span>
      </div>
    </div>
  </div>

Panel buttonsPanel buttons

Link title


  <div class="g-row">
    <div class="g-span-1_4">
        <div class="panel panel-button local-bg-color4">
            <div class="panel-header">
                <a href="#"><span class="embed-responsive embed-responsive-3by2"><img alt="…" src="http://lorempixel.com/600/400/abstract/1"></span></a>
            </div>
            <div class="panel-content">
                <a href="#">Link title</a>
            </div>
        </div>
    </div>
    <div class="g-span-1_4">
        <div class="panel panel-button local-bg-color1">
            <div class="panel-header">
                <a href="#"><span class="embed-responsive embed-responsive-3by2"><img alt="…" src="http://lorempixel.com/600/400/abstract/2"></span></a>
            </div>
            <div class="panel-content">
                <a href="#">Link title</a>
            </div>
        </div>
    </div>
    <div class="g-span-1_4">
        <div class="panel panel-button local-bg-color2">
            <div class="panel-header">
                <a href="#"><span class="embed-responsive embed-responsive-3by2"><img alt="…" src="http://lorempixel.com/600/400/abstract/3"></span></a>
            </div>
            <div class="panel-content">
                <a href="#">Link title</a>
            </div>
        </div>
    </div>
    <div class="g-span-1_4">
        <div class="panel panel-button local-bg-color3">
            <div class="panel-header">
              <a href="#"><span class="embed-responsive embed-responsive-3by2"></span></a>
            </div>
            <div class="panel-content">
                <a href="#">Link title</a>
            </div>
        </div>
    </div>
  </div>

MediaMedia

The media module is meant to present structured data to the user in the form of a list.

It is usually recommended to annotate the structured data with relevant semantic information to optimize search engine indexing. Schema.org provides a list of possible data types that can be used, and we have various examples for Courses, Events, News articles, Persons and Publications.

The media module structureThe media module structure

media-list: a wrapper for media elements displayed as a list (optional)
media: the media element wrapper
media-visual: a visual representation for the media element
media-banner: a banner to put over the visual
media-header: the media header
- media-header-full: disables auto-truncating of the header
media-content: the media content
media-info: secondary information for the media element
- media-info-quiet: a more lightweight version of the media info
media-footer: the media footer

Media listMedia list

Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis —

In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.

Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui —

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas —

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"


  <div class="media-list">
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_4">
          <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image" class="media-visual">
        </div>
        <div class="g-span-3_4">
          <span class="badge">Tag1</span>
          <h2 class="media-header"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
          <div class="media-content">
            <span class="media-info">Nulla Facilisi. Duis — </span>
            <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.</p>
          </div>
        </div>
      </div>
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-footer">
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
          </div>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_4">
          <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image" class="media-visual">
        </div>
        <div class="g-span-3_4">
          <span class="badge">Tag2</span>
          <h2 class="media-header">Class Aptent Taciti Sociosqu Ad</h2>
          <div class="media-content">
            <span class="media-info">Nullam In Dui — </span>
            <p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.</p>
          </div>
        </div>
      </div>
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-footer">
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
          </div>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_4">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
            <span class="media-banner badge badge-error">Special</span>
          </div>
        </div>
        <div class="g-span-3_4">
          <span class="badge">Tag3</span>
          <h2 class="media-header">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
          <div class="media-content">
            <span class="media-info">Duis Aliquet Egestas — </span>
            <p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p>
          </div>
        </div>
      </div>
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-footer">
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Note that you can add the .media-header-expandable class to the header in a list in order to have the full title display when the mouse is hovering on it (instead of only seeing the truncated version).

You can also use .media-list-bordered to wrap the list with a top and bottom border.

Media list (auto-truncated)Media list (auto-truncated)

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis —

Class Aptent Taciti Sociosqu Ad

Nullam In Dui —

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas —


  <div class="media-list">
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_4">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">Nulla Facilisi. Duis — </span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.</p></div>
        </div>
      </div>
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-footer">
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
          </div>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_4">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header">Class Aptent Taciti Sociosqu Ad</h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">Nullam In Dui — </span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.</p></div>
        </div>
      </div>
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-footer">
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
          </div>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_4">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
            <span class="media-banner badge badge-error">Special</span>
          </div>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">Duis Aliquet Egestas — </span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-footer">
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
            <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Minimal listMinimal list

Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis

Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui

Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas


  <div class="media-list g-span-1_2">
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_3">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image" class="media-visual">
          </div>
        </div>
        <div class="g-span-2_3">
          <span class="badge">Tag1</span>
          <h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
          <div class="media-content">
            <span class="media-info media-info-quiet">Nulla Facilisi. Duis</span>
          </div>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_3">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image" class="media-visual">
          </div>
        </div>
        <div class="g-span-2_3">
          <span class="badge">Tag2</span>
          <h2 class="media-header media-header-full">Class Aptent Taciti Sociosqu Ad</h2>
          <div class="media-content">
            <span class="media-info media-info-quiet">Nullam In Dui</span>
          </div>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="g-row">
        <div class="g-span-1_3">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
            <span class="media-banner badge badge-error">Special</span>
          </div>
        </div>
        <div class="g-span-2_3">
          <span class="badge">Tag3</span>
          <h2 class="media-header media-header-full">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
          <div class="media-content">
            <span class="media-info media-info-quiet">Duis Aliquet Egestas</span>
          </div>
        </div>
      </div>
    </div>
  </div>

Media gridMedia grid

Tag1

Nulla Facilisi. Duis Aliquet

Nulla Facilisi. Duis

Tag2

Class Aptent Taciti Sociosqu Ad

Nullam In Dui

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.

Tag3

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus

Duis Aliquet Egestas


  <div class="g-row">
    <div class="g-span-1_3">
      <div class="media">
        <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image" class="media-visual">
        <span class="badge">Tag1</span>
        <h2 class="media-header"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
        <div class="media-content">
          <span class="media-info">Nulla Facilisi. Duis</span>
          <p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec.</p>
        </div>
        <div class="media-footer">
          <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
          <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
        </div>
      </div>
    </div>
    <div class="g-span-1_3">
      <div class="media">
        <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image" class="media-visual">
        <span class="badge">Tag2</span>
        <h2 class="media-header">Class Aptent Taciti Sociosqu Ad</h2>
        <div class="media-content">
          <span class="media-info">Nullam In Dui</span>
          <p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in.</p>
        </div>
        <div class="media-footer">
          <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
          <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
        </div>
      </div>
    </div>
    <div class="g-span-1_3">
      <div class="media">
        <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image" class="media-visual">
        <span class="badge">Tag3</span>
        <h2 class="media-header">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus</h2>
        <div class="media-content">
          <span class="media-info">Duis Aliquet Egestas</span>
          <p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p>
        </div>
        <div class="media-footer">
          <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 1</a>
          <a href="#" class="btn btn-inline"><span class="icon icon-arrow-right_button" role="presentation" hidden="hidden"></span>Link 2</a>
        </div>
      </div>
    </div>
  </div>

A media list with the first element emphasizedA media list with the first element emphasized

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003


  <div class="media-list media-list-jumbo">
    <div class="media g-span-1_2">
      <div class="g-row">
        <div class="g-span-1_1">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-1_1">
          <h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2">
      <div class="g-row">
        <div class="g-span-1_2">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full"><a href="#">Class Aptent Taciti Sociosqu Ad</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2">
      <div class="g-row">
        <div class="g-span-1_2">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
            <span class="media-banner badge badge-error">Special</span>
          </div>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full"><a href="#">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2">
      <div class="g-row">
        <div class="g-span-1_2">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2">
      <div class="g-row">
        <div class="g-span-1_2">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full">Class Aptent Taciti Sociosqu Ad</h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2">
      <div class="g-row">
        <div class="g-span-1_2">
          <div class="media-visual">
            <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
            <span class="media-banner badge badge-error">Special</span>
          </div>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
        </div>
      </div>
    </div>
  </div>

Or on a single column:

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003

Nulla Facilisi. Duis Aliquet

01.01.2001

Class Aptent Taciti Sociosqu Ad

02.02.2002

Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor

03.03.2003


  <div class="g-span-1_2">
    <div class="media-list media-list-jumbo">
      <div class="media">
        <div class="g-row">
          <div class="g-span-1_1">
            <div class="media-visual">
              <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
            </div>
          </div>
          <div class="g-span-1_1">
            <h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
          </div>
        </div>
      </div>
      <div class="media">
        <div class="g-row">
          <div class="g-span-1_2">
            <div class="media-visual">
              <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
            </div>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full"><a href="#">Class Aptent Taciti Sociosqu Ad</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
          </div>
        </div>
      </div>
      <div class="media">
        <div class="g-row">
          <div class="g-span-1_2">
            <div class="media-visual">
              <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
              <span class="media-banner badge badge-error">Special</span>
            </div>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full"><a href="#">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
          </div>
        </div>
      </div>
      <div class="media">
        <div class="g-row">
          <div class="g-span-1_2">
            <div class="media-visual">
              <img src="//lorempixel.com/160/90/abstract/1/" alt="Abstract image">
            </div>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full"><a href="#">Nulla Facilisi. Duis Aliquet</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">01.01.2001</span><p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
          </div>
        </div>
      </div>
      <div class="media">
        <div class="g-row">
          <div class="g-span-1_2">
            <div class="media-visual">
              <img src="//lorempixel.com/160/90/abstract/2/" alt="Abstract image">
            </div>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full">Class Aptent Taciti Sociosqu Ad</h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">02.02.2002</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
          </div>
        </div>
      </div>
      <div class="media">
        <div class="g-row">
          <div class="g-span-1_2">
            <div class="media-visual">
              <img src="//lorempixel.com/160/90/abstract/3/" alt="Abstract image">
              <span class="media-banner badge badge-error">Special</span>
            </div>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full">Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor</h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info">03.03.2003</span><p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora. <a class="more" href="?more" title="Read more"><span class="visuallyhidden">Read more about "Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus"</span></a></p></div>
          </div>
        </div>
      </div>
    </div>
  </div>

Responsive EmbedsResponsive Embeds

This module allows embedding external content by keeping its aspect ratio while resizing.
Just use the .embed-responsive class, and nest a <iframe>, <video>, <object> or <embed>.
You can also nest a .embed-responsive-item class for other types of elements.

For example, to force a 16:9 aspect ratio, use the .embed-responsive-16by9 class.


  <div class="embed-responsive embed-responsive-16by9">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/AziqdC3QBMI" allowfullscreen=""></iframe>
  </div>

All supported aspect ratiosAll supported aspect ratios

1:1: embed-responsive-1by1
16:9 (1.77:1): embed-responsive-16by9
3:2 (1.50:1): embed-responsive-3by2 and embed-responsive-2by3
4:3 (1.33:1): embed-responsive-4by3 and embed-responsive-3by4
5:4 (1.25:1): embed-responsive-5by4 and embed-responsive-4by5

CollapseCollapse

The collapse widget allows to collapse/expand (hide/show) portions of information when the user clicks on its trigger.

Collapse overviewCollapse overview

trigger: the collapse trigger, specified as:
- element with data-widget="collapse"
panel: the panel that will be collapsed/expanded, specified as one of:
- the aria-controls attribute with a space-separated list of element ids to toggle
- using data-target option, specified as a jQuery selector relative to the widget, or its parent
- using href attribute, specified as an id reference starting with #
- the second child element of the toggle
- the element that follows the toggle

data-event: what event to respond to (click by default)
data-overlay: whether to show the panel as an overlay
aria-expanded: whether to expand the panel by default (true or false, false by default)

beforeToggle: triggered on the trigger and the panel elements before the toggle happens
afterToggle: triggered on the trigger and the panel elements after the toggle happens

Both events have the following parameters:

toggle: a reference to the trigger element
targets: a reference to the panel elements
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

Default collapseDefault collapse

Only label will toggle

Toggle


  <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-158" id="toggle-159" aria-expanded="false">Toggle</span>
  <p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-158" aria-expanded="false" aria-labelledby="toggle-159">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>


  <span data-widget="collapse"><!-- toggle label --></span>
  <div><!-- panel content --></div>

Collapse with custom targetsCollapse with custom targets

Collapse the contentCollapse the content

Click anywhere inside element to toggle

Toggle


  <div data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-160" id="toggle-161" aria-expanded="false">
    <span>Toggle</span>
    <p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-160" aria-expanded="false" aria-labelledby="toggle-161">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>
  </div>


  <div data-widget="collapse">
    <span><!-- toggle label --></span>
    <div><!-- panel content --></div>
  </div>

Collapse the link targetCollapse the link target

Toggle

will not be toggled


  <a href="#my-id" data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="my-id" id="toggle-162" aria-expanded="false">Toggle</a>
  <p>will not be toggled</p>
  <p id="my-id" class="toggle-collapsed" aria-hidden="true" aria-expanded="false" aria-labelledby="toggle-162">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>


  <a href="#myId" data-widget="collapse"><!-- toggle label --></span>
  <div id="myId"><!-- panel content --></div>

Collapse targets specified in the target optionCollapse targets specified in the target option

Toggle

will not be toggled

Toggle

will not be toggled


  <div data-widget="collapse" data-target=".targets1" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-163 toggle-pane-164" id="toggle-165" aria-expanded="false">
    <span>Toggle</span>
    <p>will not be toggled</p>
    <p class="targets1 toggle-collapsed" aria-hidden="true" id="toggle-pane-163" aria-expanded="false" aria-labelledby="toggle-165">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>
    <p>will not be toggled</p>
    <p class="targets1 toggle-collapsed" aria-hidden="true" id="toggle-pane-164" aria-expanded="false" aria-labelledby="toggle-165">Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.</p>
  </div>
  <span data-widget="collapse" data-target=".targets2" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-166 toggle-pane-167" id="toggle-168" aria-expanded="false">Toggle</span>
  <p>will not be toggled</p>
  <p class="targets2 toggle-collapsed" aria-hidden="true" id="toggle-pane-166" aria-expanded="false" aria-labelledby="toggle-168">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>
  <p>will not be toggled</p>
  <p class="targets2 toggle-collapsed" aria-hidden="true" id="toggle-pane-167" aria-expanded="false" aria-labelledby="toggle-168">Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.</p>


  <span data-widget="collapse" data-target=".myClass"><!-- toggle label --></span>
  <div class="myClass"><!-- panel content --></div>

Collapse targets specified in the controls optionCollapse targets specified in the controls option

Toggle

will not be toggled


  <span data-widget="collapse" aria-controls="id1 id2" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" id="toggle-169" aria-expanded="false">Toggle</span>
  <p id="id1" class="toggle-collapsed" aria-hidden="true" aria-expanded="false" aria-labelledby="toggle-169">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>
  <p>will not be toggled</p>
  <p id="id2" class="toggle-collapsed" aria-hidden="true" aria-expanded="false" aria-labelledby="toggle-169">Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.</p>


  <span data-widget="collapse" aria-controls="myId"><!-- toggle label --></span>
  <div id="myId"><!-- panel content --></div>

Collapse with overlayCollapse with overlay

It is also possible to have the toggled panel displayed as an overlay by adding the data-overlay="true" attribute:

Toggle


  <span data-widget="collapse" data-overlay="true" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-170" id="toggle-171" aria-expanded="false">Toggle</span>
  <p class="toggle-collapsed ui-overlay" aria-hidden="true" id="toggle-pane-170" aria-expanded="false" aria-labelledby="toggle-171">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>


  <span data-widget="collapse" data-overlay="true"><!-- toggle label --></span>
  <div><!-- panel content --></div>

Collapse on mouseenter/mouseleaveCollapse on mouseenter/mouseleave

It is also possible to have the collapse reacting on other events, like mouseeneter mouseleave for instance:

Toggle


  <div data-widget="collapse" data-event="mouseenter mouseleave" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-172" id="toggle-173" aria-expanded="false">
    <span>Toggle</span>
    <p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-172" aria-expanded="false" aria-labelledby="toggle-173">Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante.</p>
  </div>


  <div data-widget="collapse" data-event="mouseenter mouseleave">
    <span><!-- toggle label --></span>
    <p><!-- panel content --></p>
  </div>

The tooltip widget allows showing an information popup when the mouse is moved over its trigger.

trigger: the tooltip trigger, specified as:
- element with data-widget="tooltip"
tooltip: the tooltip content, specified as one of:
- an aria-describedby attribute with a space-separated list of element ids to toggle
- using the content of the data-tooltip option
- using data-target option, specified as a jQuery selector relative to the widget, or its parent
- using href attribute, specified as an id reference starting with #
- the second child element of the toggle
- the element that follows the toggle

data-event: what event to respond to (mouseenter mouseleave by default)
data-overlay: whether to show the tooltip as an overlay

beforeToggle: triggered on the trigger and the tooltip elements before the toggle happens
afterToggle: triggered on the trigger and the tooltip elements after the toggle happens

Both events have the following parameters:

toggle: a reference to the trigger element
targets: a reference to the tooltip elements
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle


  <span data-widget="tooltip" tabindex="0" role="button" aria-controls="toggle-pane-9" aria-describedby="toggle-pane-9" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden" aria-hidden="true" id="toggle-pane-9" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


  <!-- trigger element -->
  <span data-widget="tooltip"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>

Using the data-event option, and specifying a valid jQuery event.


  <span data-widget="tooltip" data-event="click" tabindex="0" role="button" aria-controls="toggle-pane-10" aria-describedby="toggle-pane-10" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden" aria-hidden="true" id="toggle-pane-10" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-event="click"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>


  <span data-widget="tooltip" data-event="dblclick" tabindex="0" role="button" aria-controls="toggle-pane-11" aria-describedby="toggle-pane-11" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden" aria-hidden="true" id="toggle-pane-11" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-event="dblclick"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>

Via aria-describedby with a list of target idsVia aria-describedby with a list of target ids


  <span data-widget="tooltip" aria-describedby="tooltip1" tabindex="0" role="button" aria-controls="tooltip1" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div id="tooltip1" class="hidden" aria-hidden="true" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


  <!-- trigger element -->
  <span data-widget="tooltip" aria-describedby="myId"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div id="myId"><!-- tooltip content --></div>


  <span data-widget="tooltip" data-tooltip="Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit." tabindex="0" role="button" aria-controls="toggle-pane-12" aria-describedby="toggle-pane-12" class="ui-tooltip ui-toggle">Show tooltip</span><span class="hidden" aria-hidden="true" id="toggle-pane-12" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</span>


  <!-- trigger element -->
  <span data-widget="tooltip" data-tooltip="tooltip content"><!-- trigger label --></span>

Via data-target with a css selector to the targets (relative to parent)Via data-target with a css selector to the targets (relative to parent)


  <div>
    <span data-widget="tooltip" data-target=".awesome-panels" tabindex="0" role="button" aria-controls="toggle-pane-13 toggle-pane-14" aria-describedby="toggle-pane-13" class="ui-tooltip ui-toggle">Show tooltip</span>
    <div class="awesome-panels hidden" aria-hidden="true" id="toggle-pane-13" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>
    <div class="awesome-panels hidden" aria-hidden="true" id="toggle-pane-14" role="tooltip">Nulla At Nulla Justo, Eget Luctus Tortor. Nulla Facilisi.</div>
  </div>
  <div class="awesome-panels">Will not be toggled.</div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-target=".myClass"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div class="myClass"><!-- tooltip content --></div>

Via href with reference to element id (single target only)Via href with reference to element id (single target only)


  <a href="#tooltip3" data-widget="tooltip" tabindex="0" role="button" aria-controls="tooltip3" aria-describedby="tooltip3" class="ui-tooltip ui-toggle">Show tooltip</a>
  <div class="awesome-panels">Will not be toggled.</div>
  <div id="tooltip3" class="hidden" aria-hidden="true" role="tooltip">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


  <!-- trigger element -->
  <a href="#myId" data-widget="tooltip"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div id="myId"><!-- tooltip content --></div>


  <span data-widget="tooltip" data-overlay="true" tabindex="0" role="button" aria-controls="toggle-pane-15" aria-describedby="toggle-pane-15" class="ui-tooltip ui-toggle">Show tooltip</span>
  <div class="hidden ui-overlay" aria-hidden="true" id="toggle-pane-15" role="tooltip" style="z-index: initial;">Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit.</div>


  <!-- trigger element -->
  <span data-widget="tooltip" data-overlay="true"><!-- trigger label --></span>
  <!-- tooltip element -->
  <div><!-- tooltip content --></div>

The menu, menubar and toolbar widgets provide various menu types.

menu: the menu element, specified as:
- element with data-widget="menu"
menuitem: the items of the menu, specified as one of:
- elements with role="menuitem"
- using the data-items option, specified as a jQuery selector relative to the widget
- the children elements of the widget

Toggle menu


  <span data-widget="toggle" tabindex="0" class="toggle-hidden ui-toggle" role="button" aria-controls="toggle-pane-0">Toggle menu</span>
  <ul class="menu toggle-hidden ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-0" role="menu">
    <li class="menu-item" role="menuitem" tabindex="0">item 1</li>
    <li class="menu-item" role="menuitem">item 2</li>
    <li class="menu-item" role="menuitem">item 3</li>
  </ul>

Toggle menu


  <span data-widget="toggle" tabindex="0" class="toggle-hidden ui-toggle" role="button" aria-controls="toggle-pane-1">Toggle menu</span>
  <ul class="menu toggle-hidden ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-1" role="menu">
    <li class="menu-item" role="menuitem" aria-haspopup="true" tabindex="0">
      <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-174" id="toggle-175" aria-expanded="false">item 1</span>
      <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-174" aria-expanded="false" aria-labelledby="toggle-175" role="menu"><span class="menu-item menu-item-back" data-role="back">item 1</span>
        <li class="menu-item" role="menuitem" aria-haspopup="true" tabindex="0">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-176" id="toggle-177" aria-expanded="false">item 1.1</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-176" aria-expanded="false" aria-labelledby="toggle-177" role="menu"><span class="menu-item menu-item-back" data-role="back">item 1.1</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 1.1.1</li>
            <li class="menu-item" role="menuitem">item 1.1.2</li>
            <li class="menu-item" role="menuitem">item 1.1.3</li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem" aria-haspopup="true">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-178" id="toggle-179" aria-expanded="false">item 1.2</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-178" aria-expanded="false" aria-labelledby="toggle-179" role="menu"><span class="menu-item menu-item-back" data-role="back">item 1.2</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 1.2.1</li>
            <li class="menu-item" role="menuitem">item 1.2.2</li>
            <li class="menu-item" role="menuitem">item 1.2.3</li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem" aria-haspopup="true">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-180" id="toggle-181" aria-expanded="false">item 1.3</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-180" aria-expanded="false" aria-labelledby="toggle-181" role="menu"><span class="menu-item menu-item-back" data-role="back">item 1.3</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 1.3.1</li>
            <li class="menu-item" role="menuitem">item 1.3.2</li>
            <li class="menu-item" role="menuitem">item 1.3.3</li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu-item" role="menuitem" aria-haspopup="true">
      <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-182" id="toggle-183" aria-expanded="false">item 2</span>
      <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-182" aria-expanded="false" aria-labelledby="toggle-183" role="menu"><span class="menu-item menu-item-back" data-role="back">item 2</span>
        <li class="menu-item" role="menuitem" aria-haspopup="true" tabindex="0">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-184" id="toggle-185" aria-expanded="false">item 2.1</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-184" aria-expanded="false" aria-labelledby="toggle-185" role="menu"><span class="menu-item menu-item-back" data-role="back">item 2.1</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 2.1.1</li>
            <li class="menu-item" role="menuitem">item 2.1.2</li>
            <li class="menu-item" role="menuitem">item 2.1.3</li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem" aria-haspopup="true">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-186" id="toggle-187" aria-expanded="false">item 2.2</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-186" aria-expanded="false" aria-labelledby="toggle-187" role="menu"><span class="menu-item menu-item-back" data-role="back">item 2.2</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 2.2.1</li>
            <li class="menu-item" role="menuitem">item 2.2.2</li>
            <li class="menu-item" role="menuitem">item 2.2.3</li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem" aria-haspopup="true">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-188" id="toggle-189" aria-expanded="false">item 2.3</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-188" aria-expanded="false" aria-labelledby="toggle-189" role="menu"><span class="menu-item menu-item-back" data-role="back">item 2.3</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 2.3.1</li>
            <li class="menu-item" role="menuitem">item 2.3.2</li>
            <li class="menu-item" role="menuitem">item 2.3.3</li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu-item" role="menuitem" aria-haspopup="true">
      <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-190" id="toggle-191" aria-expanded="false">item 3</span>
      <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-190" aria-expanded="false" aria-labelledby="toggle-191" role="menu"><span class="menu-item menu-item-back" data-role="back">item 3</span>
        <li class="menu-item" role="menuitem" aria-haspopup="true" tabindex="0">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-192" id="toggle-193" aria-expanded="false">item 3.1</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-192" aria-expanded="false" aria-labelledby="toggle-193" role="menu"><span class="menu-item menu-item-back" data-role="back">item 3.1</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 3.1.1</li>
            <li class="menu-item" role="menuitem">item 3.1.2</li>
            <li class="menu-item" role="menuitem">item 3.1.3</li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem" aria-haspopup="true">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-194" id="toggle-195" aria-expanded="false">item 3.2</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-194" aria-expanded="false" aria-labelledby="toggle-195" role="menu"><span class="menu-item menu-item-back" data-role="back">item 3.2</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 3.2.1</li>
            <li class="menu-item" role="menuitem">item 3.2.2</li>
            <li class="menu-item" role="menuitem">item 3.2.3</li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem" aria-haspopup="true">
          <span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-196" id="toggle-197" aria-expanded="false">item 3.3</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-196" aria-expanded="false" aria-labelledby="toggle-197" role="menu"><span class="menu-item menu-item-back" data-role="back">item 3.3</span>
            <li class="menu-item" role="menuitem" tabindex="0">item 3.3.1</li>
            <li class="menu-item" role="menuitem">item 3.3.2</li>
            <li class="menu-item" role="menuitem">item 3.3.3</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

menu: the menu element, specified as:
- element with data-widget="toolbar"
group: the item groups of the menu, specified as one of:
- elements with role="group"
- using the data-groups option, specified as a jQuery selector relative to the widget
toolbar item: the items of the menu, specified as one of:
- using the data-items option, specified as a jQuery selector relative to the widget
- the children elements of the groups if any
- the children elements of the widget


  <div class="toolbar ui-toolbar" data-widget="toolbar" role="toolbar" aria-labelledby="toolbar-label-288">
    <span data-role="label" class="toolbar-label" role="presentation" id="toolbar-label-288">Toolbar 1</span>
    <div class="toolbar-group" role="group">
      <button class="toolbar-item" tabindex="0">1</button>
      <div class="toolbar-item toggle-collapsed ui-collapse ui-toggle" data-widget="collapse" tabindex="0" role="button" aria-controls="toggle-pane-198" id="toggle-199" aria-expanded="false" aria-haspopup="true">
        <span>dropdown</span>
        <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-198" aria-expanded="false" aria-labelledby="toggle-199" role="menu">
          <li class="menu-item" role="menuitem" tabindex="0">1</li>
          <li class="menu-item" role="menuitem">2</li>
          <li class="menu-item" role="menuitem">3</li>
        </ul>
      </div>
      <button class="toolbar-item">3</button>
    </div>
    <div class="toolbar-group" role="group">
      <a class="toolbar-item toolbar-item-active" role="button" tabindex="-1">1 (active)</a>
      <a class="toolbar-item toolbar-item-disabled" aria-disabled="true" role="button" tabindex="-1">2 (disabled)</a>
      <a class="toolbar-item" role="button" tabindex="-1">3</a>
    </div>
    <div class="toolbar-group" role="group">
      <button class="toolbar-item">1</button>
      <button class="toolbar-item">2</button>
      <button class="toolbar-item">3</button>
    </div>
  </div>

menu: the menu element, specified as:
- element with data-widget="menubar"
group: the item groups of the menu, specified as one of:
- elements with role="group"
- using the data-groups option, specified as a jQuery selector relative to the widget
menubar item: the items of the menu, specified as one of:
- using the data-items option, specified as a jQuery selector relative to the widget
- the children elements of the groups if any
- the children elements of the widget

Simple menubar exampleSimple menubar example


  <ul class="menubar ui-menubar ui-toolbar" data-widget="menubar" role="menubar">
    <li class="menu-item toggle-collapsed ui-collapse ui-toggle" data-widget="collapse" role="menuitem" aria-controls="toggle-pane-200" id="toggle-201" aria-expanded="false" aria-haspopup="true" aria-labelledby="menu-item-label-290" tabindex="0">
      <span id="menu-item-label-290">item 1</span>
      <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-200" aria-expanded="false" aria-labelledby="toggle-201" role="menu"><span class="menu-item menu-item-back" data-role="back">item 1</span>
        <li class="menu-item" role="menuitem" tabindex="0"><span>item 1.1</span></li>
        <li class="menu-item" role="menuitem"><span>item 1.2</span></li>
        <li class="menu-item" role="menuitem"><span>item 1.3</span></li>
        <li class="menu-item toggle-collapsed ui-collapse ui-toggle" data-widget="collapse" tabindex="0" role="menuitem" aria-controls="toggle-pane-202" id="toggle-203" aria-expanded="false" aria-haspopup="true">
          <span>item 1.4</span>
          <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-202" aria-expanded="false" aria-labelledby="toggle-203" role="menu"><span class="menu-item menu-item-back" data-role="back">item 1.4</span>
            <li class="menu-item" role="menuitem" tabindex="0"><span>item 1.4.1</span></li>
            <li class="menu-item" role="menuitem"><span>item 1.4.2</span></li>
            <li class="menu-item" role="menuitem"><span>item 1.4.3</span></li>
            <li class="menu-item" role="menuitem"><span>item 1.4.4</span></li>
            <li class="menu-item" role="menuitem"><span>item 1.4.5</span></li>
          </ul>
        </li>
        <li class="menu-item" role="menuitem"><span>item 1.5</span></li>
      </ul>
    </li>
    <li class="menu-item menu-item-disabled" aria-disabled="true" role="menuitem" aria-labelledby="menu-item-label-291"><span id="menu-item-label-291">item 2 (disabled)</span></li>
    <li class="menu-item toggle-collapsed ui-collapse ui-toggle" data-widget="collapse" role="menuitem" aria-controls="toggle-pane-204" id="toggle-205" aria-expanded="false" aria-haspopup="true" aria-labelledby="menu-item-label-292">
      <span id="menu-item-label-292">item 3</span>
      <ul class="menu toggle-collapsed ui-menu" data-widget="menu" aria-hidden="true" id="toggle-pane-204" aria-expanded="false" aria-labelledby="toggle-205" role="menu"><span class="menu-item menu-item-back" data-role="back">item 3</span>
        <li class="menu-item" role="menuitem" tabindex="0"><span>item 3.1</span></li>
        <li class="menu-item" role="menuitem"><span>item 3.2</span></li>
        <li class="menu-item" role="menuitem"><span>item 3.3</span></li>
        <li class="menu-item" role="menuitem"><span>item 3.4</span></li>
        <li class="menu-item" role="menuitem"><span>item 3.5</span></li>
      </ul>
    </li>
    <li class="menu-item" role="menuitem" aria-labelledby="menu-item-label-293"><span id="menu-item-label-293">item 4</span></li>
    <li class="menu-item" role="menuitem" aria-labelledby="menu-item-label-294"><span id="menu-item-label-294">item 5</span></li>
  </ul>

AccordionsAccordions

Accordions overviewAccordions overview

accordions: the accordions widget, specified as:
- element with data-widget="accordions"
tab: the accordion tabs/labels, specified as:
- elements with role="tab"
- using the data-tabs option, specified as a jQuery selector relative to the widget
- even elements if the tabs are on the top
- odd elements if the tabs are on the bottom
panel: the accordion panels, specified as one of:
- elements with role="tabpanel"
- using the data-panels option, specified as a jQuery selector relative to the widget
- odd elements if the tabs are on the top
- even elements if the tabs are on the bottom

data-event: what event to respond to (click by default)
data-position: where the accordion tabs are placed relative to their panels (top or bottom, top by default)

beforeToggle: triggered on the tab and its panel element before the toggle happens
afterToggle: triggered on the tab and its panel element after the toggle happens

Both events have the following parameters:

toggle: a reference to the tab element
targets: a reference to the panel element
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

Default accordions (top positioned)Default accordions (top positioned)

Accordion1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.

Accordion2

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Accordion3


  <div data-widget="accordions" role="tablist" aria-multiselectable="true" class="ui-accordions">
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="0" role="tab" aria-controls="toggle-pane-206" id="toggle-207" aria-expanded="false">Accordion1</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-206" aria-expanded="false" aria-labelledby="toggle-207" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-208" id="toggle-209" aria-expanded="false">Accordion2</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-208" aria-expanded="false" aria-labelledby="toggle-209" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
      <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-210" id="toggle-211" aria-expanded="false">Accordion3</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-210" aria-expanded="false" aria-labelledby="toggle-211" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
    </div>
  </div>

Bottom positioned accordionsBottom positioned accordions

Accordion1

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Accordion2

Accordion3


  <div data-widget="accordions" data-position="bottom" role="tablist" aria-multiselectable="true" class="ui-accordions">
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-212" aria-expanded="false" aria-labelledby="toggle-213" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="0" role="tab" aria-controls="toggle-pane-212" id="toggle-213" aria-expanded="false">Accordion1</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-214" aria-expanded="false" aria-labelledby="toggle-215" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
      <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-214" id="toggle-215" aria-expanded="false">Accordion2</h3>
    <div class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-216" aria-expanded="false" aria-labelledby="toggle-217" role="tabpanel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
    </div>
    <h3 class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-216" id="toggle-217" aria-expanded="false">Accordion3</h3>
  </div>

TabsTabs

Tabs overviewTabs overview

tabs: the tabs widget, specified as:
- element with data-widget="tabs"
tab: the tabs labels, specified as:
- elements with role="tab"
- using the data-tabs option, specified as a jQuery selector relative to the widget
- children of the first child element if the tabs are on the top or left
- children of the second child element if the tabs are at the bottom or on the right
panel: the tab panels, specified as one of:
- elements with role="tabpanel"
- using the data-panels option, specified as a jQuery selector relative to the widget
- children of the second child element if the tabs are on the top or left
- children of the first child element if the tabs are at the bottom or on the right

data-event: what event to respond to (click by default)
data-position: where the tabs are placed relative to the panels (top, left, right or bottom, top by default)

beforeToggle: triggered on the tab and its panel element before the toggle happens
afterToggle: triggered on the tab and its panel element after the toggle happens

Both events have the following parameters:

toggle: a reference to the tab element
targets: a reference to the panel element
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

Default tabs (top)Default tabs (top)

Tab1
Tab2
Tab3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget


  <div id="tabs1" class="tabs tabs-top ui-tabs ui-accordions" data-widget="tabs" role="tablist" aria-multiselectable="false">
    <ul class="tab-toggles" data-role="tabs">
      <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-228" id="toggle-229" aria-expanded="true">Tab1</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-230" id="toggle-231" aria-expanded="false">Tab2</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-232" id="toggle-233" aria-expanded="false">Tab3</li>
    </ul>
    <div class="tab-panels" data-role="panels">
      <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-228" aria-expanded="true" aria-labelledby="toggle-229" tabindex="" role="tabpanel">
        <a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-230" aria-expanded="false" aria-labelledby="toggle-231" tabindex="-1" role="tabpanel">
        <a name="nulla-facilisi-duis"></a><h3>Nulla Facilisi. Duis</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
        <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-232" aria-expanded="false" aria-labelledby="toggle-233" tabindex="-1" role="tabpanel">
        <a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
      </div>
    </div>
  </div>

Left tabsLeft tabs

Tab1
Tab2
Tab3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget


  <div id="tabs2" class="tabs tabs-left ui-tabs ui-accordions" data-widget="tabs" data-position="left" role="tablist" aria-multiselectable="false">
    <ul class="tab-toggles" data-role="tabs">
      <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-234" id="toggle-235" aria-expanded="true">Tab1</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-236" id="toggle-237" aria-expanded="false">Tab2</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-238" id="toggle-239" aria-expanded="false">Tab3</li>
    </ul>
    <div class="tab-panels" data-role="panels">
      <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-234" aria-expanded="true" aria-labelledby="toggle-235" tabindex="" role="tabpanel">
        <a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-236" aria-expanded="false" aria-labelledby="toggle-237" tabindex="-1" role="tabpanel">
        <a name="nulla-facilisi-duis"></a><h3>Nulla Facilisi. Duis</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
        <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-238" aria-expanded="false" aria-labelledby="toggle-239" tabindex="-1" role="tabpanel">
        <a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
      </div>
    </div>
  </div>

Right tabsRight tabs

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab1
Tab2
Tab3


  <div id="tabs3" class="tabs tabs-right ui-tabs ui-accordions" data-widget="tabs" data-position="right" role="tablist" aria-multiselectable="false">
    <div class="tab-panels" data-role="panels">
      <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-240" aria-expanded="true" aria-labelledby="toggle-241" tabindex="" role="tabpanel">
        <a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-242" aria-expanded="false" aria-labelledby="toggle-243" tabindex="-1" role="tabpanel">
        <a name="nulla-facilisi-duis"></a><h3>Nulla Facilisi. Duis</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
        <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-244" aria-expanded="false" aria-labelledby="toggle-245" tabindex="-1" role="tabpanel">
        <a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
      </div>
    </div>
    <ul class="tab-toggles" data-role="tabs">
      <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-240" id="toggle-241" aria-expanded="true">Tab1</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-242" id="toggle-243" aria-expanded="false">Tab2</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-244" id="toggle-245" aria-expanded="false">Tab3</li>
    </ul>
  </div>

Bottom tabsBottom tabs

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab1
Tab2
Tab3


  <div id="tabs4" class="tabs tabs-bottom ui-tabs ui-accordions" data-widget="tabs" data-position="bottom" role="tablist" aria-multiselectable="false">
    <div class="tab-panels" data-role="panels">
      <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-246" aria-expanded="true" aria-labelledby="toggle-247" tabindex="" role="tabpanel">
        <a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-248" aria-expanded="false" aria-labelledby="toggle-249" tabindex="-1" role="tabpanel">
        <a name="nulla-facilisi-duis"></a><h3>Nulla Facilisi. Duis</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
        <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-250" aria-expanded="false" aria-labelledby="toggle-251" tabindex="-1" role="tabpanel">
        <a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
      </div>
    </div>
    <ul class="tab-toggles" data-role="tabs">
      <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-246" id="toggle-247" aria-expanded="true">Tab1</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-248" id="toggle-249" aria-expanded="false">Tab2</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-250" id="toggle-251" aria-expanded="false">Tab3</li>
    </ul>
  </div>

Nested tabs (horizontal-vertical)Nested tabs (horizontal-vertical)

Tab1
Tab2
Tab3

Tab1.1
Tab1.2
Tab1.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab2.1
Tab2.2
Tab2.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget


  <div class="tabs tabs-top ui-tabs ui-accordions" data-widget="tabs" data-position="top" role="tablist" aria-multiselectable="false">
    <ul class="tab-toggles" data-role="tabs">
      <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-252" id="toggle-253" aria-expanded="true">Tab1</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-254" id="toggle-255" aria-expanded="false">Tab2</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-256" id="toggle-257" aria-expanded="false">Tab3</li>
    </ul>
    <div class="tab-panels" data-role="panels">
      <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-252" aria-expanded="true" aria-labelledby="toggle-253" tabindex="" role="tabpanel">
        <div class="tabs tabs-left ui-tabs ui-accordions" data-widget="tabs" data-position="left" role="tablist" aria-multiselectable="false">
          <ul class="tab-toggles" data-role="tabs">
            <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-258" id="toggle-259" aria-expanded="true">Tab1.1</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-260" id="toggle-261" aria-expanded="false">Tab1.2</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-262" id="toggle-263" aria-expanded="false">Tab1.3</li>
          </ul>
          <div class="tab-panels" data-role="panels">
            <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-258" aria-expanded="true" aria-labelledby="toggle-259" tabindex="" role="tabpanel">
              <a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-260" aria-expanded="false" aria-labelledby="toggle-261" tabindex="-1" role="tabpanel">
              <a name="nulla-facilisi-duis"></a><a name="nulla-facilisi-duis"></a><h3>Nulla Facilisi. Duis</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
              <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-262" aria-expanded="false" aria-labelledby="toggle-263" tabindex="-1" role="tabpanel">
              <a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-254" aria-expanded="false" aria-labelledby="toggle-255" tabindex="-1" role="tabpanel">
        <div class="tabs tabs-left ui-tabs ui-accordions" data-widget="tabs" data-position="left" role="tablist" aria-multiselectable="false">
          <ul class="tab-toggles" data-role="tabs">
            <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-264" id="toggle-265" aria-expanded="true">Tab2.1</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-266" id="toggle-267" aria-expanded="false">Tab2.2</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-268" id="toggle-269" aria-expanded="false">Tab2.3</li>
          </ul>
          <div class="tab-panels" data-role="panels">
            <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-264" aria-expanded="true" aria-labelledby="toggle-265" tabindex="" role="tabpanel">
              <h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-266" aria-expanded="false" aria-labelledby="toggle-267" tabindex="-1" role="tabpanel">
              <h3>Nulla Facilisi. Duis</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
              <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-268" aria-expanded="false" aria-labelledby="toggle-269" tabindex="-1" role="tabpanel">
              <h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-256" aria-expanded="false" aria-labelledby="toggle-257" tabindex="-1" role="tabpanel">
        <h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
      </div>
    </div>
  </div>

Nested tabs (vertical-horizontal)Nested tabs (vertical-horizontal)

Tab1
Tab2
Tab3

Tab1.1
Tab1.2
Tab1.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget

Tab2.1
Tab2.2
Tab2.3

Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate

Nulla Facilisi. Duis

Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.

Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget


  <div class="tabs tabs-left ui-tabs ui-accordions" data-widget="tabs" data-position="left" role="tablist" aria-multiselectable="false">
    <ul class="tab-toggles" data-role="tabs">
      <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-270" id="toggle-271" aria-expanded="true">Tab1</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-272" id="toggle-273" aria-expanded="false">Tab2</li>
      <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-274" id="toggle-275" aria-expanded="false">Tab3</li>
    </ul>
    <div class="tab-panels" data-role="panels">
      <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-270" aria-expanded="true" aria-labelledby="toggle-271" tabindex="" role="tabpanel">
        <div class="tabs tabs-top ui-tabs ui-accordions" data-widget="tabs" data-position="top" role="tablist" aria-multiselectable="false">
          <ul class="tab-toggles" data-role="tabs">
            <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-276" id="toggle-277" aria-expanded="true">Tab1.1</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-278" id="toggle-279" aria-expanded="false">Tab1.2</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-280" id="toggle-281" aria-expanded="false">Tab1.3</li>
          </ul>
          <div class="tab-panels" data-role="panels">
            <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-276" aria-expanded="true" aria-labelledby="toggle-277" tabindex="" role="tabpanel">
              <a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><a name="duis-aliquet-egestas-purus-in-blandit-curabitur-vulputate"></a><h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-278" aria-expanded="false" aria-labelledby="toggle-279" tabindex="-1" role="tabpanel">
              <a name="nulla-facilisi-duis"></a><a name="nulla-facilisi-duis"></a><h3>Nulla Facilisi. Duis</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
              <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-280" aria-expanded="false" aria-labelledby="toggle-281" tabindex="-1" role="tabpanel">
              <a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><a name="quisque-eget-odio-ac-lectus-vestibulum-faucibus-eget"></a><h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-272" aria-expanded="false" aria-labelledby="toggle-273" tabindex="-1" role="tabpanel">
        <div class="tabs tabs-top ui-tabs ui-accordions" data-widget="tabs" data-position="top" role="tablist" aria-multiselectable="false">
          <ul class="tab-toggles" data-role="tabs">
            <li class="tab-toggle ui-collapse ui-toggle toggle-expanded" tabindex="0" role="tab" aria-controls="toggle-pane-282" id="toggle-283" aria-expanded="true">Tab2.1</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-284" id="toggle-285" aria-expanded="false">Tab2.2</li>
            <li class="tab-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-286" id="toggle-287" aria-expanded="false">Tab2.3</li>
          </ul>
          <div class="tab-panels" data-role="panels">
            <div class="tab-panel toggle-expanded" aria-hidden="false" id="toggle-pane-282" aria-expanded="true" aria-labelledby="toggle-283" tabindex="" role="tabpanel">
              <h3>Duis Aliquet Egestas Purus In Blandit. Curabitur Vulputate</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Nullam</a> in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-284" aria-expanded="false" aria-labelledby="toggle-285" tabindex="-1" role="tabpanel">
              <h3>Nulla Facilisi. Duis</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
              <p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis.</p>
            </div>
            <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-286" aria-expanded="false" aria-labelledby="toggle-287" tabindex="-1" role="tabpanel">
              <h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-274" aria-expanded="false" aria-labelledby="toggle-275" tabindex="-1" role="tabpanel">
        <h3>Quisque Eget Odio Ac Lectus Vestibulum Faucibus Eget</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>
      </div>
    </div>
  </div>

TreeTree

The tree widget allows organising hierarchical information in the form of a tree with branches and leaves. Individual branches can be collapsed and expanded depending on the needs.

Tree overviewTree overview

tree: the tree widget, specified as:
- element with data-widget="tree"
treeitems: the individual node in the tree, specified as:
- elements with role="treeitem"
- using data-items option, specified as a jQuery selector relative to the widget
- direct children of groups and the widget itself that have no specific role defined
- direct children of the widget itself that have no specific role defined
groups: wrapper for all the child-nodes of a specific node (tree acts as the top group), specified as:
- elements with role="group"
- using data-groups option, specified as a jQuery selector relative to the widget

data-autocollapse: a boolean indicating whether or not to collapse the nodes automatically (false by default)

beforeToggle: triggered on the treeitem toggle and its group element before the toggle happens
afterToggle: triggered on the treeitem toggle and its group element after the toggle happens

Both events have the following parameters:

toggle: a reference to the treeitem toggle element
targets: a reference to the group element
status: a boolean indicating whether the targets are visible (true) or hidden (false)
event: the actual event that triggered the toggle

In-line treeIn-line tree

The in-line tree is meant to be in-lined into a paragraph of text.

Default in-line treeDefault in-line tree


  <ul id="tree1" data-widget="tree" role="tree" class="ui-tree ui-toolbar">
    <li role="treeitem" aria-labelledby="tree-item-label-368" tabindex="0"><span id="tree-item-label-368">Vivamus hendrerit arcu</span></li>
    <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-369" tabindex="-1">
      <span id="tree-item-label-369">sed erat molestie vehicula</span>
      <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-358" id="toggle-359" aria-expanded="false" aria-labelledby="tree-item-label-369"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-358" aria-expanded="false" aria-labelledby="tree-item-label-369">
        <li role="treeitem" aria-labelledby="tree-item-label-370" tabindex="-1"><span id="tree-item-label-370">Sed auctor neque eu tellus</span></li>
        <li role="treeitem" aria-labelledby="tree-item-label-371" tabindex="-1"><span id="tree-item-label-371">rhoncus ut eleifend nibh porttitor</span></li>
      </ul>
    </li>
    <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-372" tabindex="-1">
      <span id="tree-item-label-372">Ut in nulla enim</span>
      <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-360" id="toggle-361" aria-expanded="false" aria-labelledby="tree-item-label-372"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-360" aria-expanded="false" aria-labelledby="tree-item-label-372">
        <li role="treeitem" aria-labelledby="tree-item-label-373" tabindex="-1"><span id="tree-item-label-373">Phasellus molestie magna</span></li>
        <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-374" tabindex="-1">
          <span id="tree-item-label-374">non est bibendum non venenatis nisl tempor</span>
          <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-362" id="toggle-363" aria-expanded="false" aria-labelledby="tree-item-label-374"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-362" aria-expanded="false" aria-labelledby="tree-item-label-374">
            <li role="treeitem" aria-labelledby="tree-item-label-375" tabindex="-1"><span id="tree-item-label-375">Suspendisse dictum</span></li>
            <li role="treeitem" aria-labelledby="tree-item-label-376" tabindex="-1"><span id="tree-item-label-376">feugiat nisl ut dapibus</span></li>
          </ul>
        </li>
        <li role="treeitem" aria-labelledby="tree-item-label-377" tabindex="-1"><span id="tree-item-label-377">Mauris iaculis porttitor posuere</span></li>
      </ul>
    </li>
    <li role="treeitem" aria-labelledby="tree-item-label-378" tabindex="-1"><span id="tree-item-label-378">Praesent id metus massa</span></li>
    <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-379" tabindex="-1">
      <span id="tree-item-label-379">ut blandit odio</span>
      <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-364" id="toggle-365" aria-expanded="false" aria-labelledby="tree-item-label-379"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-364" aria-expanded="false" aria-labelledby="tree-item-label-379">
        <li role="treeitem" aria-labelledby="tree-item-label-380" tabindex="-1"><span id="tree-item-label-380">Proin quis tortor orci</span></li>
        <li role="treeitem" aria-labelledby="tree-item-label-381" tabindex="-1"><span id="tree-item-label-381">Etiam at risus et</span></li>
        <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-382" tabindex="-1">
          <span id="tree-item-label-382">justo dignissim congue</span>
          <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-366" id="toggle-367" aria-expanded="false" aria-labelledby="tree-item-label-382"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-366" aria-expanded="false" aria-labelledby="tree-item-label-382">
            <li role="treeitem" aria-labelledby="tree-item-label-383" tabindex="-1"><span id="tree-item-label-383">Donec congue lacinia dui</span></li>
            <li role="treeitem" aria-labelledby="tree-item-label-384" tabindex="-1"><span id="tree-item-label-384">a porttitor lectus condimentum laoreet</span></li>
          </ul>
        </li>
        <li role="treeitem" aria-labelledby="tree-item-label-385" tabindex="-1"><span id="tree-item-label-385">Nunc eu ullamcorper orci</span></li>
      </ul>
    </li>
  </ul>


  <ul data-widget="tree">
    <!-- for each treeitem that has no children -->
    <li>
      <span><!-- treeitem label --></span>
      <!-- if treeitem has children -->
      <ul role="group">
        <!-- for each treeitem -->
          <!-- recursive use of the treeitem template -->
        <!-- /for each -->
      </ul>
      <!-- /if -->
    </li>
    <!-- /for each -->
  </ul>

In-line tree with auto-collapsing branchesIn-line tree with auto-collapsing branches

The auto-collapse option (data-autoCollapse="true") automatically closes branches when navigating the tree.


  <ul id="tree2" data-widget="tree" data-autocollapse="true" role="tree" class="ui-tree ui-toolbar">
    <li role="treeitem" aria-labelledby="tree-item-label-396" tabindex="0"><span id="tree-item-label-396">Vivamus hendrerit arcu</span></li>
    <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-397" tabindex="-1">
      <span id="tree-item-label-397">sed erat molestie vehicula</span>
      <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-386" id="toggle-387" aria-expanded="false" aria-labelledby="tree-item-label-397"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-386" aria-expanded="false" aria-labelledby="tree-item-label-397">
        <li role="treeitem" aria-labelledby="tree-item-label-398" tabindex="-1"><span id="tree-item-label-398">Sed auctor neque eu tellus</span></li>
        <li role="treeitem" aria-labelledby="tree-item-label-399" tabindex="-1"><span id="tree-item-label-399">rhoncus ut eleifend nibh porttitor</span></li>
      </ul>
    </li>
    <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-400" tabindex="-1">
      <span id="tree-item-label-400">Ut in nulla enim</span>
      <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-388" id="toggle-389" aria-expanded="false" aria-labelledby="tree-item-label-400"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-388" aria-expanded="false" aria-labelledby="tree-item-label-400">
        <li role="treeitem" aria-labelledby="tree-item-label-401" tabindex="-1"><span id="tree-item-label-401">Phasellus molestie magna</span></li>
        <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-402" tabindex="-1">
          <span id="tree-item-label-402">non est bibendum non venenatis nisl tempor</span>
          <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-390" id="toggle-391" aria-expanded="false" aria-labelledby="tree-item-label-402"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-390" aria-expanded="false" aria-labelledby="tree-item-label-402">
            <li role="treeitem" aria-labelledby="tree-item-label-403" tabindex="-1"><span id="tree-item-label-403">Suspendisse dictum</span></li>
            <li role="treeitem" aria-labelledby="tree-item-label-404" tabindex="-1"><span id="tree-item-label-404">feugiat nisl ut dapibus</span></li>
          </ul>
        </li>
        <li role="treeitem" aria-labelledby="tree-item-label-405" tabindex="-1"><span id="tree-item-label-405">Mauris iaculis porttitor posuere</span></li>
      </ul>
    </li>
    <li role="treeitem" aria-labelledby="tree-item-label-406" tabindex="-1"><span id="tree-item-label-406">Praesent id metus massa</span></li>
    <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-407" tabindex="-1">
      <span id="tree-item-label-407">ut blandit odio</span>
      <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-392" id="toggle-393" aria-expanded="false" aria-labelledby="tree-item-label-407"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-392" aria-expanded="false" aria-labelledby="tree-item-label-407">
        <li role="treeitem" aria-labelledby="tree-item-label-408" tabindex="-1"><span id="tree-item-label-408">Proin quis tortor orci</span></li>
        <li role="treeitem" aria-labelledby="tree-item-label-409" tabindex="-1"><span id="tree-item-label-409">Etiam at risus et</span></li>
        <li role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-410" tabindex="-1">
          <span id="tree-item-label-410">justo dignissim congue</span>
          <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-394" id="toggle-395" aria-expanded="false" aria-labelledby="tree-item-label-410"></span><ul role="group" class="toggle-collapsed" aria-hidden="true" id="toggle-pane-394" aria-expanded="false" aria-labelledby="tree-item-label-410">
            <li role="treeitem" aria-labelledby="tree-item-label-411" tabindex="-1"><span id="tree-item-label-411">Donec congue lacinia dui</span></li>
            <li role="treeitem" aria-labelledby="tree-item-label-412" tabindex="-1"><span id="tree-item-label-412">a porttitor lectus condimentum laoreet</span></li>
          </ul>
        </li>
        <li role="treeitem" aria-labelledby="tree-item-label-413" tabindex="-1"><span id="tree-item-label-413">Nunc eu ullamcorper orci</span></li>
      </ul>
    </li>
  </ul>


  <ul data-widget="tree" data-autoCollapse="true">
    <!-- for each treeitem -->
    <li>
      <span><!-- treeitem label --></span>
      <!-- if treeitem has children -->
      <ul role="group">
        <!-- for each treeitem -->
          <!-- recursive use of the treeitem template -->
        <!-- /for each -->
      </ul>
      <!-- /if -->
    </li>
    <!-- /for each -->
  </ul>

Block treeBlock tree

The block tree is meant to be used as a navigation menu.

Default block treeDefault block tree


  <nav class="nav nav-block nav-vertical">
    <ul id="tree3" class="nav-list ui-tree ui-toolbar" data-widget="tree" role="tree">
      <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-424" tabindex="0"><a href="..." class="nav-link" id="tree-item-label-424">Vivamus hendrerit arcu</a></li>
      <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-425" tabindex="-1">
        <a href="..." class="nav-link" id="tree-item-label-425">sed erat molestie vehicula</a>
        <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-414" id="toggle-415" aria-expanded="false" aria-labelledby="tree-item-label-425"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-414" aria-expanded="false" aria-labelledby="tree-item-label-425">
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-426" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-426">Sed auctor neque eu tellus</a></li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-427" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-427">rhoncus ut eleifend nibh porttitor</a></li>
        </ul>
      </li>
      <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-428" tabindex="-1">
        <a href="..." class="nav-link" id="tree-item-label-428">Ut in nulla enim</a>
        <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-416" id="toggle-417" aria-expanded="false" aria-labelledby="tree-item-label-428"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-416" aria-expanded="false" aria-labelledby="tree-item-label-428">
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-429" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-429">Phasellus molestie magna</a></li>
          <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-430" tabindex="-1">
            <a href="..." class="nav-link" id="tree-item-label-430">non est bibendum non venenatis nisl tempor</a>
            <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-418" id="toggle-419" aria-expanded="false" aria-labelledby="tree-item-label-430"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-418" aria-expanded="false" aria-labelledby="tree-item-label-430">
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-431" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-431">Suspendisse dictum</a></li>
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-432" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-432">feugiat nisl ut dapibus</a></li>
            </ul>
          </li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-433" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-433">Mauris iaculis porttitor posuere</a></li>
        </ul>
      </li>
      <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-434" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-434">Praesent id metus massa</a></li>
      <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-435" tabindex="-1">
        <a href="..." class="nav-link" id="tree-item-label-435">ut blandit odio</a>
        <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-420" id="toggle-421" aria-expanded="false" aria-labelledby="tree-item-label-435"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-420" aria-expanded="false" aria-labelledby="tree-item-label-435">
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-436" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-436">Proin quis tortor orci</a></li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-437" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-437">Etiam at risus et</a></li>
          <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-438" tabindex="-1">
            <a href="..." class="nav-link" id="tree-item-label-438">justo dignissim congue</a>
            <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-422" id="toggle-423" aria-expanded="false" aria-labelledby="tree-item-label-438"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-422" aria-expanded="false" aria-labelledby="tree-item-label-438">
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-439" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-439">Donec congue lacinia dui</a></li>
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-440" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-440">a porttitor lectus condimentum laoreet</a></li>
            </ul>
          </li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-441" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-441">Nunc eu ullamcorper orci</a></li>
        </ul>
      </li>
    </ul>
  </nav>


  <nav class="nav nav-block nav-vertical">
    <!-- tree widget -->
    <ul class="nav-list" data-widget="tree">
      <!-- for each treeitem -->
      <li class="nav-item">
        <a href="..." class="nav-link"><!-- treeitem label --></a>
        <!-- if treeitem has children -->
        <ul class="nav-list" role="group">
          <!-- for each treeitem -->
            <!-- recursive use of the treeitem template -->
          <!-- /for each -->
        </ul>
        <!-- /if -->
      </li>
      <!-- /for each -->
    </ul>
    <!-- /tree widget -->
  </nav>

Block tree with auto-collapse of branchesBlock tree with auto-collapse of branches


  <nav class="nav nav-block nav-vertical">
    <ul id="tree4" class="nav-list ui-tree ui-toolbar" data-widget="tree" data-autocollapse="true" role="tree">
      <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-452" tabindex="0"><a href="..." class="nav-link" id="tree-item-label-452">Vivamus hendrerit arcu</a></li>
      <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-453" tabindex="-1">
        <a href="..." class="nav-link" id="tree-item-label-453">sed erat molestie vehicula</a>
        <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-442" id="toggle-443" aria-expanded="false" aria-labelledby="tree-item-label-453"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-442" aria-expanded="false" aria-labelledby="tree-item-label-453">
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-454" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-454">Sed auctor neque eu tellus</a></li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-455" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-455">rhoncus ut eleifend nibh porttitor</a></li>
        </ul>
      </li>
      <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-456" tabindex="-1">
        <a href="..." class="nav-link" id="tree-item-label-456">Ut in nulla enim</a>
        <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-444" id="toggle-445" aria-expanded="false" aria-labelledby="tree-item-label-456"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-444" aria-expanded="false" aria-labelledby="tree-item-label-456">
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-457" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-457">Phasellus molestie magna</a></li>
          <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-458" tabindex="-1">
            <a href="..." class="nav-link" id="tree-item-label-458">non est bibendum non venenatis nisl tempor</a>
            <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-446" id="toggle-447" aria-expanded="false" aria-labelledby="tree-item-label-458"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-446" aria-expanded="false" aria-labelledby="tree-item-label-458">
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-459" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-459">Suspendisse dictum</a></li>
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-460" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-460">feugiat nisl ut dapibus</a></li>
            </ul>
          </li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-461" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-461">Mauris iaculis porttitor posuere</a></li>
        </ul>
      </li>
      <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-462" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-462">Praesent id metus massa</a></li>
      <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-463" tabindex="-1">
        <a href="..." class="nav-link" id="tree-item-label-463">ut blandit odio</a>
        <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-448" id="toggle-449" aria-expanded="false" aria-labelledby="tree-item-label-463"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-448" aria-expanded="false" aria-labelledby="tree-item-label-463">
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-464" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-464">Proin quis tortor orci</a></li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-465" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-465">Etiam at risus et</a></li>
          <li class="nav-item" role="treeitem" aria-haspopup="true" aria-labelledby="tree-item-label-466" tabindex="-1">
            <a href="..." class="nav-link" id="tree-item-label-466">justo dignissim congue</a>
            <span data-widget="collapse" tabindex="-1" class="toggle-collapsed ui-collapse ui-toggle" role="button" aria-controls="toggle-pane-450" id="toggle-451" aria-expanded="false" aria-labelledby="tree-item-label-466"></span><ul class="nav-list toggle-collapsed" role="group" aria-hidden="true" id="toggle-pane-450" aria-expanded="false" aria-labelledby="tree-item-label-466">
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-467" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-467">Donec congue lacinia dui</a></li>
              <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-468" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-468">a porttitor lectus condimentum laoreet</a></li>
            </ul>
          </li>
          <li class="nav-item" role="treeitem" aria-labelledby="tree-item-label-469" tabindex="-1"><a href="..." class="nav-link" id="tree-item-label-469">Nunc eu ullamcorper orci</a></li>
        </ul>
      </li>
    </ul>
  </nav>


  <nav class="nav nav-block nav-vertical">
    <!-- tree widget -->
    <ul class="nav-list" data-widget="tree" data-autoCollapse="true">
      <!-- for each treeitem -->
      <li class="nav-item">
        <a href="..." class="nav-link"><!-- treeitem label --></a>
        <!-- if treeitem has children -->
        <ul class="nav-list" role="group">
          <!-- for each treeitem -->
            <!-- recursive use of the treeitem template -->
          <!-- /for each -->
        </ul>
        <!-- /if -->
      </li>
      <!-- /for each -->
    </ul>
    <!-- /tree widget -->
  </nav>

DialogDialog

The dialog widget provides a way to display content in an in-page popup.

Dialog overviewDialog overview

dialog: the dialog widget, specified as:
- element with data-widget="dialog"
close button: the close button, specified as:
- elements with data-role="close"
- auto-generated

data-overlay: whether to show the dialog in an overlay (true or false, false by default)

Simple dialogSimple dialog

Toggle dialog


  <span data-widget="toggle" tabindex="0" class="toggle-hidden ui-toggle" role="button" aria-controls="toggle-pane-2">Toggle dialog</span>
  <br>

Toggle dialog


  <span data-widget="toggle" tabindex="0" class="toggle-hidden ui-toggle" role="button" aria-controls="toggle-pane-3">Toggle dialog</span>


  <div data-widget="toggle" tabindex="0" class="toggle-hidden ui-toggle" role="button" aria-controls="toggle-pane-4">
        <img src="//lorempixel.com/652/200/abstract/2/" alt="© 2016 EPFL" title="© 2016 EPFL">
        <div class="image-visual-legend toggle-hidden" aria-hidden="true" id="toggle-pane-4">© 2016 EPFL</div>
  </div>


  <div data-widget="toggle" tabindex="0" class="toggle-hidden ui-toggle" role="button" aria-controls="toggle-pane-5">
      <img src="//lorempixel.com/652/200/abstract/1/" alt="© 2016 EPFL" title="© 2016 EPFL">
  </div>

Carousel & SlideshowCarousel & Slideshow

The carousel widget allows organizing items into panels and flipping through them easily, showing only the active panel. The slideshow adds auto-playing and navigation on top of the carousel.

Carousel overviewCarousel overview

carousel: the carousel widget, specified as:
- element with data-widget="carousel"
panel: the panels that contain the various items, specified as one of:
- elements with role="group"
- using the data-panels option, specified as a jQuery selector relative to the widget
- children of the 1st child of the widget if the controls are below the panels
- children of the 2nd child of the widget
item: the individual items in the carousel, specified as one of:
- elements with role="option"
- using the data-items option, specified as a jQuery selector relative to the widget
- children of the panels
controls: the controls that allow switching panels, specified as one of:
- elements with role="toolbar", if the data-controls option is not false
- children of the 2nd child of the widget if the controls are below the panels
- children of the 1st child of the widget if the widget has several children
- auto-generated
previous button: the button that allows switching to the previous panel, specified as one of:
- elements with data-role="previous", if the data-prev option is not false
- using the data-prev option, specified as a jQuery selector relative to the widget
- auto-generated
next button: the button that allows switching to the next panel, specified as one of:
- elements with data-role="next", if the data-next option is not false
- using the data-next option, specified as a jQuery selector relative to the widget
- auto-generated

data-event: what event to respond to (click by default)
data-cycleItems: whether to cycle through the items or not (trueor false, default is false)

beforeSelect: triggered on the carousel element before the selection happens
afterSelect: triggered on the carousel element after the selection happens

Both events have the following parameters:

item: a reference to the current item
panel: a reference to the current panel

Default carouselDefault carousel


  <div data-widget="carousel" data-role="carousel" class="ui-carousel ui-list">
    <div role="listbox" aria-activedescendant="listbox-option-927"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col6" role="option" id="listbox-option-927" tabindex="0">
          <img src="//lorempixel.com/640/480/abstract/1/" alt="Abstract Picture 1">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-928">
          <img src="//lorempixel.com/640/480/abstract/6/" alt="Abstract Picture 6">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-929">
          <img src="//lorempixel.com/640/480/abstract/2/" alt="Abstract Picture 2">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-930">
          <img src="//lorempixel.com/640/480/abstract/7/" alt="Abstract Picture 7">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-931">
          <img src="//lorempixel.com/640/480/abstract/3/" alt="Abstract Picture 3">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-932">
          <img src="//lorempixel.com/640/480/abstract/8/" alt="Abstract Picture 8">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-933">
          <img src="//lorempixel.com/640/480/abstract/4/" alt="Abstract Picture 4">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-934">
          <img src="//lorempixel.com/640/480/abstract/9/" alt="Abstract Picture 9">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-935">
          <img src="//lorempixel.com/640/480/abstract/5/" alt="Abstract Picture 5">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-936">
          <img src="//lorempixel.com/640/480/abstract/10/" alt="Abstract Picture 10">
        </div>
      </div>
    </div>
  </div>

With inline previewWith inline preview

Inline previews for each option can be set, by adding:

data-target: jQuery selector to the target element that contains the preview
data-url: url to use for the content of the target element (for its src attribute)


  <div class="embed-responsive embed-responsive-4by3">
    <img alt="image" id="carousel-preview" src="//lorempixel.com/320/240/abstract/1/">
  </div>
  <div data-widget="carousel" data-role="carousel" class="ui-carousel ui-list">
    <div role="listbox" aria-activedescendant="listbox-option-937"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/1/" role="option" id="listbox-option-937" tabindex="0">
          <img src="//lorempixel.com/320/240/abstract/1/" alt="Abstract Picture 1">
        </div>
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/6/" role="option" id="listbox-option-938">
          <img src="//lorempixel.com/320/240/abstract/6/" alt="Abstract Picture 6">
        </div>
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/2/" role="option" id="listbox-option-939">
          <img src="//lorempixel.com/320/240/abstract/2/" alt="Abstract Picture 2">
        </div>
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/7/" role="option" id="listbox-option-940">
          <img src="//lorempixel.com/320/240/abstract/7/" alt="Abstract Picture 7">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/3/" role="option" id="listbox-option-941">
          <img src="//lorempixel.com/320/240/abstract/3/" alt="Abstract Picture 3">
        </div>
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/8/" role="option" id="listbox-option-942">
          <img src="//lorempixel.com/320/240/abstract/8/" alt="Abstract Picture 8">
        </div>
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/4/" role="option" id="listbox-option-943">
          <img src="//lorempixel.com/320/240/abstract/4/" alt="Abstract Picture 4">
        </div>
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/9/" role="option" id="listbox-option-944">
          <img src="//lorempixel.com/320/240/abstract/9/" alt="Abstract Picture 9">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col3" data-target="#carousel-preview" data-url="//lorempixel.com/320/240/abstract/5/" role="option" id="listbox-option-945">
          <img src="//lorempixel.com/320/240/abstract/5/" alt="Abstract Picture 5">
        </div>
      </div>
    </div>
  </div>

With controlsWith controls


  <div data-widget="carousel" data-controls="before" data-role="carousel" class="ui-carousel ui-list"><div role="toolbar" class="ui-toolbar"><span data-role="previous" role="button" tabindex="-1" aria-disabled="true"></span><span data-role="next" role="button" tabindex="0" aria-disabled="false"></span><div data-role="selector" role="presentation"><strong data-role="selector-index">1</strong> / <span data-role="selector-count">9</span></div></div>
    <div role="listbox" aria-activedescendant="listbox-option-946"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col4" role="option" id="listbox-option-946" tabindex="0">
          <img src="//lorempixel.com/320/240/abstract/1/" alt="Abstract Picture 1">
        </div>
        <div class="g-span-col4" role="option" id="listbox-option-947">
          <img src="//lorempixel.com/320/240/abstract/6/" alt="Abstract Picture 6">
        </div>
        <div class="g-span-col4" role="option" id="listbox-option-948">
          <img src="//lorempixel.com/320/240/abstract/2/" alt="Abstract Picture 2">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col4" role="option" id="listbox-option-949">
          <img src="//lorempixel.com/320/240/abstract/7/" alt="Abstract Picture 7">
        </div>
        <div class="g-span-col4" role="option" id="listbox-option-950">
          <img src="//lorempixel.com/320/240/abstract/3/" alt="Abstract Picture 3">
        </div>
        <div class="g-span-col4" role="option" id="listbox-option-951">
          <img src="//lorempixel.com/320/240/abstract/8/" alt="Abstract Picture 8">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col4" role="option" id="listbox-option-952">
          <img src="//lorempixel.com/320/240/abstract/4/" alt="Abstract Picture 4">
        </div>
        <div class="g-span-col4" role="option" id="listbox-option-953">
          <img src="//lorempixel.com/320/240/abstract/9/" alt="Abstract Picture 9">
        </div>
        <div class="g-span-col4" role="option" id="listbox-option-954">
          <img src="//lorempixel.com/320/240/abstract/5/" alt="Abstract Picture 5">
        </div>
      </div>
    </div>
  </div>

Vertical with controlsVertical with controls


  <div data-widget="carousel" data-controls="before" data-orientation="vertical" data-role="carousel" class="ui-carousel ui-list"><div role="toolbar" class="ui-toolbar"><span data-role="previous" role="button" tabindex="-1" aria-disabled="true"></span><span data-role="next" role="button" tabindex="0" aria-disabled="false"></span><div data-role="selector" role="presentation"><strong data-role="selector-index">1</strong> / <span data-role="selector-count">10</span></div></div>
    <div role="listbox" aria-activedescendant="listbox-option-955"><div data-role="carousel-selection-indicator" role="presentation" style="top: 76300.6px;"></div>
      <div role="group" aria-hidden="false">
        <img src="//lorempixel.com/320/240/abstract/1/" alt="Abstract Picture 1" role="option" id="listbox-option-955" tabindex="0">
        <img src="//lorempixel.com/320/240/abstract/6/" alt="Abstract Picture 6" role="option" id="listbox-option-956">
      </div>
      <div role="group" aria-hidden="true">
        <img src="//lorempixel.com/320/240/abstract/2/" alt="Abstract Picture 2" role="option" id="listbox-option-957">
        <img src="//lorempixel.com/320/240/abstract/7/" alt="Abstract Picture 7" role="option" id="listbox-option-958">
      </div>
      <div role="group" aria-hidden="true">
        <img src="//lorempixel.com/320/240/abstract/3/" alt="Abstract Picture 3" role="option" id="listbox-option-959">
        <img src="//lorempixel.com/320/240/abstract/8/" alt="Abstract Picture 8" role="option" id="listbox-option-960">
      </div>
      <div role="group" aria-hidden="true">
        <img src="//lorempixel.com/320/240/abstract/4/" alt="Abstract Picture 4" role="option" id="listbox-option-961">
        <img src="//lorempixel.com/320/240/abstract/9/" alt="Abstract Picture 9" role="option" id="listbox-option-962">
      </div>
      <div role="group" aria-hidden="true">
        <img src="//lorempixel.com/320/240/abstract/5/" alt="Abstract Picture 5" role="option" id="listbox-option-963">
        <img src="//lorempixel.com/320/240/abstract/10/" alt="Abstract Picture 10" role="option" id="listbox-option-964">
      </div>
    </div>
  </div>

With custom controlsWith custom controls


  <div data-widget="carousel" data-controls=".controls" data-prev=".prev" data-next=".next" data-role="carousel" class="ui-carousel ui-list">
    <div role="listbox" aria-activedescendant="listbox-option-965"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col12" role="option" id="listbox-option-965" tabindex="0">
          <img src="//lorempixel.com/800/600/abstract/1/" alt="Abstract Picture 1">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col12" role="option" id="listbox-option-966">
          <img src="//lorempixel.com/800/600/abstract/2/" alt="Abstract Picture 2">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col12" role="option" id="listbox-option-967">
          <img src="//lorempixel.com/800/600/abstract/3/" alt="Abstract Picture 3">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col12" role="option" id="listbox-option-968">
          <img src="//lorempixel.com/800/600/abstract/4/" alt="Abstract Picture 4">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col12" role="option" id="listbox-option-969">
          <img src="//lorempixel.com/800/600/abstract/5/" alt="Abstract Picture 5">
        </div>
      </div>
    </div>
    <div class="controls ui-toolbar" role="toolbar">
      <span class="prev" aria-label="View previous panel" title="Previous panel" data-role="previous" role="button" tabindex="-1" aria-disabled="true"></span>
      <span class="next" aria-label="View next panel" title="Next panel" data-role="next" role="button" tabindex="0" aria-disabled="false"></span>
    <div data-role="selector" role="presentation"><strong data-role="selector-index">1</strong> / <span data-role="selector-count">5</span></div></div>
  </div>

With custom controls and cycleItems=TrueWith custom controls and cycleItems=True


  <div data-widget="carousel" data-cycleitems="true" data-controls=".controls" data-prev=".prev" data-next=".next" data-role="carousel" class="ui-carousel ui-list">
    <div role="listbox" aria-activedescendant="listbox-option-970"><div data-role="carousel-selection-indicator" role="presentation" style="left: 87.5px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <img class="g-span-col12" src="//lorempixel.com/320/240/abstract/1/" alt="Abstract Picture 1" role="option" id="listbox-option-970" tabindex="0">
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <img class="g-span-col12" src="//lorempixel.com/320/240/abstract/2/" alt="Abstract Picture 2" role="option" id="listbox-option-971">
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <img class="g-span-col12" src="//lorempixel.com/320/240/abstract/3/" alt="Abstract Picture 3" role="option" id="listbox-option-972">
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <img class="g-span-col12" src="//lorempixel.com/320/240/abstract/4/" alt="Abstract Picture 4" role="option" id="listbox-option-973">
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <img class="g-span-col12" src="//lorempixel.com/320/240/abstract/5/" alt="Abstract Picture 5" role="option" id="listbox-option-974">
      </div>
    </div>
    <div class="controls ui-toolbar" role="toolbar">
      <span class="prev" aria-label="View previous panel" title="Previous panel" data-role="previous" role="button" tabindex="0" aria-disabled="false"></span>
      <span class="next" aria-label="View next panel" title="Next panel" data-role="next" role="button" tabindex="0" aria-disabled="false"></span>
    <div data-role="selector" role="presentation"><strong data-role="selector-index">1</strong> / <span data-role="selector-count">5</span></div></div>
  </div>

SlideshowSlideshow

slideshow: the carousel widget, specified as:
- element with data-widget="slideshow"
panel: same as carousel
item: same as carousel
controls: same as carousel
previous button: same as carousel
next button: same as carousel
play button: the button that allows auto-playing the items, specified as one of:
- elements with data-role="play", if the data-play option is not false
- using the data-play option, specified as a jQuery selector relative to the widget
- auto-generated
pause button: the button that allows pausing the items, specified as one of:
- elements with data-role="pause", if the data-pause option is not false
- using the data-pause option, specified as a jQuery selector relative to the widget
- auto-generated
selectors: the selectors that allow jumping to a specific item, specified as one of:
- elements with data-role="selector"
- using the data-selectors option, specified as a jQuery selector relative to the widget
- auto-generated

Same as carousel, plus:

data-autoplay: whether to auto-play the items (trueor false, default is true)
data-duration: how long each item in the slideshow should be shown (in ms, default is 5000)

Same as carousel.

Default slideshowDefault slideshow


  <div data-widget="slideshow" data-role="slideshow" class="ui-slideshow ui-carousel ui-list">
    <div role="listbox" aria-activedescendant="listbox-option-975"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col6" role="option" id="listbox-option-975" tabindex="0">
          <img src="//lorempixel.com/640/480/abstract/1/" alt="Abstract Picture 1">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-976">
          <img src="//lorempixel.com/640/480/abstract/6/" alt="Abstract Picture 6">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-977">
          <img src="//lorempixel.com/640/480/abstract/2/" alt="Abstract Picture 2">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-978">
          <img src="//lorempixel.com/640/480/abstract/7/" alt="Abstract Picture 7">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-979">
          <img src="//lorempixel.com/640/480/abstract/3/" alt="Abstract Picture 3">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-980">
          <img src="//lorempixel.com/640/480/abstract/8/" alt="Abstract Picture 8">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-981">
          <img src="//lorempixel.com/640/480/abstract/4/" alt="Abstract Picture 4">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-982">
          <img src="//lorempixel.com/640/480/abstract/9/" alt="Abstract Picture 9">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-983">
          <img src="//lorempixel.com/640/480/abstract/5/" alt="Abstract Picture 5">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-984">
          <img src="//lorempixel.com/640/480/abstract/10/" alt="Abstract Picture 10">
        </div>
      </div>
    </div>
  </div>

With controls (no selectors)With controls (no selectors)


  <div data-widget="slideshow" data-controls="before" data-selectors="false" data-role="slideshow" class="ui-slideshow ui-carousel ui-list"><div role="toolbar" class="ui-toolbar"><span data-role="previous" role="button" tabindex="0" aria-disabled="false"></span><span data-role="next" role="button" tabindex="0" aria-disabled="false"></span><span role="button" tabindex="0" data-role="play" aria-disabled="true"></span><span role="button" tabindex="0" data-role="pause" aria-disabled="false"></span></div>
    <div role="listbox" aria-activedescendant="listbox-option-985"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col6" role="option" id="listbox-option-985" tabindex="0">
          <img src="//lorempixel.com/640/480/abstract/1/" alt="Abstract Picture 1">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-986">
          <img src="//lorempixel.com/640/480/abstract/6/" alt="Abstract Picture 6">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-987">
          <img src="//lorempixel.com/640/480/abstract/2/" alt="Abstract Picture 2">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-988">
          <img src="//lorempixel.com/640/480/abstract/7/" alt="Abstract Picture 7">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-989">
          <img src="//lorempixel.com/640/480/abstract/3/" alt="Abstract Picture 3">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-990">
          <img src="//lorempixel.com/640/480/abstract/8/" alt="Abstract Picture 8">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-991">
          <img src="//lorempixel.com/640/480/abstract/4/" alt="Abstract Picture 4">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-992">
          <img src="//lorempixel.com/640/480/abstract/9/" alt="Abstract Picture 9">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" role="option" id="listbox-option-993">
          <img src="//lorempixel.com/640/480/abstract/5/" alt="Abstract Picture 5">
        </div>
        <div class="g-span-col6" role="option" id="listbox-option-994">
          <img src="//lorempixel.com/640/480/abstract/10/" alt="Abstract Picture 10">
        </div>
      </div>
    </div>
  </div>

Slideshow with custom controlsSlideshow with custom controls


  <div data-widget="slideshow" data-controls=".controls" data-prev=".prev" data-next=".next" data-selectors=".selector" data-role="slideshow" class="ui-slideshow ui-carousel ui-list">
    <div role="listbox" aria-activedescendant="carousel-item-995"><div data-role="carousel-selection-indicator" role="presentation" style="left: 640px;"></div>
      <div class="g-row" role="group" aria-hidden="false">
        <div class="g-span-col6" id="carousel-item-995" role="option" tabindex="0">
          <img src="//lorempixel.com/640/480/abstract/1/" alt="Abstract Picture 1">
        </div>
        <div class="g-span-col6" id="carousel-item-996" role="option">
          <img src="//lorempixel.com/640/480/abstract/6/" alt="Abstract Picture 6">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" id="carousel-item-997" role="option">
          <img src="//lorempixel.com/640/480/abstract/2/" alt="Abstract Picture 2">
        </div>
        <div class="g-span-col6" id="carousel-item-998" role="option">
          <img src="//lorempixel.com/640/480/abstract/7/" alt="Abstract Picture 7">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" id="carousel-item-999" role="option">
          <img src="//lorempixel.com/640/480/abstract/3/" alt="Abstract Picture 3">
        </div>
        <div class="g-span-col6" id="carousel-item-1000" role="option">
          <img src="//lorempixel.com/640/480/abstract/8/" alt="Abstract Picture 8">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" id="carousel-item-1001" role="option">
          <img src="//lorempixel.com/640/480/abstract/4/" alt="Abstract Picture 4">
        </div>
        <div class="g-span-col6" id="carousel-item-1002" role="option">
          <img src="//lorempixel.com/640/480/abstract/9/" alt="Abstract Picture 9">
        </div>
      </div>
      <div class="g-row" role="group" aria-hidden="true">
        <div class="g-span-col6" id="carousel-item-1003" role="option">
          <img src="//lorempixel.com/640/480/abstract/5/" alt="Abstract Picture 5">
        </div>
        <div class="g-span-col6" id="carousel-item-1004" role="option">
          <img src="//lorempixel.com/640/480/abstract/10/" alt="Abstract Picture 10">
        </div>
      </div>
    </div>
    <div class="controls ui-toolbar" role="toolbar">
      <span class="prev" aria-label="View previous panel" title="Previous panel" data-role="previous" aria-disabled="false" tabindex="0"></span>
      <span class="next" aria-label="View next panel" title="Next panel" data-role="next" aria-disabled="false" tabindex="0"></span>
      <div class="selectors" role="group">
        <span class="selector" title="Select item 1" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-995" aria-selected="true"></span>
        <span class="selector" title="Select item 2" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-996" aria-selected="false"></span>
        <span class="selector" title="Select item 3" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-997" aria-selected="false"></span>
        <span class="selector" title="Select item 4" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-998" aria-selected="false"></span>
        <span class="selector" title="Select item 5" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-999" aria-selected="false"></span>
        <span class="selector" title="Select item 6" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-1000" aria-selected="false"></span>
        <span class="selector" title="Select item 7" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-1001" aria-selected="false"></span>
        <span class="selector" title="Select item 8" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-1002" aria-selected="false"></span>
        <span class="selector" title="Select item 9" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-1003" aria-selected="false"></span>
        <span class="selector" title="Select item 10" role="presentation" tabindex="0" data-role="selector" aria-controls="carousel-item-1004" aria-selected="false"></span>
      </div>
    <span role="button" tabindex="0" data-role="play" aria-disabled="true"></span><span role="button" tabindex="0" data-role="pause" aria-disabled="false"></span></div>
  </div>

Alerts & NotificationsAlerts & Notifications

The alert and notification widgets are extensions of the message module and provide a way to display disposable messages to the user, in-line or growl-style.

AlertAlert

Class Aptent Taciti Sociosqu

Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.

Etiam At Risus Et

Nulla at nulla justo, eget luctus tortor. Nulla.


  <div class="msg msg-error ui-alert" data-widget="alert" role="alert"><span role="button" data-role="close" tabindex="0"></span>
    <h1 class="msg-title">Class Aptent Taciti Sociosqu</h1>
    <div class="msg-content">
      <p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie.</p>
    </div>
  </div>
  <div class="msg msg-warning ui-alert" data-widget="alert" data-sticky="true" role="alert"><span role="button" data-role="close" tabindex="0"></span>
    <h1 class="msg-title">Etiam At Risus Et</h1>
    <div class="msg-content">
      <p>Nulla at nulla justo, eget luctus tortor. Nulla.</p>
    </div>
  </div>
  <div class="msg msg-info ui-alert" data-widget="alert" data-sticky="true" role="alert"><span role="button" data-role="close" tabindex="0"></span>
    <h1 class="msg-title">Etiam At Risus Et</h1>
    <div class="msg-content">
      <p>Nulla at nulla justo, eget luctus tortor. Nulla.</p>
    </div>
  </div>
  <div class="msg msg-success ui-alert" data-widget="alert" data-sticky="true" role="alert"><span role="button" data-role="close" tabindex="0"></span>
    <h1 class="msg-title">Etiam At Risus Et</h1>
    <div class="msg-content">
      <p>Nulla at nulla justo, eget luctus tortor. Nulla.</p>
    </div>
  </div>
  <div class="msg msg-neutral ui-alert" data-widget="alert" data-sticky="true" role="alert"><span role="button" data-role="close" tabindex="0"></span>
    <h1 class="msg-title">Etiam At Risus Et</h1>
    <div class="msg-content">
      <p>Nulla at nulla justo, eget luctus tortor. Nulla.</p>
    </div>
  </div>

NotificationNotification

FilterFilter

Spoken languages per country.
Country	Spoken language
France	French
Germany	German
Switzerland	German, French, Italian


  <div data-widget="filter" class="ui-filterelements">
    <form class="form form-inline toolbar" action="#">
      <div class="form-group">
        <label class="toolbar-label" for="country">Country:</label>
        <div class="form-select toolbar-item">
          <select name="country" id="country">
            <option selected="selected" value="">Select a country</option>
            <option value="ch">Switzerland</option>
            <option value="fr">France</option>
            <option value="de">Germany</option>
          </select>
        </div>
      </div>
      <fieldset>
        <legend class="toolbar-label">Language:</legend>
        <input class="toolbar-item" type="checkbox" name="lang" id="fr" value="fr">
        <label class="toolbar-label" for="fr">Fr</label>
        <input class="toolbar-item" type="checkbox" name="lang" id="de" value="de">
        <label class="toolbar-label" for="de">De</label>
      </fieldset>
      <button class="toolbar-item btn" type="submit"><span class="icon icon-magnifier" role="presentation" hidden="hidden"></span>Filter</button>
      <button class="toolbar-item btn" type="reset"><span class="icon icon-refresh" role="presentation" hidden="hidden"></span>Reset</button>
    </form>
    <table class="table">
      <caption>Spoken languages per country.</caption>
      <thead>
        <tr>
          <th scope="col">Country</th>
          <th scope="col">Spoken language</th>
        </tr>
      </thead>
      <tbody>
        <tr data-filter-country="fr" data-filter-lang="fr">
          <th scope="row">France</th>
          <td>French</td>
        </tr>
        <tr data-filter-country="de" data-filter-lang="de">
          <th scope="row">Germany</th>
          <td>German</td>
        </tr>
        <tr data-filter-country="ch" data-filter-lang="de,fr,it">
          <th scope="row">Switzerland</th>
          <td>German, French, Italian</td>
        </tr>
      </tbody>
    </table>
  </div>

SortSort

ListList

sort

Mauris Iaculis Porttitor Posuere. Praesent
Lorem Ipsum Dolor Sit Amet
In Pellentesque Faucibus Vestibulum. Nulla At
Duis Aliquet Egestas Purus
Ut In Nulla Enim. Phasellus


  <div data-widget="sort" data-items="li" role="grid" aria-readonly="true" class="ui-sortelements">
    <div role="row">
      <span data-role="sort-trigger" role="columnheader">sort</span>
    </div>
    <ul role="row">
      <li data-role="sort-items" role="gridcell">
        <span>Mauris Iaculis Porttitor Posuere. Praesent</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>Lorem Ipsum Dolor Sit Amet</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>In Pellentesque Faucibus Vestibulum. Nulla At</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>Duis Aliquet Egestas Purus</span>
      </li>
      <li data-role="sort-items" role="gridcell">
        <span>Ut In Nulla Enim. Phasellus</span>
      </li>
    </ul>
  </div>

TableTable

Population, GDP and exchange rate of to countries.
Country	Population	Date	Exchange rate to USD	GDP
United States	317,227,000	December 9, 2013	1.00	14,991,300
China	1,361,520,000	December 9, 2013	0.16	7,203,784
Japan	127,290,000	November 1, 2013	0.0097	5,870,357
Germany	80,548,000	May 31, 2013	1.37	3,604,061
France	65,834,000	November 1, 2013	1.37	2,775,518
Total	1,952,419,000			34,445,020


  <table class="table ui-sortelements" data-widget="sort" role="grid" aria-readonly="true">
    <caption>Population, GDP and exchange rate of to countries.</caption>
    <thead>
      <tr role="row">
        <th scope="col" data-role="sort-trigger">Country</th>
        <th scope="col" data-type="numeric" data-role="sort-trigger">Population</th>
        <th scope="col" data-type="date" data-role="sort-trigger">Date</th>
        <th scope="col" data-type="numeric" data-role="sort-trigger">Exchange rate to USD</th>
        <th scope="col" data-type="numeric" data-role="sort-trigger">GDP</th>
      </tr>
    </thead>
    <tbody role="row">
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">United States</th>
        <td>317,227,000</td>
        <td>December 9, 2013</td>
        <td>1.00</td>
        <td>14,991,300</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">China</th>
        <td>1,361,520,000</td>
        <td>December 9, 2013</td>
        <td>0.16</td>
        <td>7,203,784</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">Japan</th>
        <td>127,290,000</td>
        <td>November 1, 2013</td>
        <td>0.0097</td>
        <td>5,870,357</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">Germany</th>
        <td>80,548,000</td>
        <td>May 31, 2013</td>
        <td>1.37</td>
        <td>3,604,061</td>
      </tr>
      <tr data-role="sort-items" role="gridcell">
        <th scope="row">France</th>
        <td>65,834,000</td>
        <td>November 1, 2013</td>
        <td>1.37</td>
        <td>2,775,518</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td>1,952,419,000</td>
        <td> </td>
        <td> </td>
        <td>34,445,020</td>
      </tr>
    </tfoot>
  </table>

MarkdownMarkdown

Title

Some label with toto.

item1
item2
item3


  <div data-format="markdown">
# Title
Some _label_ with **toto**.
* item1
* item2
* item3
  </div>

MathsMaths

Tex ExampleTex Example

$\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}$

$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$


  <div data-format="maths">
\[\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned} \]
  </div>
  <div data-format="maths">
    \[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]
  </div>

MathMLMathML

$x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$


  <div data-format="maths">
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <mi>x</mi><mo>=</mo>
        <mfrac>
          <mrow>
            <mo>−</mo><mi>b</mi><mo>±</mo>
            <msqrt>
              <mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow>
            </msqrt>
          </mrow>
          <mrow><mn>2</mn><mi>a</mi></mrow>
        </mfrac>
      </mrow>
    </math>
  </div>

AsciiMathAsciiMath

When $a != 0$ , there are two solutions to $ax^2 + bx + c = 0$ and they are

$x = (-b +- sqrt(b^2-4ac))/(2a) .$


  <div data-format="maths">
    <p>When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are</p>
    <p style="text-align:center">`x = (-b +- sqrt(b^2-4ac))/(2a) .`</p>
  </div>

Syntax HighlightingSyntax Highlighting

JavaJava

public class HelloWorld {
  public static void main(String [] args) {
    System.out.println("Hello World!");
  }
}


  <pre><code class="language-java">public class HelloWorld {
  public static void main(String [] args) {
    System.out.println("Hello World!");
  }
}</code></pre>

PythonPython

print "Hello World!"


  <pre><code class="language-python">print "Hello World!"</code></pre>

JavaScriptJavaScript

console.log("Hello World!");


  <pre><code class="language-javascript">console.log("Hello World!");</code></pre>

PHPPHP

<?php echo("Hello World!"); ?>


  <pre><code class="language-php"><?php echo("Hello World!"); ?></code></pre>

PerlPerl

#!/usr/bin/perl
print "Hello World!";


  <pre><code class="language-perl">#!/usr/bin/perl
print "Hello World!";</code></pre>

OtherOther

Syntax highlighting is provided by highlisght.js. See their documentation for more info.

Page templatesPage templates

Templates for the various page layouts are also available in the templates folder.

Do note that these template have the html head in-lined to allow previewing, but the developer should replace the head by including one of the auto-updating ones.

HTML template for various page types
Page type	Template file
Page type	English	French
Default content page	page.en.html	page.fr.html
Default neutral content page	page-neutral.en.html	page-neutral.fr.html
Minimal structure (header only)	minimal.en.html	minimal.fr.html
Default homepage	homepage.en.html	homepage.fr.html
Faculty homepage	homepage-faculty.en.html	homepage-faculty.fr.html
Portal homepage	homepage-portal.en.html	homepage-portal.fr.html
Global homepage	homepage-global.html

Accessibility links templateAccessibility links template

<nav class="a11y">
  <a class="nav-link visuallyhidden focusable" href="#content" accesskey="c">Skip to content</a>
  <a class="nav-link visuallyhidden focusable" href="#main-navigation" accesskey="n">Skip to navigation</a>
</nav>

<header id="epfl-header" class="site-header epfl" role="banner" aria-label="Global EPFL banner" data-ajax-header="https://static.epfl.ch/latest/includes/epfl-header.en.html">

  <div class="logo">
    <a href="//www.epfl.ch">
      <span class="visuallyhidden">EPFL Homepage</span>
      <object type="image/svg+xml" class="logo-object" data="//static.epfl.ch/latest/images/logo.svg">
        <img alt="EPFL Logo" width="95" height="46" src="//static.epfl.ch/latest/images/logo.png" />
      </object>
    </a>
  </div>

  <div class="search search-simple">
    <a href="#search" class="icon icon-magnifier" data-widget="toggle">
      <span class="visuallyhidden">Search</span>
    </a>
    <div id="search" role="search">
      <form id="search-form" class="form form-inline" action="//search.epfl.ch">
        <div class="form-input-group">
          <div class="form-input">
            <label class="visuallyhidden" for="search-query">Search query</label>
            <input id="search-query" class="search-query" type="text" placeholder="search" name="q" accesskey="4" />
          </div>
          <div class="form-input form-input-mini">
            <button class="themed search-submit" type="submit">
              <span class="icon icon-magnifier"></span><span class="visuallyhidden">Search</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

</header>

Website name templateWebsite name template

<h1 class="site-title" itemprop="isPartOf" itemscope itemtype="http://schema.org/CollectionPage">
  <a href="..." itemprop="url" accesskey="1">
    <span itemprop="name">
      <span class="visuallyhidden-xs visuallyhidden-xxs">The </span>
      <abbr title="A long description for the site acronym">site</abbr>
      <span class="visuallyhidden-xs visuallyhidden-xxs"> title</span>
    </span>
  </a>
</h1>

<nav class="nav nav-inline bcnav" itemprop="breadcrumb">
  <ol class="nav-list">
    <li class="nav-item" itemprop="sourceOrganization" itemscope itemtype="http://schema.org/CollegeOrUniversity">
      <a class="nav-link" href="http://www.epfl.ch" itemprop="url"><span itemprop="name">EPFL</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="...">Parent page</a>
    </li>
    <!-- ... -->
    <li class="nav-item nav-item-active">
      <a class="nav-link" href="...">Current page</a>
    </li>
  </ol>
</nav>

<nav class="nav nav-inline lang">
  <ul class="nav-list">
    <li class="nav-item nav-item-active">
      <a class="nav-link" href="..." lang="en"><span class="visuallyhidden-xxs visuallyhidden-xs">English</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="..." lang="fr" ref="alternate"><span class="visuallyhidden-xxs visuallyhidden-xs">français</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="..." lang="de" ref="alternate"><span class="visuallyhidden-xxs visuallyhidden-xs">Deutsch</span></a>
    </li>
    <!-- ... -->
  </ul>
</nav>

Tool bar templateTool bar template

<div id="tools" class="tools">
  <div role="toolbar" aria-label="Page tools">
    <span class="secondary-content" data-role="label">Share:</span>
  </div>
</div>

<div class="mainnav">
  <a id="main-navigation-label" class="hidden visible-xxs visible-xs" href="#main-navigation" data-widget="collapse">Main navigation</a>
  <nav id="main-navigation" class="nav nav-block nav-horizontal themed visible-s visible-m visible-l visible-xl visible-xxl" aria-labelledby="main-navigation-label">
    <ul class="nav-list" data-widget="menubar">
      <li class="nav-item hidden-xxs hidden-xs">
        <a class="nav-link" href="/">
          <span class="hidden-xxs hidden-xs icon icon-inline icon-big icon-home" role="presentation" hidden="hidden"></span>
          <span class="hidden-s hidden-m hidden-l hidden-xl hidden-xxl">Homepage</span>
        </a>
      </li>
      <li class="nav-item">
        <span class="nav-link" data-widget="collapse">Menu 1 [dropdown]</span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 1.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 1.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="...">Menu 2 [combo]</a>
        <span data-widget="collapse"></span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 2.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 2.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="...">Menu 3 [combo]</a>
        <span data-widget="collapse"></span>
        <ul class="nav-list nav-vertical" data-widget="menu">
          <li class="nav-item">
            <a class="nav-link" href="...">Menu 3.1</a>
            <ul class="nav-list">
              <li class="nav-item">
                <a class="nav-link" href="...">Menu 3.1.1</a>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </nav>
</div>

<div class="localnav panel">
  <nav id="secondary-navigation" class="nav nav-block nav-vertical themed">
    <ul class="nav-list" data-widget="tree">
      <li class="nav-item">
        <a class="nav-link" href="...">Level 1 item</a>
        <ul class="nav-list" role="group">
          <li class="nav-item">
            <a class="nav-link" href="...">Level 2 item</a>
            <ul class="nav-list" role="group">
              <li class="nav-item nav-item-active">
                <a class="nav-link" href="...">Level 3 item</a>
                <ul class="nav-list" role="group">
                  <li class="nav-item">
                    <a class="nav-link" href="...">Level 4 item</a>
                    <ul class="nav-list" role="group">
                      <li class="nav-item">
                        <a class="nav-link" href="...">Level 5 item</a>
                      </li>
                      <!-- ... -->
                    </ul>
                  </li>
                  <!-- ... -->
                </ul>
              </li>
              <!-- ... -->
            </ul>
          </li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </nav>
</div>

Article listArticle list

Based on the News Article Schema and the Media module.

Education

Finally GeoBeer makes it to French-speaking Switzerland…

13.03.14 — Geographic Information Systems Laboratory — GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them. Read the whole article

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

13.03.14 — NCCR-Robotics — Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a... Read the whole article

Research

IDEAS Seminar | 14 April 2014

13.03.14 — Design Architecture and Sustainability — Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April... Read the whole article


  <div class="media-list news-list">
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_4">
          <a class="media-visual" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/">
            <img itemprop="image" src="//actu.epfl.ch/image/21260/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4">
          <span class="badge" itemprop="keywords">Education</span>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Finally GeoBeer makes it to French-speaking Switzerland…">Finally GeoBeer makes it to French-speaking Switzerland…</a></h2>
          <div class="media-content">
            <span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">Geographic Information Systems Laboratory</span> — </span>
            <span itemprop="description">GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them.</span>
            <a class="more" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Read more about 'Finally GeoBeer makes it to French-speaking Switzerland…'"><span class="visuallyhidden">Read the whole article</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_4">
          <a class="media-visual" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/">
            <img itemprop="image" src="//actu.epfl.ch/image/21261/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4">
          <span class="badge" itemprop="keywords">EPFL</span>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Lifehand 2 prosthetic grips and senses like a real hand">Lifehand 2 prosthetic grips and senses like a real hand</a></h2>
          <div class="media-content">
            <span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">NCCR-Robotics</span> — </span>
            <span itemprop="description">Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a...</span>
            <a class="more" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Read more about 'Lifehand 2 prosthetic grips and senses like a real hand'"><span class="visuallyhidden">Read the whole article</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_4">
          <a class="media-visual" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/">
            <img itemprop="image" src="//actu.epfl.ch/image/21040/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4">
          <span class="badge" itemprop="keywords">Research</span>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="IDEAS Seminar | 14 April 2014">IDEAS Seminar | 14 April 2014</a></h2>
          <div class="media-content">
            <span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">Design Architecture and Sustainability</span> — </span>
            <span itemprop="description">Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April...</span>
            <a class="more" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="Read more about 'IDEAS Seminar | 14 April 2014'"><span class="visuallyhidden">Read the whole article</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>

Fixed height articles (auto-truncate)Fixed height articles (auto-truncate)

Education

Finally GeoBeer makes it to French-speaking Switzerland…

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

Research

IDEAS Seminar | 14 April 2014


  <div class="media-list news-list">
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_4 g-span-row1">
          <a class="media-visual" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/">
            <span class="badge" itemprop="keywords">Education</span>
            <img itemprop="image" src="//actu.epfl.ch/image/21260/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Finally GeoBeer makes it to French-speaking Switzerland…">Finally GeoBeer makes it to French-speaking Switzerland…</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">Geographic Information Systems Laboratory</span> — </span><span itemprop="description">GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them.</span><a class="more" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Read more about 'Finally GeoBeer makes it to French-speaking Switzerland…'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_4 g-span-row1">
          <a class="media-visual" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/">
            <span class="badge" itemprop="keywords">EPFL</span>
            <img itemprop="image" src="//actu.epfl.ch/image/21261/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Lifehand 2 prosthetic grips and senses like a real hand">Lifehand 2 prosthetic grips and senses like a real hand</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">NCCR-Robotics</span> — </span><span itemprop="description">Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a...</span><a class="more" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Read more about 'Lifehand 2 prosthetic grips and senses like a real hand'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_4 g-span-row1">
          <a class="media-visual" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/">
            <span class="badge" itemprop="keywords">Research</span>
            <img itemprop="image" src="//actu.epfl.ch/image/21040/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="IDEAS Seminar | 14 April 2014">IDEAS Seminar | 14 April 2014</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">Design Architecture and Sustainability</span> — </span><span itemprop="description">Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April...</span><a class="more" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="Read more about 'IDEAS Seminar | 14 April 2014'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
  </div>

Paginated news listPaginated news list

Education

Finally GeoBeer makes it to French-speaking Switzerland…

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

Research

IDEAS Seminar | 14 April 2014


  <nav class="nav nav-pagination" aria-label="Pagination" aria-describedby="pagination-details">
    <span class="secondary-content right" id="pagination-details">
      <span class="visuallyhidden">Results </span>
      <span>131</span>
      <span role="presentation">–</span><span class="visuallyhidden"> to </span>
      <span>133</span>
      <span role="presentation">/</span><span class="visuallyhidden">out of</span>
      <span>995 results</span>
    </span>
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>1</a>
      </li>
      <li class="nav-item">…</li>
      <li class="nav-item">
        <a class="nav-link" href="#" rel="prev"><span class="visuallyhidden">Previous: </span><span class="visuallyhidden">Page </span>12</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#"><span class="visuallyhidden">Currently on: </span><span class="visuallyhidden">Page </span>13</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" rel="next"><span class="visuallyhidden">Next: </span><span class="visuallyhidden">Page </span>14</a>
      </li>
      <li class="nav-item" rel="next">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>15</a>
      </li>
      <li class="nav-item">…</li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>99</a>
      </li>
    </ul>
  </nav>
  <div class="media-list media-list-bordered news-list" role="list">
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle" role="listitem" aria-setsize="995" aria-posinset="131">
      <div class="g-row">
        <div class="g-span-1_4 g-span-row1">
          <a class="media-visual" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/">
            <span class="badge" itemprop="keywords">Education</span>
            <img itemprop="image" src="//actu.epfl.ch/image/21260/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Finally GeoBeer makes it to French-speaking Switzerland…">Finally GeoBeer makes it to French-speaking Switzerland…</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">Geographic Information Systems Laboratory</span> — </span><span itemprop="description">GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them.</span><a class="more" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Read more about 'Finally GeoBeer makes it to French-speaking Switzerland…'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle" role="listitem" aria-setsize="995" aria-posinset="132">
      <div class="g-row">
        <div class="g-span-1_4 g-span-row1">
          <a class="media-visual" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/">
            <span class="badge" itemprop="keywords">EPFL</span>
            <img itemprop="image" src="//actu.epfl.ch/image/21261/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Lifehand 2 prosthetic grips and senses like a real hand">Lifehand 2 prosthetic grips and senses like a real hand</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">NCCR-Robotics</span> — </span><span itemprop="description">Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a...</span><a class="more" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Read more about 'Lifehand 2 prosthetic grips and senses like a real hand'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle" role="listitem" aria-setsize="995" aria-posinset="133">
      <div class="g-row">
        <div class="g-span-1_4 g-span-row1">
          <a class="media-visual" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/">
            <span class="badge" itemprop="keywords">Research</span>
            <img itemprop="image" src="//actu.epfl.ch/image/21040/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-3_4 g-span-row1">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="IDEAS Seminar | 14 April 2014">IDEAS Seminar | 14 April 2014</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — <span itemprop="sourceOrganization">Design Architecture and Sustainability</span> — </span><span itemprop="description">Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April...</span><a class="more" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="Read more about 'IDEAS Seminar | 14 April 2014'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
  </div>
  <nav class="nav nav-pagination" aria-label="Pagination" aria-describedby="pagination-details_1">
    <span class="secondary-content right" id="pagination-details_1">
      <span class="visuallyhidden">Results </span>
      <span>131</span>
      <span role="presentation">–</span><span class="visuallyhidden"> to </span>
      <span>140</span>
      <span role="presentation">/</span><span class="visuallyhidden">out of</span>
      <span>995 results</span>
    </span>
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>1</a>
      </li>
      <li class="nav-item">…</li>
      <li class="nav-item">
        <a class="nav-link" href="#" rel="prev"><span class="visuallyhidden">Previous: </span><span class="visuallyhidden">Page </span>12</a>
      </li>
      <li class="nav-item nav-item-active">
        <a class="nav-link" href="#"><span class="visuallyhidden">Currently on: </span><span class="visuallyhidden">Page </span>13</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" rel="next"><span class="visuallyhidden">Next: </span><span class="visuallyhidden">Page </span>14</a>
      </li>
      <li class="nav-item" rel="next">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>15</a>
      </li>
      <li class="nav-item">…</li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="visuallyhidden">Page </span>99</a>
      </li>
    </ul>
  </nav>

Minimal article listMinimal article list

Education

Finally GeoBeer makes it to French-speaking Switzerland…

13.03.14

EPFL

Lifehand 2 prosthetic grips and senses like a real hand

13.03.14

Research

IDEAS Seminar | 14 April 2014

13.03.14


  <div class="media-list news-list g-span-1_2">
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_3 g-span-s-1_3 g-span-xs-1_3">
          <a class="media-visual" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/">
            <img itemprop="image" src="//actu.epfl.ch/image/21260/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-2_3 g-span-s-2_3 g-span-xs-2_3">
          <span class="badge badge-quiet" itemprop="keywords">Education</span>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Finally GeoBeer makes it to French-speaking Switzerland…">Finally GeoBeer makes it to French-speaking Switzerland…</a></h2>
          <div class="media-content">
            <span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14</span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_3 g-span-s-1_3 g-span-xs-1_3">
          <a class="media-visual" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/">
            <img itemprop="image" src="//actu.epfl.ch/image/21261/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-2_3 g-span-s-2_3 g-span-xs-2_3">
          <span class="badge badge-quiet" itemprop="keywords">EPFL</span>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Lifehand 2 prosthetic grips and senses like a real hand">Lifehand 2 prosthetic grips and senses like a real hand</a></h2>
          <div class="media-content">
            <span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14</span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_3 g-span-s-1_3 g-span-xs-1_3">
          <a class="media-visual" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/">
            <img itemprop="image" src="//actu.epfl.ch/image/21040/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-2_3 g-span-s-2_3 g-span-xs-2_3">
          <span class="badge badge-quiet" itemprop="keywords">Research</span>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="IDEAS Seminar | 14 April 2014">IDEAS Seminar | 14 April 2014</a></h2>
          <div class="media-content">
            <span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14</span>
          </div>
        </div>
      </div>
    </div>
  </div>

News list with emphasized first itemNews list with emphasized first item

Finally GeoBeer makes it to French-speaking Switzerland…

13.03.14 — GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them.Read the whole article

Lifehand 2 prosthetic grips and senses like a real hand

13.03.14 — Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a...Read the whole article

IDEAS Seminar | 14 April 2014

13.03.14 — Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April...Read the whole article

Ateliers Lego pour de futurs ingénieurs

13.03.14 — Playing with Lego robots and dreaming to become a next generation engineerRead the whole article


  <div class="media-list media-list-jumbo news-list">
    <div class="media g-span-1_2" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_1">
          <a class="media-visual" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/">
            <img itemprop="image" src="//actu.epfl.ch/image/21260/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-1_1">
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Finally GeoBeer makes it to French-speaking Switzerland…">Finally GeoBeer makes it to French-speaking Switzerland…</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them.</span><a class="more" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Read more about 'Finally GeoBeer makes it to French-speaking Switzerland…'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_2">
          <a class="media-visual" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/">
            <img itemprop="image" src="//actu.epfl.ch/image/21261/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Lifehand 2 prosthetic grips and senses like a real hand">Lifehand 2 prosthetic grips and senses like a real hand</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a...</span><a class="more" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Read more about 'Lifehand 2 prosthetic grips and senses like a real hand'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_2">
          <a class="media-visual" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/">
            <img itemprop="image" src="//actu.epfl.ch/image/21040/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="IDEAS Seminar | 14 April 2014">IDEAS Seminar | 14 April 2014</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April...</span><a class="more" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="Read more about 'IDEAS Seminar | 14 April 2014'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
    <div class="media g-span-1_2" itemscope="" itemtype="http://schema.org/NewsArticle">
      <div class="g-row">
        <div class="g-span-1_2">
          <a class="media-visual" href="http://actu.epfl.ch/news/ateliers-lego-pour-de-futurs-ingenieurs-2/">
            <img itemprop="image" src="http://actu.epfl.ch/image/22485/160x90.jpg" alt="Thumbnail">
          </a>
        </div>
        <div class="g-span-1_2">
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="http://actu.epfl.ch/news/ateliers-lego-pour-de-futurs-ingenieurs-2/" title="Ateliers Lego pour de futurs ingénieurs">Ateliers Lego pour de futurs ingénieurs</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">Playing with Lego robots and dreaming to become a next generation engineer</span><a class="more" href="http://actu.epfl.ch/news/ateliers-lego-pour-de-futurs-ingenieurs-2/" title="Read more about 'Ateliers Lego pour de futurs ingénieurs'"><span class="visuallyhidden">Read the whole article</span></a></div>
        </div>
      </div>
    </div>
  </div>

And on a single column:

Finally GeoBeer makes it to French-speaking Switzerland…

Lifehand 2 prosthetic grips and senses like a real hand

IDEAS Seminar | 14 April 2014

Ateliers Lego pour de futurs ingénieurs

13.03.14 — Playing with Lego robots and dreaming to become a next generation engineerRead the whole article


  <div class="g-span-1_2">
    <div class="media-list media-list-jumbo news-list">
      <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
        <div class="g-row">
          <div class="g-span-1_1">
            <a class="media-visual" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/">
              <img itemprop="image" src="//actu.epfl.ch/image/21260/160x90.jpg" alt="Thumbnail">
            </a>
          </div>
          <div class="g-span-1_1">
            <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Finally GeoBeer makes it to French-speaking Switzerland…">Finally GeoBeer makes it to French-speaking Switzerland…</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">GeoBeer is a quarterly meeting of people interested in geography, GIS, cartography and the latest technologies. The goal is to promote GEO ideas and discussions about them.</span><a class="more" href="//actu.epfl.ch/news/finally-geobeer-makes-it-to-french-speaking-switze/" title="Read more about 'Finally GeoBeer makes it to French-speaking Switzerland…'"><span class="visuallyhidden">Read the whole article</span></a></div>
          </div>
        </div>
      </div>
      <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
        <div class="g-row">
          <div class="g-span-1_2">
            <a class="media-visual" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/">
              <img itemprop="image" src="//actu.epfl.ch/image/21261/160x90.jpg" alt="Thumbnail">
            </a>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Lifehand 2 prosthetic grips and senses like a real hand">Lifehand 2 prosthetic grips and senses like a real hand</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">Roboticists and doctors working in Switzerland and Italy have come together to develop a bionic hand that provides sensory feedback in real time, meaning that an amputee can be given back the ability to feel and modify grip like someone with a “real” hand. Using a...</span><a class="more" href="//actu.epfl.ch/news/lifehand-2-prosthetic-grips-and-senses-like-a-real/" title="Read more about 'Lifehand 2 prosthetic grips and senses like a real hand'"><span class="visuallyhidden">Read the whole article</span></a></div>
          </div>
        </div>
      </div>
      <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
        <div class="g-row">
          <div class="g-span-1_2">
            <a class="media-visual" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/">
              <img itemprop="image" src="//actu.epfl.ch/image/21040/160x90.jpg" alt="Thumbnail">
            </a>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="IDEAS Seminar | 14 April 2014">IDEAS Seminar | 14 April 2014</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">Max DOELLING will be the speaker of the next IDEAS Seminar, entitled "Exploring performance cognition: spatial thermal and daylight data mapping in conceptual architectural design scenarios". It will take place on Monday 14 April...</span><a class="more" href="//actu.epfl.ch/news/ideas-seminar-14-april-2014/" title="Read more about 'IDEAS Seminar | 14 April 2014'"><span class="visuallyhidden">Read the whole article</span></a></div>
          </div>
        </div>
      </div>
      <div class="media" itemscope="" itemtype="http://schema.org/NewsArticle">
        <div class="g-row">
          <div class="g-span-1_2">
            <a class="media-visual" href="http://actu.epfl.ch/news/ateliers-lego-pour-de-futurs-ingenieurs-2/">
              <img itemprop="image" src="http://actu.epfl.ch/image/22485/160x90.jpg" alt="Thumbnail">
            </a>
          </div>
          <div class="g-span-1_2">
            <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="http://actu.epfl.ch/news/ateliers-lego-pour-de-futurs-ingenieurs-2/" title="Ateliers Lego pour de futurs ingénieurs">Ateliers Lego pour de futurs ingénieurs</a></h2>
            <div class="media-content" data-ellipsis="html" data-keep="more"><span class="media-info"><meta itemprop="datePublished" content="2014-03-13">13.03.14 — </span><span itemprop="description">Playing with Lego robots and dreaming to become a next generation engineer</span><a class="more" href="http://actu.epfl.ch/news/ateliers-lego-pour-de-futurs-ingenieurs-2/" title="Read more about 'Ateliers Lego pour de futurs ingénieurs'"><span class="visuallyhidden">Read the whole article</span></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>

Course listCourse list

Based on the CreativeWork Schema, the LRMI specification and the Media module.

Information, Computation, Communication

The course is structured into 3 modules. Module 1 present the concepts of algorithms and representation of information. Module 2 focuses on sampling and compression. Module 3 offer an overview of systems: CPU, memory, communication and security. View details for course "Information, Computation, Communication"

Propedeutics > Computer Science
Propedeutics > Communication Systems

Fall semester

French

x: 3

L: 2h

E: 1h

Advanced algorithms

A first graduate course in algorithms, this course assumes minimal background, but moves rapidly. The objective is to learn the main techniques of algorithm analysis and design, with an emphasis on randomization, while building a repertory of basic algorithmic solutions to problems in many domains. View details for course "Advanced algorithms"

Master cycle > Computational science and Engineering
Master cycle > Communication Systems
Master cycle > Computer Science
Minor > Information security minor

Fall semester

English

x: 7

L: 4h

E: 2h

P: 1h

Quantum optics and quantum information

Fully quantum theory of the light-matter interaction. Study of interacting quantum systems. Introduction to a few modern problems in quantum optics. Introduction to quantum information. Quantum cryptography and quantum computing. View details for course "Quantum optics and quantum information"

Master cycle > Applied Physics
Master cycle > Physics - master program

Spring semester

English

x: 4

L: 2h

E: 2h


  <div class="media-list course-list">
    <div class="media" itemscope="" itemtype="http://schema.org/CreativeWork">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-visual">
            <img src="//lorempixel.com/128/128/abstract/1/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-3_4">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="http://edu.epfl.ch/coursebook/en/information-computation-communication-CS-110-E" title="Information, Computation, Communication">Information, Computation, Communication</a></h2>
          <div class="media-content">
            <span itemprop="description">The course is structured into 3 modules. Module 1 present the concepts of algorithms and representation of information. Module 2 focuses on sampling and compression. Module 3 offer an overview of systems: CPU, memory, communication and security.</span>
            <a class="more" href="http://edu.epfl.ch/coursebook/en/information-computation-communication-CS-110-E"><span class="visuallyhidden">View details for course "Information, Computation, Communication"</span></a>
            <ul class="list-unstyled secondary-content">
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Propedeutics > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/propedeutics/computer-science">Computer Science</a></span>
              </li>
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Propedeutics > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/propedeutics/communication-systems">Communication Systems</a></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-content">
            <p>Fall semester</p>
            <div class="g-row">
              <div class="g-span-1_2">
                <p><meta itemprop="inLanguage" content="fr"><span class="icon sprite-flag-fr" role="presentation" hidden="hidden"></span><span class="visuallyhidden">French</span></p>
                <p><meta itemprop="timeRequired" content="T90H"><abbr title="Credits (1 credit averages a 30-hour workload)">x</abbr>: 3</p>
              </div>
              <div class="g-span-1_2">
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Lecture for 'Information, Computation, Communication'">
                  <meta itemprop="timeRequired" content="R14/2013-09/PT2H/2013-12">
                  <abbr title="Lecture (hours per week x 14 weeks)">L</abbr>: 2h
                </p>
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Exercices for 'Information, Computation, Communication'">
                  <meta itemprop="timeRequired" content="R14/2013-09/PT1H/2013-12">
                  <abbr title="Exercises (hours per week x 14 weeks)">E</abbr>: 1h
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/CreativeWork">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-visual">
            <img src="//lorempixel.com/128/128/abstract/2/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-3_4">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="http://edu.epfl.ch/coursebook/en/advanced-algorithms-CS-450" title="Advanced algorithms">Advanced algorithms</a></h2>
          <div class="media-content">
            <span itemprop="description">A first graduate course in algorithms, this course assumes minimal background, but moves rapidly. The objective is to learn the main techniques of algorithm analysis and design, with an emphasis on randomization, while building a repertory of basic algorithmic solutions to problems in many domains.</span>
            <a class="more" href="http://edu.epfl.ch/coursebook/en/advanced-algorithms-CS-450"><span class="visuallyhidden">View details for course "Advanced algorithms"</span></a>
            <ul class="list-unstyled secondary-content">
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Master cycle > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/master/computational-science-and-engineering">Computational science and Engineering</a></span>
              </li>
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Master cycle > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/master/communication-systems-master-program">Communication Systems</a></span>
              </li>
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Master cycle > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/master/computer-science">Computer Science</a></span>
              </li>
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Minor > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/minor/information-security">Information security minor</a></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-content">
            <p>Fall semester</p>
            <div class="g-row">
              <div class="g-span-1_2">
                <p><meta itemprop="inLanguage" content="en"><span class="icon sprite-flag-en" role="presentation" hidden="hidden"></span><span class="visuallyhidden">English</span></p>
                <p><meta itemprop="timeRequired" content="T210H"><abbr title="Credits (1 credit averages a 30-hour workload)">x</abbr>: 7</p>
              </div>
              <div class="g-span-1_2">
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Lecture for 'Advanced algorithms'">
                  <meta itemprop="timeRequired" content="R14/2013-09/PT4H/2013-12">
                  <abbr title="Lecture (hours per week x 14 weeks)">L</abbr>: 4h
                </p>
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Exercices for 'Advanced algorithms'">
                  <meta itemprop="timeRequired" content="R14/2013-09/PT2H/2013-12">
                  <abbr title="Exercises (hours per week x 14 weeks)">E</abbr>: 2h
                </p>
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Project for 'Advanced algorithms'">
                  <meta itemprop="timeRequired" content="R14/2013-09/PT1H/2013-12">
                  <abbr title="Project (hours per week x 14 weeks)">P</abbr>: 1h
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/CreativeWork">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-visual">
            <img src="//lorempixel.com/128/128/abstract/3/" alt="Abstract image">
          </div>
        </div>
        <div class="g-span-3_4">
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="http://edu.epfl.ch/coursebook/en/quantum-optics-and-quantum-information-PHYS-454" title="Quantum optics and quantum information">Quantum optics and quantum information</a></h2>
          <div class="media-content">
            <span itemprop="description">Fully quantum theory of the light-matter interaction. Study of interacting quantum systems. Introduction to a few modern problems in quantum optics. Introduction to quantum information. Quantum cryptography and quantum computing.</span>
            <a class="more" href="http://edu.epfl.ch/coursebook/en/quantum-optics-and-quantum-information-PHYS-454"><span class="visuallyhidden">View details for course "Quantum optics and quantum information"</span></a>
            <ul class="list-unstyled secondary-content">
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Master cycle > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/master/applied-physics">Applied Physics</a></span>
              </li>
              <li itemprop="educationalAlignment" itemscope="" itemtype="http://schema.org/AlignmentObject">
                <meta itemprop="alignmentType" content="educationLevel">
                <span itemprop="targetName">Master cycle > <a itemprop="targetUrl" href="http://edu.epfl.ch/studyplan/en/propedeutics/communication-systems">Physics - master program</a></span>
              </li>
            </ul>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-content">
            <p>Spring semester</p>
            <div class="g-row">
              <div class="g-span-1_2">
                <p><meta itemprop="inLanguage" content="en"><span class="icon sprite-flag-en" role="presentation" hidden="hidden"></span><span class="visuallyhidden">English</span></p>
                <p><meta itemprop="timeRequired" content="T120H"><abbr title="Credits (1 credit averages a 30-hour workload)">x</abbr>: 4</p>
              </div>
              <div class="g-span-1_2">
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Lecture for 'Quantum optics and quantum information'">
                  <meta itemprop="timeRequired" content="R14/2014-02/PT2H/2014-05">
                  <abbr title="Lecture (hours per week x 14 weeks)">L</abbr>: 2h
                </p>
                <p itemprop="mentions" itemscope="" itemtype="http://schema.org/CreativeWork">
                  <meta itemprop="name" content="Exercices for 'Quantum optics and quantum information'">
                  <meta itemprop="timeRequired" content="R14/2014-02/PT2H/2014-05">
                  <abbr title="Exercises (hours per week x 14 weeks)">E</abbr>: 2h
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Event listEvent list

Based on the Event Schema and the Media module.

13mar

10:00, MEB1 B10

Networked Cyber-Physical Systems for a Smarter World

Cyber Physical Systems (CPS) are smart networked systems with embedded sensors, processors and actuators that are designed to sense and ... Read more about "Networked Cyber-Physical Systems for a Smarter World"

By Prof. Jose L. Ayala, Computense University of Madrid

01oct

30jun

Allday event, Rolex Learning Center - Patios extérieurs

ERBRA - an artistic performance by Anne Rochat

Throughout the 2013-2014 academic year, artist Anne Rochat presents her art on EPFL’s campus. A hybrid orchard is created… Read more about "ERBRA - an artistic performance by Anne Rochat"

By Anne Rochat, artist

30sep

15jun

Allday event

Certificate of Advanced Studies in Management of Development Projects

The Cooperation & Development Center (CODEV) at EPFL is pleased to announce the Call for Applications for the Certificate of Advanced… Read more about "Certificate of Advanced Studies in Management of Development Projects"


  <div class="media-list event-list">
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-ribbon local-bg-color1">
            <meta itemprop="startDate" content="2014-03-13T10:00">
            <span>13<small>mar</small></span>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-visual">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//memento.epfl.ch/image/2826/112x112.jpg" alt="Thumbnail">
            </div>
          </div>
        </div>
        <div class="g-span-1_2">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/24408/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> 10:00</a>,
            <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
              <a itemprop="map" href="http://plan.epfl.ch/?room=ME%20B1%20B10">
                <span itemprop="name">MEB1 B10</span>
              </a>
            </span>
          </small>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/networked-cyber-physical-systems-for-a-smarter-wor/" title="Networked Cyber-Physical Systems for a Smarter World">Networked Cyber-Physical Systems for a Smarter World</a></h2>
          <div class="media-content">
            <span itemprop="description">Cyber Physical Systems (CPS) are smart networked systems with embedded sensors, processors and actuators that are designed to sense and ...</span>
            <a class="more" href="//memento.epfl.ch/event/networked-cyber-physical-systems-for-a-smarter-wor/"><span class="visuallyhidden">Read more about "Networked Cyber-Physical Systems for a Smarter World"</span></a>
          </div>
        </div>
        <div class="g-span-1_4">
          <div class="media-content">
            By <span itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><span itemprop="honorificPrefix">Prof.</span> <span itemprop="name">Jose L. Ayala</span>, <span itemprop="affiliation">Computense University of Madrid</span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-ribbon local-bg-color1">
            <meta itemprop="startDate" content="2013-10-01">
            <span>01<small>oct</small></span>
            <hr>
            <meta itemprop="endDate" content="2014-06-30">
            <span>30<small>jun</small></span>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-visual">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//memento.epfl.ch/image/2465/112x112.jpg" alt="Thumbnail">
            </div>
          </div>
        </div>
        <div class="g-span-1_2">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/22349/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> <span class="visuallyhidden">Allday event</span></a>,
            <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
              <a itemprop="map" href="http://plan.epfl.ch/?zoom=18&recenter_y=5863769.98999&recenter_x=731089.2872&layerNodes=fonds,batiments,labels,information,parkings_publics,arrets_metro&floor=0&q=rolex">
                <span itemprop="name">Rolex Learning Center - Patios extérieurs</span>
              </a>
            </span>
          </small>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/erbra-an-artistic-performance-by-anne-rochat-3/" title="ERBRA - an artistic performance by Anne Rochat">ERBRA - an artistic performance by Anne Rochat</a></h2>
          <div class="media-content">
            <span itemprop="description">Throughout the 2013-2014 academic year, artist <a href="http://annerochat.tumblr.com/">Anne Rochat</a> presents her art on EPFL’s campus. A hybrid orchard is created…</span>
            <a class="more" href="//memento.epfl.ch/event/erbra-an-artistic-performance-by-anne-rochat-3/"><span class="visuallyhidden">Read more about "ERBRA - an artistic performance by Anne Rochat"</span></a>
          </div>
        </div>
        <div class="g-span-1_4">
          <div class="media-content">
            By <span itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name">Anne Rochat</span>, <span itemprop="jobTitle">artist</span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-ribbon local-bg-color1">
            <meta itemprop="startDate" content="2013-09-30">
            <span>30<small>sep</small></span>
            <hr>
            <meta itemprop="endDate" content="2014-06-15">
            <span>15<small>jun</small></span>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-visual">
            <span class="media-banner badge"><meta itemprop="eventStatus" content="http://schema.org/EventCancelled">Cancelled</span>
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//memento.epfl.ch/image/2715/112x112.jpg" alt="Thumbnail">
            </div>
          </div>
        </div>
        <div class="g-span-1_2">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/14101/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> <span class="visuallyhidden">Allday event</span></a>
          </small>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/certificate-of-advanced-studies-in-management-of-d/" title="Certificate of Advanced Studies in Management of Development Projects">Certificate of Advanced Studies in Management of Development Projects</a></h2>
          <div class="media-content">
            <span itemprop="description">The Cooperation & Development Center (CODEV) at EPFL is pleased to announce the Call for Applications for the Certificate of Advanced…</span>
            <a class="more" href="//memento.epfl.ch/event/certificate-of-advanced-studies-in-management-of-d/"><span class="visuallyhidden">Read more about "Certificate of Advanced Studies in Management of Development Projects"</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>

Event-list (auto-truncated)Event-list (auto-truncated)

13mar

10:00, MEB1 B10

Networked Cyber-Physical Systems for a Smarter World

Cyber Physical Systems (CPS) are smart networked systems with embedded sensors, processors and actuators that are designed to sense and interact with the physical world (including the human users), and support real-time, guaranteed performance in safety-critical applicationsRead more about "Networked Cyber-Physical Systems for a Smarter World"

By Prof.Jose L. Ayala, Computense University of Madrid

01oct

30jun

Allday event, Rolex Learning Center - Patios extérieurs

ERBRA - an artistic performance by Anne Rochat

Throughout the 2013-2014 academic year, artist Anne Rochat presents her art on EPFL’s campus. A hybrid orchard is created through the fusion of different kinds of woods. Potted, it becomes a nomad.Read more about "ERBRA - an artistic performance by Anne Rochat"

By Anne Rochat, artist

30sep

15jun

Allday event

Certificate of Advanced Studies in Management of Development Projects

The Cooperation & Development Center (CODEV) at EPFL is pleased to announce the Call for Applications for the Certificate of Advanced Studies in Management of Development Projects (MaDePro).Read more about "Certificate of Advanced Studies in Management of Development Projects"


  <div class="media-list event-list">
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-ribbon local-bg-color1">
            <meta itemprop="startDate" content="2014-03-13T10:00">
            <span>13<small>mar</small></span>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-visual">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//memento.epfl.ch/image/2826/112x112.jpg" alt="Thumbnail">
            </div>
          </div>
        </div>
        <div class="g-span-1_2 g-span-row1">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/24408/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> 10:00</a>,
            <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
              <a itemprop="map" href="http://plan.epfl.ch/?room=ME%20B1%20B10">
                <span itemprop="name">MEB1 B10</span>
              </a>
            </span>
          </small>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/networked-cyber-physical-systems-for-a-smarter-wor/" title="Networked Cyber-Physical Systems for a Smarter World">Networked Cyber-Physical Systems for a Smarter World</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span itemprop="description">Cyber Physical Systems (CPS) are smart networked systems with embedded sensors, processors and actuators that are designed to sense and interact with the physical world (including the human users), and support real-time, guaranteed performance in safety-critical applications</span><a class="more" href="//memento.epfl.ch/event/networked-cyber-physical-systems-for-a-smarter-wor/"><span class="visuallyhidden">Read more about "Networked Cyber-Physical Systems for a Smarter World"</span></a></div>
        </div>
        <div class="g-span-1_4 g-span-row1">
          <div class="media-content" data-ellipsis="html">By <span itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><span itemprop="honorificPrefix">Prof.</span><span itemprop="name">Jose L. Ayala</span>, <span itemprop="affiliation">Computense University of Madrid</span></span></div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-ribbon local-bg-color1">
            <meta itemprop="startDate" content="2013-10-01">
            <span>01<small>oct</small></span>
            <hr>
            <meta itemprop="endDate" content="2014-06-30">
            <span>30<small>jun</small></span>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-visual">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//memento.epfl.ch/image/2465/112x112.jpg" alt="Thumbnail">
            </div>
          </div>
        </div>
        <div class="g-span-1_2 g-span-row1">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/22349/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> <span class="visuallyhidden">Allday event</span></a>,
            <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
              <a itemprop="map" href="http://plan.epfl.ch/?zoom=18&recenter_y=5863769.98999&recenter_x=731089.2872&layerNodes=fonds,batiments,labels,information,parkings_publics,arrets_metro&floor=0&q=rolex">
                <span itemprop="name">Rolex Learning Center - Patios extérieurs</span>
              </a>
            </span>
          </small>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/erbra-an-artistic-performance-by-anne-rochat-3/" title="ERBRA - an artistic performance by Anne Rochat">ERBRA - an artistic performance by Anne Rochat</a></h2>
          <div class="media-content" data-ellipsis="html" data-keep="more"><span itemprop="description">Throughout the 2013-2014 academic year, artist <a href="http://annerochat.tumblr.com/">Anne Rochat</a> presents her art on EPFL’s campus. A hybrid orchard is created through the fusion of different kinds of woods. Potted, it becomes a nomad.</span><a class="more" href="//memento.epfl.ch/event/erbra-an-artistic-performance-by-anne-rochat-3/"><span class="visuallyhidden">Read more about "ERBRA - an artistic performance by Anne Rochat"</span></a></div>
        </div>
        <div class="g-span-1_4 g-span-row1">
          <div class="media-content" data-ellipsis="html">By <span itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name">Anne Rochat</span>, <span itemprop="jobTitle">artist</span></span></div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_12">
          <div class="media-ribbon local-bg-color1">
            <meta itemprop="startDate" content="2013-09-30">
            <span>30<small>sep</small></span>
            <hr>
            <meta itemprop="endDate" content="2014-06-15">
            <span>15<small>jun</small></span>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-visual">
            <span class="media-banner badge"><meta itemprop="eventStatus" content="http://schema.org/EventCancelled">Cancelled</span>
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//memento.epfl.ch/image/2715/112x112.jpg" alt="Thumbnail">
            </div>
          </div>
        </div>
        <div class="g-span-1_2 g-span-row1">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/14101/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> <span class="visuallyhidden">Allday event</span></a>
          </small>
          <h2 class="media-header" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/certificate-of-advanced-studies-in-management-of-d/" title="Certificate of Advanced Studies in Management of Development Projects">Certificate of Advanced Studies in Management of Development Projects</a></h2>
          <div class="media-content" data-ellipsis="html"><span itemprop="description">The Cooperation & Development Center (CODEV) at EPFL is pleased to announce the Call for Applications for the Certificate of Advanced Studies in Management of Development Projects (MaDePro).</span><a class="more" href="//memento.epfl.ch/event/certificate-of-advanced-studies-in-management-of-d/"><span class="visuallyhidden">Read more about "Certificate of Advanced Studies in Management of Development Projects"</span></a></div>
        </div>
      </div>
    </div>
  </div>

Agenda versionAgenda version

13mar

10:00, MEB1 B10

Networked Cyber-Physical Systems for a Smarter World

By Prof. Jose L. Ayala, Computense University of Madrid

01oct

30jun

Allday event, Rolex Learning Center - Patios extérieurs

ERBRA - an artistic performance by Anne Rochat

By Anne Rochat, artist

30sep

15jun

Allday event

Certificate of Advanced Studies in Management of Development Projects


  <div class="media-list g-span-1_2">
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_6">
          <div class="media-ribbon">
            <meta itemprop="startDate" content="2014-03-13T10:00">
            <span>13<small>mar</small></span>
          </div>
        </div>
        <div class="g-span-5_6">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/24408/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> 10:00</a>,
            <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
              <a itemprop="map" href="http://plan.epfl.ch/?room=ME%20B1%20B10">
                <span itemprop="name">MEB1 B10</span>
              </a>
            </span>
          </small>
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/networked-cyber-physical-systems-for-a-smarter-wor/" title="Networked Cyber-Physical Systems for a Smarter World">Networked Cyber-Physical Systems for a Smarter World</a></h2>
          <div class="media-content">
            By <span itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><span itemprop="honorificPrefix">Prof.</span> <span itemprop="name">Jose L. Ayala</span>, <span itemprop="affiliation">Computense University of Madrid</span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_6">
          <div class="media-ribbon">
            <meta itemprop="startDate" content="2013-10-01">
            <span>01<small>oct</small></span>
            <hr>
            <meta itemprop="endDate" content="2014-06-30">
            <span>30<small>jun</small></span>
          </div>
        </div>
        <div class="g-span-5_6">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/22349/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> <span class="visuallyhidden">Allday event</span></a>,
            <span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
              <a itemprop="map" href="http://plan.epfl.ch/?zoom=18&recenter_y=5863769.98999&recenter_x=731089.2872&layerNodes=fonds,batiments,labels,information,parkings_publics,arrets_metro&floor=0&q=rolex">
                <span itemprop="name">Rolex Learning Center - Patios extérieurs</span>
              </a>
            </span>
          </small>
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/erbra-an-artistic-performance-by-anne-rochat-3/" title="ERBRA - an artistic performance by Anne Rochat">ERBRA - an artistic performance by Anne Rochat</a></h2>
          <div class="media-content">
            By <span itemprop="performer" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name">Anne Rochat</span>, <span itemprop="jobTitle">artist</span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Event">
      <div class="g-row">
        <div class="g-span-1_6">
          <div class="media-ribbon">
            <meta itemprop="startDate" content="2013-09-30">
            <span>30<small>sep</small></span>
            <hr>
            <meta itemprop="endDate" content="2014-06-15">
            <span>15<small>jun</small></span>
          </div>
        </div>
        <div class="g-span-5_6">
          <small class="media-info">
            <a href="//memento.epfl.ch/event/export/14101/" title="Add event to calendar"><span class="icon sprite-calendar" role="presentation" hidden="hidden"></span> <span class="visuallyhidden">Allday event</span></a>
          </small>
          <h2 class="media-header media-header-full" itemprop="name"><a itemprop="url" href="//memento.epfl.ch/event/certificate-of-advanced-studies-in-management-of-d/" title="Certificate of Advanced Studies in Management of Development Projects">Certificate of Advanced Studies in Management of Development Projects</a></h2>
          <div class="media-content">
          </div>
        </div>
      </div>
    </div>
  </div>

People listPeople list

Based on the Person Schema and the Media module.

Marilyne Andersen

Full Professor, LIPID, ENAC —

Prof. Andersen holds a MSc in Physics and a PhD in Building Physics from EPFL. She was a faculty member of MIT's Department of Architecture in 2004-2010 where she founded the MIT Daylighting Lab. View full profile for "Marilyne Andersen"

marilyne.andersen@epfl.ch GC A2 401

+41 21 693 0882

+41 21 693 8021

Martine Tiercy

Secretary, LAST, ENAC —

Mrs. Tiercy takes care of LIPID’s administrative duties and shares her time with the Laboratory of Architecture and Sustainable Technologies (LAST). View full profile for "Martine Tiercy"

martine.tiercy@epfl.ch GC A2 445

+41 21 693 8021

Boris Karamata

Research Scientist, LIPID, ENAC —

Dr. Karamata investigates novel methods for solar energy collection and climate-adaptive facades. He holds a MSc in Microtechnical Engineering and a PhD in Optical Physics from EPFL. View full profile for "Boris Karamata"

boris.karamata@epfl.ch LE1 111

+41 21 693 0886


  <div class="media-list people-list">
    <div class="media" itemscope="" itemtype="http://schema.org/Person">
      <div class="g-row">
        <div class="g-span-1_6">
          <a class="media-visual" href="http://people.epfl.ch/marilyne.andersen">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/MAndersen.jpg" alt="Portait of Marilyne Andersen">
            </div>
          </a>
        </div>
        <div class="g-span-2_3">
          <h2 class="media-header media-header-full" itemprop="name"><a href="http://people.epfl.ch/marilyne.andersen"><span itemprop="givenName">Marilyne</span> <span itemprop="familyName">Andersen</span></a></h2>
          <div class="media-content">
            <span class="media-info"><span itemprop="jobTitle">Full Professor</span>, <span itemprop="affiliation">LIPID, ENAC</span> — </span>
            <p itemprop="description">Prof. Andersen holds a MSc in Physics and a PhD in Building Physics from EPFL. She was a faculty member of MIT's Department of Architecture in 2004-2010 where she founded the MIT Daylighting Lab.
              <a class="more" itemprop="url" href="http://people.epfl.ch/marilyne.andersen" title="View full profile"><span class="visuallyhidden">View full profile for "Marilyne Andersen"</span></a>
            </p>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-content">
            <p>
              <a href="mailto:marilyne.andersen@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden visible-xs">marilyne.andersen@epfl.ch</span></a>
              <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
                <a itemprop="map" href="http://plan.epfl.ch/?room=GCA2401" class="btn btn-inline themed" title="View office on map"><span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span><span itemprop="name" class="visuallyhidden visible-xs">GC A2 401</span></a>
              </span>
            </p>
            <p><a href="callto:+41216930882" title="Call"><span itemprop="telephone">+41 21 693 0882</span></a></p>
            <p><a href="callto:+41216938021" title="Call"><span itemprop="telephone">+41 21 693 8021</span></a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Person">
      <div class="g-row">
        <div class="g-span-1_6">
          <a class="media-visual" href="http://people.epfl.ch/martine.tiercy">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/tiercy3.jpg" alt="Portrait of Martine Tiercy">
            </div>
          </a>
        </div>
        <div class="g-span-2_3">
          <h2 class="media-header media-header-full" itemprop="name"><a href="http://people.epfl.ch/martine.tiercy"><span itemprop="givenName">Martine</span> <span itemprop="familyName">Tiercy</span></a></h2>
          <div class="media-content">
            <span class="media-info"><span itemprop="jobTitle">Secretary</span>, <span itemprop="affiliation">LAST, ENAC</span> — </span>
            <p itemprop="description">Mrs. Tiercy takes care of LIPID’s administrative duties and shares her time with the Laboratory of Architecture and Sustainable Technologies (LAST).
              <a class="more" itemprop="url" href="http://people.epfl.ch/martine.tiercy" title="View full profile"><span class="visuallyhidden">View full profile for "Martine Tiercy"</span></a>
            </p>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-content">
            <p>
              <a href="mailto:martine.tiercy@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden visible-xs">martine.tiercy@epfl.ch</span></a>
              <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
                <a itemprop="map" href="http://plan.epfl.ch/?room=GCA2445" class="btn btn-inline themed" title="View office on map"><span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span><span itemprop="name" class="visuallyhidden visible-xs">GC A2 445</span></a>
              </span>
            </p>
            <p><a href="callto:+41216938021" title="Call"><span itemprop="telephone">+41 21 693 8021</span></a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Person">
      <div class="g-row">
        <div class="g-span-1_6">
          <a class="media-visual" href="http://people.epfl.ch/boris.karamata">
            <div class="embed-responsive embed-responsive-1by1">
              <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/karamata5.jpg" alt="Portrait of Boris Karmata">
            </div>
          </a>
        </div>
        <div class="g-span-2_3">
          <h2 class="media-header media-header-full" itemprop="name"><a href="http://people.epfl.ch/boris.karamata"><span itemprop="givenName">Boris</span> <span itemprop="familyName">Karamata</span></a></h2>
          <div class="media-content">
            <span class="media-info"><span itemprop="jobTitle">Research Scientist</span>, <span itemprop="affiliation">LIPID, ENAC</span> — </span>
            <p itemprop="description">Dr. Karamata investigates novel methods for solar energy collection and climate-adaptive facades. He holds a MSc in Microtechnical Engineering and a PhD in Optical Physics from EPFL.
              <a class="more" itemprop="url" href="http://people.epfl.ch/boris.karamata" title="View full profile"><span class="visuallyhidden">View full profile for "Boris Karamata"</span></a>
            </p>
          </div>
        </div>
        <div class="g-span-1_6">
          <div class="media-content">
            <p>
              <a href="mailto:boris.karamata@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden visible-xs">boris.karamata@epfl.ch</span></a>
              <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
                <a itemprop="map" href="http://plan.epfl.ch/?room=LE1111" class="btn btn-inline themed" title="View office on map"><span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span><span itemprop="name" class="visuallyhidden visible-xs">LE1 111</span></a>
              </span>
            </p>
            <p><a href="callto:+41216930886" title="Call"><span itemprop="telephone">+41 21 693 0886</span></a></p>
          </div>
        </div>
      </div>
    </div>
  </div>

Condensed people grid layout (2 columns)Condensed people grid layout (2 columns)

Some CSS has to be added to display this layout (see code).

nicole.aghroum@epfl.ch

Foucart Alicia

Secretary

Phone: +41 21 69 31901 Phone: +41 21 69 31902

Office: INN140,
INN141

claude.zwicky@epfl.ch

Zwicky Claude

Administrator

Phone: +41 21 69 34833 Phone: +41 21 69 34834

Office: CM2274

nicole.aghroum@epfl.ch

Aghroum Nicole

Secretary

Phone: +41 21 69 31922

Office: CM2267

isabelle.hugli@epfl.ch

Hügli Isabelle

Secretary

Phone: +41 21 69 30239

Office: CM2267


  <div class="people-grid-condensed">
    <div class="g-row">
      <div class="media g-span-col6" itemscope="" itemtype="http://schema.org/Person">
        <div class="g-row">
          <a class="g-span-col4 media-visual" href="http://people.epfl.ch/alicia.foucart?lang=en"><img itemprop="image" src="http://people.epfl.ch/cgi-bin/people/getPhoto?id=228469&show=" alt=""></a>
          <div class="g-span-col1 media-content">
            <a itemprop="email" href="mailto:nicole.aghroum@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden">nicole.aghroum@epfl.ch</span></a>
          </div>
          <div class="g-span-col7 media-content">
            <h2 class="media-header media-header-full">
              <a href="http://people.epfl.ch/alicia.foucart?lang=en"><span itemprop="familyName">Foucart</span> <span itemprop="givenName">Alicia</span></a>
            </h2>
            <p itemprop="jobTitle">Secretary</p>
            <p>
             <span>Phone:</span> <span itemprop="telephone">+41 21 69 <abbr title="Extension">31901</abbr></span>
             <span class="invisible">Phone:</span> <span itemprop="telephone">+41 21 69 <abbr title="Extension">31902</abbr></span>
            </p>
            <p itemprop="workLocation">Office: <a href="http://plan.epfl.ch/?room=INN140">INN140</a>,<br>
              <a href="http://plan.epfl.ch/?room=INN141">INN141</a>
            </p>
          </div>
        </div>
      </div>
      <div class="media g-span-col6" itemscope="" itemtype="http://schema.org/Person">
        <div class="g-row">
          <a class="g-span-col4 media-visual" href="http://people.epfl.ch/claude.zwicky?lang=en"><img itemprop="image" src="http://people.epfl.ch/cgi-bin/people/getPhoto?id=106792&show=" alt=""></a>
          <div class="g-span-col1 media-content">
            <a itemprop="email" href="mailto:claude.zwicky@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden">claude.zwicky@epfl.ch</span></a>
          </div>
          <div class="g-span-col7 media-content">
            <h2 class="media-header media-header-full">
              <a href="http://people.epfl.ch/claude.zwicky?lang=en"><span itemprop="familyName">Zwicky</span> <span itemprop="givenName">Claude</span></a>
            </h2>
            <p itemprop="jobTitle">Administrator</p>
            <p>
              <span>Phone:</span> <span itemprop="telephone">+41 21 69 <abbr title="Extension">34833</abbr></span>
              <span class="invisible">Phone:</span> <span itemprop="telephone">+41 21 69 <abbr title="Extension">34834</abbr></span>
            </p>
            <p itemprop="workLocation">Office: <a href="http://plan.epfl.ch/?room=CM2274">CM2274</a></p>
          </div>
        </div>
      </div>
    </div>
    <div class="g-row">
      <div class="media g-span-col6" itemscope="" itemtype="http://schema.org/Person">
        <div class="g-row">
          <div class="g-span-col4 media-visual">
            <div class="g-fill-cell local-bg-color1"> </div>
          </div>
          <div class="g-span-col1 media-content">
            <a itemprop="email" href="mailto:nicole.aghroum@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden">nicole.aghroum@epfl.ch</span></a>
          </div>
          <div class="g-span-col7 media-content">
            <h2 class="media-header media-header-full">
              <a href="http://people.epfl.ch/nicole.aghroum?lang=en"><span itemprop="familyName">Aghroum</span> <span itemprop="givenName">Nicole</span></a>
            </h2>
            <p itemprop="jobTitle">Secretary</p>
            <p>
              <span>Phone:</span> <span itemprop="telephone">+41 21 69 <abbr title="Extension">31922</abbr></span>
            </p>
            <p itemprop="workLocation">Office: <a href="http://plan.epfl.ch/?room=CM2267">CM2267</a></p>
          </div>
        </div>
      </div>
      <div class="media g-span-col6" itemscope="" itemtype="http://schema.org/Person">
        <div class="g-row">
          <div class="g-span-col4 media-visual">
            <div class="g-fill-cell local-bg-color1"> </div>
          </div>
          <div class="g-span-col1 media-content">
              <a href="mailto:isabelle.hugli@epfl.ch" class="btn btn-inline themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden">isabelle.hugli@epfl.ch</span></a>
          </div>
          <div class="g-span-col7 media-content">
            <h2 class="media-header media-header-full">
              <a href="http://people.epfl.ch/nicole.aghroum?lang=en"><span itemprop="familyName">Hügli</span> <span itemprop="givenName">Isabelle</span></a>
            </h2>
            <p itemprop="jobTitle">Secretary</p>
            <p>
              <span>Phone:</span> <span itemprop="telephone">+41 21 69 <abbr title="Extension">30239</abbr></span>
            </p>
            <p itemprop="workLocation">Office: <a href="http://plan.epfl.ch/?room=CM2267">CM2267</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>

People grid layoutPeople grid layout

3 columns3 columns

Marilyne Andersen

Full Professor

LIPID, ENAC

marilyne.andersen@epfl.ch GC A2 401

Martine Tiercy

Secretary

LAST, ENAC

martine.tiercy@epfl.ch GC A2 445

Boris Karamata

Research Scientist

LIPID, ENAC

boris.karamata@epfl.ch LE1 111


  <div class="g-row">
    <div class="media g-span-1_3" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/marilyne.andersen">
        <div class="embed-responsive embed-responsive-4by5">
          <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/MAndersen.jpg" alt="Portait of Marilyne Andersen">
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name"><a href="http://people.epfl.ch/marilyne.andersen"><span itemprop="givenName">Marilyne</span> <span itemprop="familyName">Andersen</span></a></h2>
      <span class="media-info"><span itemprop="jobTitle">Full Professor</span></span>
      <div class="media-content">
        <p><span itemprop="affiliation">LIPID, ENAC</span></p>
        <a href="mailto:marilyne.andersen@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden visible-xs visible-xxs">marilyne.andersen@epfl.ch</span></a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=GCA2401" class="btn btn-inline btn-notext themed" title="View office on map"><span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span><span itemprop="name" class="visuallyhidden visible-xs visible-xxs">GC A2 401</span></a>
        </span>
      </div>
    </div>
    <div class="media g-span-1_3" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/martine.tiercy">
        <div class="embed-responsive embed-responsive-4by5">
          <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/tiercy3.jpg" alt="Portrait of Martine Tiercy">
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name"><a href="http://people.epfl.ch/martine.tiercy"><span itemprop="givenName">Martine</span> <span itemprop="familyName">Tiercy</span></a></h2>
      <span class="media-info"><span itemprop="jobTitle">Secretary</span></span>
      <div class="media-content">
        <p><span itemprop="affiliation">LAST, ENAC</span></p>
        <a href="mailto:martine.tiercy@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden visible-xs visible-xxs">martine.tiercy@epfl.ch</span></a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=GCA2445" class="btn btn-inline btn-notext themed" title="View office on map"><span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span><span itemprop="name" class="visuallyhidden visible-xs visible-xxs">GC A2 445</span></a>
        </span>
      </div>
    </div>
    <div class="media g-span-1_3" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/boris.karamata">
        <div class="embed-responsive embed-responsive-4by5">
          <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/karamata5.jpg" alt="Portrait of Boris Karmata">
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name"><a href="http://people.epfl.ch/boris.karamata"><span itemprop="givenName">Boris</span> <span itemprop="familyName">Karamata</span></a></h2>
      <span class="media-info"><span itemprop="jobTitle">Research Scientist</span></span>
      <div class="media-content">
        <p><span itemprop="affiliation">LIPID, ENAC</span></p>
        <a href="mailto:boris.karamata@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email"><span class="icon icon-mail_button" role="presentation" hidden="hidden"></span><span itemprop="email" class="visuallyhidden visible-xs visible-xxs">boris.karamata@epfl.ch</span></a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=LE1111" class="btn btn-inline btn-notext themed" title="View office on map"><span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span><span itemprop="name" class="visuallyhidden visible-xs visible-xxs">LE1 111</span></a>
        </span>
      </div>
    </div>
  </div>

4 columns4 columns

Thomas Becker

Chef de groupe,
IDEVELOP —

Tél : +41 21 69 32257

thomas.becker@epfl.ch INN039

View Ion Cionca's profile

Ion Cionca

Informaticien,
IDEVELOP —

Tél : +41 21 69 34586

ion.cionca@epfl.ch INN016

View Wendy De Paoli's profile

Wendy De Paoli

Informaticienne,
IDEVELOP —

Tél : +41 21 69 36094

wendy.depaoli@epfl.ch INN013

View Francesco De Rose's profile

Francesco De Rose

Informaticien,
IDEVELOP —

Tél : +41 21 69 34257 Tél : +41 21 69 34258

francesco.derose@epfl.ch INN015 INN015


  <div class="g-row">
    <div class="g-span-1_4" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/thomas.becker?lang=fr">
        <div class="embed-responsive embed-responsive-3by4">
          <img src="http://people.epfl.ch/cgi-bin/people/getPhoto?id=152209&show=" alt="thumbnail">
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name">
        <a href="http://people.epfl.ch/thomas.becker?lang=fr">
          <span itemprop="givenName">Thomas</span>
          <span itemprop="familyName">Becker</span>
        </a>
      </h2>
      <span class="media-info">
        <span itemprop="jobTitle">Chef de groupe</span>,<br>
        <span itemprop="affiliation">IDEVELOP</span> —
      </span>
      <div class="media-content">
        <p itemprop="telephone">Tél : +41 21 69 <abbr title="Extension">32257</abbr></p>
        <a href="mailto:thomas.becker@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email">
          <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
          <span itemprop="email" class="visuallyhidden visible-xs visible-xxs">thomas.becker@epfl.ch</span>
        </a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=INN039" class="btn btn-inline btn-notext themed" title="View office on map">
            <span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span>
            <span itemprop="name" class="visuallyhidden visible-xs visible-xxs">INN039</span>
          </a>
        </span>
      </div>
    </div>
    <div class="g-span-1_4" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/ion.cionca?lang=fr">
        <div class="embed-responsive embed-responsive-3by4">
          <div class="embed-responsive-item local-bg-color1"><div class="visuallyhidden">View Ion Cionca's profile</div></div>
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name">
        <a href="http://people.epfl.ch/ion.cionca?lang=fr">
          <span itemprop="givenName">Ion</span>
          <span itemprop="familyName">Cionca</span>
        </a>
      </h2>
      <span class="media-info">
        <span itemprop="jobTitle">Informaticien</span>,<br>
        <span itemprop="affiliation">IDEVELOP</span> —
      </span>
      <div class="media-content">
        <p itemprop="telephone">Tél : +41 21 69 <abbr title="Extension">34586</abbr></p>
        <a href="mailto:ion.cionca@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email">
          <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
          <span itemprop="email" class="visuallyhidden visible-xs visible-xxs">ion.cionca@epfl.ch</span>
        </a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=INN016" class="btn btn-inline btn-notext themed" title="View office on map">
            <span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span>
            <span itemprop="name" class="visuallyhidden visible-xs visible-xxs">INN016</span>
          </a>
        </span>
      </div>
    </div>
    <div class="g-span-1_4" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/wendy.depaoli?lang=fr">
        <div class="embed-responsive embed-responsive-3by4">
          <div class="embed-responsive-item local-bg-color1"><div class="visuallyhidden">View Wendy De Paoli's profile</div></div>
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name">
        <a href="http://people.epfl.ch/wendy.depaoli?lang=fr">
          <span itemprop="givenName">Wendy</span>
          <span itemprop="familyName">De Paoli</span>
        </a>
      </h2>
      <span class="media-info">
        <span itemprop="jobTitle">Informaticienne</span>,<br>
        <span itemprop="affiliation">IDEVELOP</span> —
      </span>
      <div class="media-content">
        <p itemprop="telephone">Tél : +41 21 69 <abbr title="Extension">36094</abbr></p>
        <a href="mailto:wendy.depaoli@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email">
          <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
          <span itemprop="email" class="visuallyhidden visible-xs visible-xxs">wendy.depaoli@epfl.ch</span>
        </a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=INN013" class="btn btn-inline btn-notext themed" title="View office on map">
            <span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span>
            <span itemprop="name" class="visuallyhidden visible-xs visible-xxs">INN013</span>
          </a>
        </span>
      </div>
    </div>
    <div class="g-span-1_4" itemscope="" itemtype="http://schema.org/Person">
      <a class="media-visual" href="http://people.epfl.ch/francesco.derose?lang=fr">
        <div class="embed-responsive embed-responsive-3by4">
          <div class="embed-responsive-item local-bg-color1"><div class="visuallyhidden">View Francesco De Rose's profile</div></div>
        </div>
      </a>
      <h2 class="media-header media-header-full" itemprop="name">
        <a href="http://people.epfl.ch/francesco.derose?lang=fr">
          <span itemprop="givenName">Francesco</span>
          <span itemprop="familyName">De Rose</span>
        </a>
      </h2>
      <span class="media-info">
        <span itemprop="jobTitle">Informaticien</span>,<br>
        <span itemprop="affiliation">IDEVELOP</span> —
      </span>
      <div class="media-content">
      <p>
            <span>Tél :</span>
              <span itemprop="telephone">+41 21 69 <abbr title="Extension">34257</abbr>
            </span>
            <span class="invisible">Tél :</span>
              <span itemprop="telephone">+41 21 69 <abbr title="Extension">34258</abbr>
            </span>
       </p>
        <a href="mailto:francesco.derose@epfl.ch" class="btn btn-inline btn-notext themed" title="Send email">
          <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
          <span itemprop="email" class="visuallyhidden visible-xs visible-xxs">francesco.derose@epfl.ch</span>
        </a>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=INN015" class="btn btn-inline btn-notext themed" title="View office on map">
            <span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span>
            <span itemprop="name" class="visuallyhidden visible-xs visible-xxs">INN015</span>
          </a>
        </span>
        <span itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=INN015" class="btn btn-inline btn-notext themed" title="View office on map">
            <span class="icon icon-map-pointer_button" role="presentation" hidden="hidden"></span>
            <span itemprop="name" class="visuallyhidden visible-xs visible-xxs">INN015</span>
          </a>
        </span>
      </div>
    </div>
  </div>

Condensed people listCondensed people list

Some CSS has to be added to display this layout (see code).

Marilyne Andersen

Full Professor, LIPID, ENAC

marilyne.andersen@epfl.ch

+41 21 693 0882
+41 21 693 8021

GCA2401

Martine Tiercy

Secretary, LAST, ENAC

martine.tiercy@epfl.ch

+41 21 693 8021

GCA2445

Boris Karamata

Research Scientist, LIPID, ENAC

boris.karamata@epfl.ch

+41 21 693 0886

LE1111


  <div class="media-list people-list people-list-organigram">
    <div class="media" itemscope="" itemtype="http://schema.org/Person">
      <div class="g-row">
        <div class="g-span-col1 photo">
          <a class="media-visual" href="http://people.epfl.ch/marilyne.andersen">
            <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/MAndersen.jpg" alt="Portrait of Marilyne Andersen">
          </a>
        </div>
        <div class="g-span-col6 infos">
          <h2 class="media-header media-header-full" itemprop="name">
            <a href="http://people.epfl.ch/marilyne.andersen">
              <span itemprop="givenName">Marilyne</span>
              <span itemprop="familyName">Andersen</span>
            </a>
          </h2>
          <div class="media-content">
            <div class="media-info">
              <span itemprop="jobTitle">Full Professor, LIPID, ENAC</span>
            </div>
            <div class="hidden visible-xxs">
              <a href="http://plan.epfl.ch/?room=GCA2401">GCA2401</a>
            </div>
          </div>
        </div>
        <div class="g-span-col1 email">
          <a href="mailto:marilyne.andersen@epfl.ch" class="btn btn-inline themed" title="Send email">
            <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
            <span itemprop="email" class="visuallyhidden visible-xxs">marilyne.andersen@epfl.ch</span>
          </a>
        </div>
        <div class="g-span-col2 phone">
          <a href="callto:+41216930882" title="Call"><span itemprop="telephone">+41 21 693 0882</span></a><br>
          <a href="callto:+41216938021" title="Call"><span itemprop="telephone">+41 21 693 8021</span></a><br>
        </div>
        <div class="g-span-col2 room text-right visuallyhidden-xxs" itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=GCA2401"><span itemprop="name">GCA2401</span></a>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Person">
      <div class="g-row">
        <div class="g-span-col1 photo">
          <a class="media-visual" href="http://people.epfl.ch/martine.tiercy">
            <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/tiercy3.jpg" alt="Portrait of Martine Tiercy">
          </a>
        </div>
        <div class="g-span-col6 infos">
          <h2 class="media-header media-header-full" itemprop="name">
            <a href="http://people.epfl.ch/martine.tiercy">
              <span itemprop="givenName">Martine</span>
              <span itemprop="familyName">Tiercy</span>
            </a>
          </h2>
          <div class="media-content">
            <div class="media-info">
              <span itemprop="jobTitle">Secretary, LAST, ENAC</span>
            </div>
            <div class="hidden visible-xxs">
              <a href="http://plan.epfl.ch/?room=GCA2445">GCA2445</a>
            </div>
          </div>
        </div>
        <div class="g-span-col1 email">
          <a href="mailto:martine.tiercy@epfl.ch" class="btn btn-inline themed" title="Send email">
            <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
            <span itemprop="email" class="visuallyhidden visible-xxs">martine.tiercy@epfl.ch</span>
          </a>
        </div>
        <div class="g-span-col2 phone">
          <a href="callto:+41216938021" title="Call"><span itemprop="telephone">+41 21 693 8021</span></a><br>
        </div>
        <div class="g-span-col2 room text-right visuallyhidden-xxs" itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=GCA2445"><span itemprop="name">GCA2445</span></a>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/Person">
      <div class="g-row">
        <div class="g-span-col1 photo">
          <a class="media-visual" href="http://people.epfl.ch/boris.karamata">
            <img itemprop="image" src="//lipid.epfl.ch/files/content/sites/lipid/files/images/team-portraits/karamata5.jpg" alt="Portrait of Boris Karmata">
          </a>
        </div>
        <div class="g-span-col6 infos">
          <h2 class="media-header media-header-full" itemprop="name">
            <a href="http://people.epfl.ch/boris.karamata">
              <span itemprop="givenName">Boris</span>
              <span itemprop="familyName">Karamata</span>
            </a>
          </h2>
          <div class="media-content">
            <div class="media-info">
              <span itemprop="jobTitle">Research Scientist, LIPID, ENAC</span>
            </div>
            <div class="hidden visible-xxs">
              <a href="http://plan.epfl.ch/?room=LE1111">LE1111</a>
            </div>
          </div>
        </div>
        <div class="g-span-col1 email">
          <a href="mailto:boris.karamata@epfl.ch" class="btn btn-inline themed" title="Send email">
            <span class="icon icon-mail_button" role="presentation" hidden="hidden"></span>
            <span itemprop="email" class="visuallyhidden visible-xxs">boris.karamata@epfl.ch</span>
          </a>
        </div>
        <div class="g-span-col2 phone">
          <a href="callto:+41216930886" title="Call"><span itemprop="telephone">+41 21 693 0886</span></a><br>
        </div>
        <div class="g-span-col2 room text-right visuallyhidden-xxs" itemprop="workLocation" itemscope="" itemtype="http://schema.org/Place">
          <a itemprop="map" href="http://plan.epfl.ch/?room=LE1111"><span itemprop="name">LE1111</span></a>
        </div>
      </div>
    </div>
  </div>

Publication listPublication list

Based on the Scholarly Article Schema and the Media module.

Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve.

M. Andersen, J. M. L. Gagne and S. Kleindienst — in Automation in Construction, vol. 35, p. 338-352, 2013
Detailed record for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve." Full text for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve."

Modelling 'non-visual' effects of daylighting in a residential environment.

M. Andersen, S. J. Gochenour and S. W. Lockley — in Building and Environment, vol. 70, p. 138-149, 2013
Detailed record for "Modelling 'non-visual' effects of daylighting in a residential environment." Full text for "Modelling 'non-visual' effects of daylighting in a residential environment."

A framework for predicting the non-visual effects of daylight – Part II: The simulation model.

J. Mardaljevic, M. Andersen, N. Roy and J. Christoffersen — in Lighting Research and Technology, 2013
Detailed record for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model." Full text for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model."


  <div class="media-list publication-list">
    <div class="media" itemscope="" itemtype="http://schema.org/ScholarlyArticle">
      <div class="g-row">
        <div class="g-span-1_6">
          <img class="media-visual toggle-hidden ui-toggle" data-widget="toggle" aria-label="Toggle publication image" itemprop="image" src="//infoscience.epfl.ch/record/188736/files/Interactive%20expert%20support%20Andersen%20Gagne%20Kleindienst2.jpg" alt="Publication Thumbnail" tabindex="0" role="button" aria-controls="toggle-pane-6">
          
        </div>
        <div class="g-span-5_6">
          <h2 class="media-header media-header-full" itemprop="name"><a href="//infoscience.epfl.ch/record/188736/">Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve.</a></h2>
          <div class="media-content">
            <span class="media-info">
              <span itemprop="author">M. Andersen</span>,
              <span itemprop="author">J. M. L. Gagne</span> and
              <span itemprop="author">S. Kleindienst</span> — 
            </span>
            <span>in <span itemprop="mentions">Automation in Construction, vol. 35, p. 338-352, 2013</span></span>
            <br>
            <a itemprop="url" class="btn btn-inline" href="//infoscience.epfl.ch/record/188736/">Detailed record<span class="visuallyhidden"> for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve."</span></a>
            <span itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/MediaObject">
              <a itemprop="contentUrl" class="btn btn-inline" href="//infoscience.epfl.ch/record/188736/files/Andersen2013_UsersLightsolveExpert_AiC_PrePrint2.pdf?version=1">
                <span itemprop="description">Full text<span class="visuallyhidden"> for "Interactive expert support for early stage full-year daylighting design: a user’s perspective on Lightsolve."</span></span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/ScholarlyArticle">
      <div class="g-row">
        <div class="g-span-1_6">
          <img class="media-visual toggle-hidden ui-toggle" data-widget="toggle" aria-label="Toggle publication image" itemprop="image" src="//infoscience.epfl.ch/record/188735/files/Modeling%20non-visual%20effects%20Andersen%20Gochenour%202.jpg" alt="Publication Thumbnail" tabindex="0" role="button" aria-controls="toggle-pane-7">
          
        </div>
        <div class="g-span-5_6">
          <h2 class="media-header media-header-full" itemprop="name"><a href="//infoscience.epfl.ch/record/188735/">Modelling 'non-visual' effects of daylighting in a residential environment.</a></h2>
          <div class="media-content">
            <span class="media-info">
              <span itemprop="author">M. Andersen</span>,
              <span itemprop="author">S. J. Gochenour</span> and
              <span itemprop="author">S. W. Lockley</span> — 
            </span>
            <span>in <span itemprop="mentions">Building and Environment, vol. 70, p. 138-149, 2013</span></span>
            <br>
            <a itemprop="url" class="btn btn-inline" href="//infoscience.epfl.ch/record/188735/">Detailed record<span class="visuallyhidden"> for "Modelling 'non-visual' effects of daylighting in a residential environment."</span></a>
            <span itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/MediaObject">
              <a itemprop="contentUrl" class="btn btn-inline" href="//infoscience.epfl.ch/record/188735/files/Andersen2013_NonVisLightHousing_BAE-REV_clean2.pdf?version=1">
                <span itemprop="description">Full text<span class="visuallyhidden"> for "Modelling 'non-visual' effects of daylighting in a residential environment."</span></span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="media" itemscope="" itemtype="http://schema.org/ScholarlyArticle">
      <div class="g-row">
        <div class="g-span-1_6">
          <img class="media-visual toggle-hidden ui-toggle" data-widget="toggle" aria-label="Toggle publication image" itemprop="image" src="//infoscience.epfl.ch/record/188734/files/Framework%20for%20predicting%20Mardaljevic%20Andersen%20Roy.jpg" alt="Publication Thumbnail" tabindex="0" role="button" aria-controls="toggle-pane-8">
          
        </div>
        <div class="g-span-5_6">
          <h2 class="media-header media-header-full" itemprop="name"><a href="//infoscience.epfl.ch/record/188734/">A framework for predicting the non-visual effects of daylight – Part II: The simulation model.</a></h2>
          <div class="media-content">
            <span class="media-info">
              <span itemprop="author">J. Mardaljevic</span>,
              <span itemprop="author">M. Andersen</span>,
              <span itemprop="author">N. Roy</span> and
              <span itemprop="author">J. Christoffersen</span> — 
            </span>
            <span>in <span itemprop="mentions">Lighting Research and Technology, 2013</span></span>
            <br>
            <a itemprop="url" class="btn btn-inline" href="//infoscience.epfl.ch/record/188734/">Detailed record<span class="visuallyhidden"> for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model."</span></a>
            <span itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/MediaObject">
              <a itemprop="contentUrl" class="btn btn-inline" href="//infoscience.epfl.ch/record/188734/files/MardaljevicAndersenetal_LRT-ClimateBasedNVEModel_revised2.pdf?version=1">
                <span itemprop="description">Full text<span class="visuallyhidden"> for "A framework for predicting the non-visual effects of daylight – Part II: The simulation model."</span></span>
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

Study planStudy plan

Global issues: Propedeutic BA1

Courses Code Programs Lecturers	Bachelor 1 l e p	Bachelor 2 l e p	Exam	Credits
Global issues: climate A
Global issues: climate A Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 1 1h 1h	Bachelor 2 2h 2h	Exam During the semester	Credits 4
Global issues: climate B
Global issues: climate B Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 1 1h 1h	Bachelor 2 2h 2h	Exam During the semester	Credits 4

Global issues: Propedeutic BA2

Courses Code Programs Lecturers	Bachelor 2 l e p	Exam	Credits
Global issues: climate C
Global issues: climate C Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 2 2h 2h	Exam During the semester	Credits 4
Global issues: climate D
Global issues: climate D Code HUM-121(a) Programs SHS Lecturers Berne	l e p	Bachelor 2 2h 2h	Exam During the semester	Credits 4
Global issues: climate E
Global issues: climate E Code HUM-121(a) Programs SHS Lecturers Berne Thalmann	l e p	Bachelor 2 2h 2h	Exam During the semester	Credits 4


    <div class="study-plan">
        <a name="global-issues-propedeutic-ba1"></a><h2>Global issues: Propedeutic BA1</h2>
        <table class="table">
            <thead class="header_dashed">
                <tr>
                    <th class="courses">
                        <strong>Courses</strong>
                        <ul class="columns-3">
                        <li>Code</li>
                        <li>Programs</li>
                        <li>Lecturers</li>
                        </ul>
                    </th>
                    <th class="bachelor">
                        <strong>Bachelor 1</strong>
                        <ul class="columns-3">
                        <li>l</li>
                        <li>e</li>
                        <li>p</li>
                        </ul>
                    </th>
                    <th class="bachelor">
                        <strong>Bachelor 2</strong>
                        <ul class="columns-3">
                        <li>l</li>
                        <li>e</li>
                        <li>p</li>
                        </ul>
                    </th>
                    <th class="exam">
                        <strong>Exam</strong>
                    </th>
                    <th class="coefficient">
                        <strong>Credits</strong>
                    </th>
                </tr>
            </thead>
            <tbody data-widget="accordions" role="tablist" aria-multiselectable="true" class="ui-accordions">
                <tr class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="0" role="tab" aria-controls="toggle-pane-218" id="toggle-219" aria-expanded="false">
                    <th>
                        <div class="langue francais">
                            <div class="diet_icon"> </div>
                        </div>
                        Global issues: climate A
                    </th>
                </tr>
                <tr class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-218" aria-expanded="false" aria-labelledby="toggle-219" role="tabpanel">
                    <td class="courses">
                        <div class="title">
                            <div class="langue francais">
                                <div class="diet_icon"> </div>
                            </div>
                            <a href="#">Global issues: climate A</a>
                        </div>
                        <ul class="columns-3">
                            <li class="hidden visible-xs visible-xxs column-title">Code</li>
                            <li>HUM-121(a)</li>
                            <li class="hidden visible-xs visible-xxs column-title">Programs</li>
                            <li>SHS</li>
                            <li class="hidden visible-xs visible-xxs column-title">Lecturers</li>
                            <li>
                                <a href="http://people.epfl.ch/cgi-bin/people//?id=176402&lang=en&cvlang=en" target="_blank">Berne</a>
                            </li>
                        </ul>
                    </td>
                    <td class="bachelor hidden visible-xs visible-xxs">
                        <ul class="columns-3 column-3-title">
                            <li>l</li>
                            <li>e</li>
                            <li>p</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 1</span>
                        <ul class="columns-3 local-color">
                            <li>1h</li>
                            <li></li>
                            <li>1h</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 2</span>
                        <ul class="columns-3 local-color">
                            <li>2h</li>
                            <li></li>
                            <li>2h</li>
                        </ul>
                    </td>
                    <td class="exam">
                        <span class="hidden visible-xs visible-xxs column-title">Exam</span>
                        <div class="sun"><span class="little_icon"> </span></div>
                        During the semester
                    </td>
                    <td class="coefficient">
                        <span class="hidden visible-xs visible-xxs column-title">Credits</span>
                        <ul class="columns-3 red-color">
                            <li></li>
                            <li></li>
                            <li>4</li>
                        </ul>
                    </td>
                </tr>
                <tr class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-220" id="toggle-221" aria-expanded="false">
                    <th tabindex="-1">
                        <div class="langue franglais" tabindex="-1">
                            <div class="diet_icon" tabindex="-1"> </div>
                        </div>
                        Global issues: climate B
                    </th>
                </tr>
                <tr class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-220" aria-expanded="false" aria-labelledby="toggle-221" role="tabpanel">
                    <td class="courses">
                        <div class="title">
                            <div class="langue franglais">
                                <div class="diet_icon"> </div>
                            </div>
                            <a href="#">Global issues: climate B</a>
                        </div>
                        <ul class="columns-3">
                            <li class="hidden visible-xs visible-xxs column-title">Code</li>
                            <li>HUM-121(a)</li>
                            <li class="hidden visible-xs visible-xxs column-title">Programs</li>
                            <li>SHS</li>
                            <li class="hidden visible-xs visible-xxs column-title">Lecturers</li>
                            <li>
                                <a href="http://people.epfl.ch/cgi-bin/people//?id=176402&lang=en&cvlang=en" target="_blank">Berne</a>
                            </li>
                        </ul>
                    </td>
                    <td class="bachelor hidden visible-xs visible-xxs">
                        <ul class="columns-3 column-3-title">
                            <li>l</li>
                            <li>e</li>
                            <li>p</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 1</span>
                        <ul class="columns-3 local-color">
                            <li>1h</li>
                            <li></li>
                            <li>1h</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 2</span>
                        <ul class="columns-3 local-color">
                            <li>2h</li>
                            <li></li>
                            <li>2h</li>
                        </ul>
                    </td>
                    <td class="exam">
                        <span class="hidden visible-xs visible-xxs column-title">Exam</span>
                        <div class="sun"><span class="little_icon"> </span></div>
                        During the semester
                    </td>
                    <td class="coefficient">
                        <span class="hidden visible-xs visible-xxs column-title">Credits</span>
                        <ul class="columns-3 red-color">
                            <li></li>
                            <li></li>
                            <li>4</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <a name="global-issues-propedeutic-ba2"></a><h2>Global issues: Propedeutic BA2</h2>
        <table class="table">
            <thead class="header_dashed">
                <tr>
                    <th class="courses">
                        <strong>Courses</strong>
                        <ul class="columns-3">
                        <li>Code</li>
                        <li>Programs</li>
                        <li>Lecturers</li>
                        </ul>
                    </th>
                    <th class="bachelor">
                        <strong>Bachelor 2</strong>
                        <ul class="columns-3">
                        <li>l</li>
                        <li>e</li>
                        <li>p</li>
                        </ul>
                    </th>
                    <th class="exam">
                        <strong>Exam</strong>
                    </th>
                    <th class="coefficient">
                        <strong>Credits</strong>
                    </th>
                </tr>
            </thead>
            <tbody data-widget="accordions" role="tablist" aria-multiselectable="true" class="ui-accordions">
                <tr class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="0" role="tab" aria-controls="toggle-pane-222" id="toggle-223" aria-expanded="false">
                    <th>
                        <div class="langue francais">
                            <div class="diet_icon"> </div>
                        </div>
                        Global issues: climate C
                    </th>
                </tr>
                <tr class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-222" aria-expanded="false" aria-labelledby="toggle-223" role="tabpanel">
                    <td class="courses">
                        <div class="title">
                            <div class="langue francais">
                                <div class="diet_icon"> </div>
                            </div>
                            <a href="#">Global issues: climate C</a>
                        </div>
                        <ul class="columns-3">
                            <li class="hidden visible-xs visible-xxs column-title">Code</li>
                            <li>HUM-121(a)</li>
                            <li class="hidden visible-xs visible-xxs column-title">Programs</li>
                            <li>SHS</li>
                            <li class="hidden visible-xs visible-xxs column-title">Lecturers</li>
                            <li>
                                <a href="http://people.epfl.ch/cgi-bin/people//?id=176402&lang=en&cvlang=en" target="_blank">Berne</a>
                            </li>
                        </ul>
                    </td>
                    <td class="bachelor hidden visible-xs visible-xxs">
                        <ul class="columns-3 column-3-title">
                            <li>l</li>
                            <li>e</li>
                            <li>p</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 2</span>
                        <ul class="columns-3 local-color">
                            <li>2h</li>
                            <li></li>
                            <li>2h</li>
                        </ul>
                    </td>
                    <td class="exam">
                        <span class="hidden visible-xs visible-xxs column-title">Exam</span>
                        <div class="sun"><span class="little_icon"> </span></div>
                        During the semester
                    </td>
                    <td class="coefficient">
                        <span class="hidden visible-xs visible-xxs column-title">Credits</span>
                        <ul class="columns-3 red-color">
                            <li></li>
                            <li></li>
                            <li>4</li>
                        </ul>
                    </td>
                </tr>
                <tr class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-224" id="toggle-225" aria-expanded="false">
                    <th tabindex="-1">
                        <div class="langue franglais" tabindex="-1">
                            <div class="diet_icon" tabindex="-1"> </div>
                        </div>
                        Global issues: climate D
                    </th>
                </tr>
                <tr class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-224" aria-expanded="false" aria-labelledby="toggle-225" role="tabpanel">
                    <td class="courses">
                        <div class="title">
                            <div class="langue franglais">
                                <div class="diet_icon"> </div>
                            </div>
                            <a href="#">Global issues: climate D</a>
                        </div>
                        <ul class="columns-3">
                            <li class="hidden visible-xs visible-xxs column-title">Code</li>
                            <li>HUM-121(a)</li>
                            <li class="hidden visible-xs visible-xxs column-title">Programs</li>
                            <li>SHS</li>
                            <li class="hidden visible-xs visible-xxs column-title">Lecturers</li>
                            <li>
                                <a href="http://people.epfl.ch/cgi-bin/people//?id=176402&lang=en&cvlang=en" target="_blank">Berne</a>
                            </li>
                        </ul>
                    </td>
                    <td class="bachelor hidden visible-xs visible-xxs">
                        <ul class="columns-3 column-3-title">
                            <li>l</li>
                            <li>e</li>
                            <li>p</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 2</span>
                        <ul class="columns-3 local-color">
                            <li>2h</li>
                            <li></li>
                            <li>2h</li>
                        </ul>
                    </td>
                    <td class="exam">
                        <span class="hidden visible-xs visible-xxs column-title">Exam</span>
                        <div class="sun"><span class="little_icon"> </span></div>
                        During the semester
                    </td>
                    <td class="coefficient">
                        <span class="hidden visible-xs visible-xxs column-title">Credits</span>
                        <ul class="columns-3 red-color">
                            <li></li>
                            <li></li>
                            <li>4</li>
                        </ul>
                    </td>
                </tr>
                <tr class="accordion-toggle toggle-collapsed ui-collapse ui-toggle" tabindex="-1" role="tab" aria-controls="toggle-pane-226" id="toggle-227" aria-expanded="false">
                    <th tabindex="-1">
                        <div class="langue franglais" tabindex="-1">
                            <div class="diet_icon" tabindex="-1"> </div>
                        </div>
                        Global issues: climate E
                    </th>
                </tr>
                <tr class="accordion-panel toggle-collapsed" aria-hidden="true" id="toggle-pane-226" aria-expanded="false" aria-labelledby="toggle-227" role="tabpanel">
                    <td class="courses">
                        <div class="title">
                            <div class="langue franglais">
                                <div class="diet_icon"> </div>
                            </div>
                            <a href="#">Global issues: climate E</a>
                        </div>
                        <ul class="columns-3">
                            <li class="hidden visible-xs visible-xxs column-title">Code</li>
                            <li>HUM-121(a)</li>
                            <li class="hidden visible-xs visible-xxs column-title">Programs</li>
                            <li>SHS</li>
                            <li class="hidden visible-xs visible-xxs column-title">Lecturers</li>
                            <li>
                                <a href="http://people.epfl.ch/cgi-bin/people//?id=176402&lang=en&cvlang=en" target="_blank">Berne</a>
                                <a href="http://people.epfl.ch/cgi-bin/people//?id=106542&lang=en&cvlang=en" target="_blank">Thalmann</a>
                            </li>
                        </ul>
                    </td>
                    <td class="bachelor hidden visible-xs visible-xxs">
                        <ul class="columns-3 column-3-title">
                            <li>l</li>
                            <li>e</li>
                            <li>p</li>
                        </ul>
                    </td>
                    <td class="bachelor">
                        <span class="hidden visible-xs visible-xxs column-title">Bachelor 2</span>
                        <ul class="columns-3 local-color">
                            <li>2h</li>
                            <li></li>
                            <li>2h</li>
                        </ul>
                    </td>
                    <td class="exam">
                        <span class="hidden visible-xs visible-xxs column-title">Exam</span>
                        <div class="sun"><span class="little_icon"> </span></div>
                        During the semester
                    </td>
                    <td class="coefficient">
                        <span class="hidden visible-xs visible-xxs column-title">Credits</span>
                        <ul class="columns-3 red-color">
                            <li></li>
                            <li></li>
                            <li>4</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

OrganigrammeOrganigramme

Organizational Chart
Schools
ENAC - Dean's Office	ENAC-DEC	Andersen Marilyne
Section
ENAC - Architecture Section	ENAC-SAR	Gargiani Roberto
SAR - Administration	SAR-GE	Gargiani Roberto
Instituts
Institute of Architecture	IA	Ortelli Luca
IA - Administration	IA-GE	Ortelli Luca
Center
Hosted units	EH-ENAC	Andersen Marilyne


    <table class="table">
      <caption>Organizational Chart</caption>

      <tbody>
         <tr class="hashed-bg">
            <th colspan="3">Schools</th>
         </tr>
        <tr>
          <td><b><a data-name="name" href="#">ENAC - Dean's Office </a> </b></td>
          <td><a data-accronym="accronym" href="#">ENAC-DEC</a></td>
          <td><a data-responsible="responsible" href="#" title="View personal page">Andersen Marilyne</a></td>
        </tr>

        <tr class="hashed-bg">
           <th colspan="3">Section</th>
        </tr>
        <tr>
            <td><b><a data-name="name" href="#" name="ENAC-SAR">ENAC - Architecture Section</a></b></td>
            <td><a data-accronym="accronym" href="#">ENAC-SAR</a></td>
            <td><a data-responsible="responsible" href="#" title="View personal page">Gargiani Roberto</a></td>
        </tr>
        <tr>
            <td><a data-name="name" href="#" name="ENAC-SGC">SAR - Administration</a></td>
            <td><a data-accronym="accronym" href="#">SAR-GE</a></td>
            <td><a data-responsible="responsible" href="#" title="View personal page">Gargiani Roberto</a></td>
        </tr>

        <tr class="hashed-bg">
           <th colspan="3">Instituts</th>
        </tr>
        <tr>
          <td><b><a data-name="name" href="#">Institute of Architecture </a> </b></td>
          <td><a data-accronym="accronym" href="#">IA</a></td>
          <td><a data-responsible="responsible" href="#" title="View personal page">Ortelli Luca</a></td>
        </tr>
        <tr>
          <td><b><a data-name="name" href="#">IA - Administration  </a> </b></td>
          <td><a data-accronym="accronym" href="#">IA-GE</a></td>
          <td><a data-responsible="responsible" href="#" title="View personal page">Ortelli Luca</a></td>
        </tr>

        <tr class="hashed-bg">
            <th colspan="3">Center</th>
        </tr>
        <tr>
            <td><b><a data-name="name" href="#" name="ENAC-SAR">Hosted units</a></b></td>
            <td><a data-accronym="accronym" href="#">EH-ENAC</a></td>
            <td><a data-responsible="responsible" href="#" title="View personal page">Andersen Marilyne</a></td>
        </tr>
      </tbody>
    </table>

Responsive ImageResponsive Image

image sans attributsimage sans attributs

<img src="…"/> Le framework se charge de la rendre responsive

image avec attributs width et heightimage avec attributs width et height

<img src="…" width="…" height="…"/> Le framework se charge de la rendre responsive

image avec l'attribut styleimage avec l'attribut style

<img src="…" style="width:…;height=…;"/> Il faut forcer une css <style> img { width: 100%; height: auto; } </style>

max-width: 100%max-width: 100%

On limite la largeur au max à la page, mais si l'image est plus petite, elle ne remplit pas toute la largeur.

L'image sera adaptée au container div

<img src="..." style="max-width:100%; height:auto;" >

width: 100%width: 100%

On force la largeur à la largeur de la page, même si l'image est plus petite

Si l'image est plus haute que la page, on ne voit pas tout.

<img src="..." style="width:100%; height:auto;" >

Image entièrement visible sur l'écranImage entièrement visible sur l'écran

Il faut jajouter un div qui remplit tout l'écran et une image de fond :

div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/path/to/image.jpg') no-repeat center center / contain; }

Image qui remplit tout l'écranImage qui remplit tout l'écran

On change le background :

div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('/path/to/image.jpg') no-repeat center center / cover; }

Différentes solutionsDifférentes solutions

https://css-tricks.com/which-responsive-images-solution-should-you-use/

Class Aptent Taciti Sociosqu

Etiam At Risus Et

Etiam At Risus Et

Etiam At Risus Et

Etiam At Risus Et

Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0

WAI-ARIAWAI-ARIA

Access keysAccess keys

InstallationInstallation

Optimized head/foot filesOptimized head/foot files

All-in-one head filesAll-in-one head files

Integration of the EPFL banner in a siteIntegration of the EPFL banner in a site

Dynamically load the global headerDynamically load the global header

Local searchLocal search

Global searchGlobal search

Custom ScriptsCustom Scripts

Load a custom jQuery pluginLoad a custom jQuery plugin

Load datatables scriptLoad datatables script

Load a jQuery plug-in different from epfl-jqueryLoad a jQuery plug-in different from epfl-jquery

Load a custom scriptLoad a custom script

AnalyticsAnalytics

Browser supportBrowser support

3rd-party libraries3rd-party libraries

Packaged librariesPackaged libraries

CDN librariesCDN libraries

ChangelogChangelog

v0.28.0 - 2018.08.28v0.28.0 - 2018.08.28

v0.27.5 - 2018.08.22v0.27.5 - 2018.08.22

v0.27.4 - 2018.07.18v0.27.4 - 2018.07.18

v0.27.3 - 2018.07.02v0.27.3 - 2018.07.02

v0.27.2 - 2018.06.11v0.27.2 - 2018.06.11

v0.27.1 - 2018.04.04v0.27.1 - 2018.04.04

v0.27.0 - 2018.04.03v0.27.0 - 2018.04.03

v0.26.1 - 2017.11.21v0.26.1 - 2017.11.21

v0.26.0 - 2017.10.18v0.26.0 - 2017.10.18

v0.25.0 - 2017.10.11v0.25.0 - 2017.10.11

v0.24.0 - 2017.08.29v0.24.0 - 2017.08.29

v0.23.1 - 2017.06.13v0.23.1 - 2017.06.13

v0.23.0 - 2017.03.20v0.23.0 - 2017.03.20

v0.22.12 - 2016.04.27v0.22.12 - 2016.04.27

v0.22.9 - 2016.04.14v0.22.9 - 2016.04.14

v0.22.8 - 2016.03.18v0.22.8 - 2016.03.18

v0.22.6 - 2016.08.01v0.22.6 - 2016.08.01

v0.22.2 - 2015.10.30v0.22.2 - 2015.10.30

v0.22.0 - 2015.10.12v0.22.0 - 2015.10.12

v0.21.3 - 2015.09.03v0.21.3 - 2015.09.03

v0.20.3 - 2015.06.22v0.20.3 - 2015.06.22

v0.20.2 - 2015.06.18v0.20.2 - 2015.06.18

v0.20.1 - 2015.06.16v0.20.1 - 2015.06.16

v0.20.0 - 2015.06.15v0.20.0 - 2015.06.15

v0.19.1 - 2015.06.06v0.19.1 - 2015.06.06

v0.19.0 - 2015.06.04v0.19.0 - 2015.06.04

v0.18.0 - 2015.05.20v0.18.0 - 2015.05.20

v0.17.0 - 2015.05.12v0.17.0 - 2015.05.12

v0.16.0 - 2015.05.04v0.16.0 - 2015.05.04

v0.15.0 - 2015.04.17v0.15.0 - 2015.04.17

v0.14.0 - 2014.11.09v0.14.0 - 2014.11.09

v0.13.4 - 2014.11.01v0.13.4 - 2014.11.01

v0.13.3 - 2014.09.03v0.13.3 - 2014.09.03

v0.13.2 - 2014.07.15v0.13.2 - 2014.07.15

v0.13.1 - 2014.07.09v0.13.1 - 2014.07.09

v0.13.0 - 2014.07.03v0.13.0 - 2014.07.03

v0.12.1 - 2014.06.25v0.12.1 - 2014.06.25

v0.12.0 - 2014.06.25v0.12.0 - 2014.06.25

v0.11.0 – 2014.06.06v0.11.0 – 2014.06.06

v0.10.2 – 2014.06.04v0.10.2 – 2014.06.04

v0.10.1 – 2014.05.28v0.10.1 – 2014.05.28

v0.10.0 – 2014.05.27v0.10.0 – 2014.05.27

v0.9.0 – 2014.05.09v0.9.0 – 2014.05.09

Page StructurePage Structure

GridGrid

Grid horizontal classesGrid horizontal classes

Cell widthCell width

Cell horizontal offsetCell horizontal offset

Convenience classesConvenience classes

Grid vertical classesGrid vertical classes

Cell heightCell height

Cell vertical offsetCell vertical offset

Nested gridsNested grids

Overwrite grid in tablet layoutOverwrite grid in tablet layout

Load datatables script Load datatables script