epfl-elements 1.0.1 → 4.0.0

package/dist/css/vendors.min.css

@@ -0,0 +1,9 @@
+.picker__box{padding:0 1em}.picker__header{margin-top:.75em;position:relative;text-align:center}.picker__month,.picker__year{display:inline-block;font-weight:500;margin-left:.25em;margin-right:.25em}.picker__year{color:#999;font-size:.8em;font-style:italic}.picker__select--month,.picker__select--year{border:1px solid #b7b7b7;height:2em;margin-left:.25em;margin-right:.25em;padding:.5em}@media (min-width:24.5em){.picker__select--month,.picker__select--year{margin-top:-.5em}}.picker__select--month{width:35%}.picker__select--year{width:22.5%}.picker__select--month:focus,.picker__select--year:focus{border-color:#0089ec}.picker__nav--next,.picker__nav--prev{box-sizing:content-box;height:1em;padding:.5em 1.25em;position:absolute;top:-.25em;width:1em}@media (min-width:24.5em){.picker__nav--next,.picker__nav--prev{top:-.33em}}.picker__nav--prev{left:-1em;padding-right:1.25em}@media (min-width:24.5em){.picker__nav--prev{padding-right:1.5em}}.picker__nav--next{padding-left:1.25em;right:-1em}@media (min-width:24.5em){.picker__nav--next{padding-left:1.5em}}.picker__nav--next:before,.picker__nav--prev:before{border-bottom:.5em solid transparent;border-right:.75em solid #000;border-top:.5em solid transparent;content:" ";display:block;height:0;margin:0 auto;width:0}.picker__nav--next:before{border-left:.75em solid #000;border-right:0}.picker__nav--next:hover,.picker__nav--prev:hover{background:#b1dcfb;color:#000;cursor:pointer}.picker__nav--disabled,.picker__nav--disabled:before,.picker__nav--disabled:before:hover,.picker__nav--disabled:hover{background:none;border-left-color:#f5f5f5;border-right-color:#f5f5f5;cursor:default}.picker__table{border-collapse:collapse;border-spacing:0;font-size:inherit;margin-bottom:.5em;margin-top:.75em;table-layout:fixed;text-align:center;width:100%}@media (min-height:33.875em){.picker__table{margin-bottom:.75em}}.picker__table td{margin:0;padding:0}.picker__weekday{color:#999;font-size:.75em;font-weight:500;padding-bottom:.25em;width:14.285714286%}@media (min-height:33.875em){.picker__weekday{padding-bottom:.5em}}.picker__day{border:1px solid transparent;font-weight:200;padding:.3125em 0}.picker__day--today{position:relative}.picker__day--today:before{border-left:.5em solid transparent;border-top:.5em solid #0059bc;content:" ";height:0;position:absolute;right:2px;top:2px;width:0}.picker__day--disabled:before{border-top-color:#aaa}.picker__day--outfocus{color:#ddd}.picker__day--infocus:hover,.picker__day--outfocus:hover{background:#b1dcfb;color:#000;cursor:pointer}.picker__day--highlighted{border-color:#0089ec}.picker--focused .picker__day--highlighted,.picker__day--highlighted:hover{background:#b1dcfb;color:#000;cursor:pointer}.picker--focused .picker__day--selected,.picker__day--selected,.picker__day--selected:hover{background:#0089ec;color:#fff}.picker--focused .picker__day--disabled,.picker__day--disabled,.picker__day--disabled:hover{background:#f5f5f5;border-color:#f5f5f5;color:#ddd;cursor:default}.picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover{background:#bbb}.picker__footer{text-align:center}.picker__button--clear,.picker__button--close,.picker__button--today{background:#fff;border:1px solid #fff;display:inline-block;font-size:.8em;font-weight:700;padding:.66em 0;vertical-align:bottom;width:33%}.picker__button--clear:hover,.picker__button--close:hover,.picker__button--today:hover{background:#b1dcfb;border-bottom-color:#b1dcfb;color:#000;cursor:pointer}.picker__button--clear:focus,.picker__button--close:focus,.picker__button--today:focus{background:#b1dcfb;border-color:#0089ec;outline:none}.picker__button--clear:before,.picker__button--close:before,.picker__button--today:before{display:inline-block;height:0;position:relative}.picker__button--clear:before,.picker__button--today:before{content:" ";margin-right:.45em}.picker__button--today:before{border-left:.66em solid transparent;border-top:.66em solid #0059bc;top:-.05em;width:0}.picker__button--clear:before{border-top:3px solid #e20;top:-.25em;width:.66em}.picker__button--close:before{color:#777;content:"\D7";font-size:1.1em;margin-right:.35em;top:-.1em;vertical-align:top}.picker__button--today[disabled],.picker__button--today[disabled]:hover{background:#f5f5f5;border-color:#f5f5f5;color:#ddd;cursor:default}.picker__button--today[disabled]:before{border-top-color:#aaa}
+
+/*! Flickity v2.2.2
+https://flickity.metafizzy.co
+---------------------------------------------- */.flickity-enabled{position:relative}.flickity-enabled:focus{outline:none}.flickity-viewport{height:100%;overflow:hidden;position:relative}.flickity-slider{height:100%;position:absolute;width:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{background:hsla(0,0%,100%,.75);border:none;color:#333;position:absolute}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{box-shadow:0 0 0 5px #19f;outline:none}.flickity-button:active{opacity:.6}.flickity-button:disabled{cursor:auto;opacity:.3;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{border-radius:50%;height:44px;top:50%;transform:translateY(-50%);width:44px}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{left:10px;right:auto}.flickity-prev-next-button .flickity-button-icon{height:60%;left:20%;position:absolute;top:20%;width:60%}.flickity-page-dots{bottom:-25px;line-height:1;list-style:none;margin:0;padding:0;position:absolute;text-align:center;width:100%}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{background:#333;border-radius:50%;cursor:pointer;display:inline-block;height:10px;margin:0 8px;opacity:.25;width:10px}.flickity-page-dots .dot.is-selected{opacity:1}.flickity-enabled.is-fullscreen{background:rgba(0,0,0,.9);height:100%;left:0;padding-bottom:35px;position:fixed;top:0;width:100%;z-index:1}.flickity-enabled.is-fullscreen .flickity-page-dots{bottom:10px}.flickity-enabled.is-fullscreen .flickity-page-dots .dot{background:#fff}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{border-radius:4px;display:block;height:24px;right:10px;top:10px;width:24px}.flickity-rtl .flickity-fullscreen-button{left:10px;right:auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{height:16px;left:4px;position:absolute;top:4px;width:16px}.introjs-overlay{background-color:#000;background:-moz-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:-webkit-gradient(radial,center center,0,center center,100%,color-stop(0,rgba(0,0,0,.4)),color-stop(100%,rgba(0,0,0,.9)));background:-webkit-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:-o-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:-ms-radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);background:radial-gradient(center,ellipse farthest-corner,rgba(0,0,0,.4) 0,rgba(0,0,0,.9) 100%);box-sizing:content-box;filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);opacity:0;position:absolute;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;z-index:999999}.introjs-fixParent{opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;z-index:auto!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{background-color:#fff;filter:alpha(opacity=0);opacity:0;position:absolute;z-index:99999999!important}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{background-color:#fff;background-color:hsla(0,0%,100%,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);z-index:9999998}.introjs-helperLayer,.introjs-tooltipReferenceLayer{box-sizing:content-box;position:absolute;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-tooltipReferenceLayer{background-color:transparent;visibility:hidden;z-index:100000000}.introjs-helperLayer *,.introjs-helperLayer :after,.introjs-helperLayer :before{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{background:#ff3019;background:-webkit-linear-gradient(top,#ff3019,#cf0404);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(180deg,#ff3019 0,#cf0404);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.4);box-sizing:content-box;color:#fff;filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)";filter:"progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)";font-family:Arial,verdana,tahoma;font-size:13px;font-weight:700;height:20px;left:-16px;line-height:20px;padding:2px;position:absolute;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);top:-16px;visibility:visible;width:20px;z-index:9999999999!important}.introjs-arrow{border:5px solid transparent;content:"";position:absolute}.introjs-arrow.top,.introjs-arrow.top-right{border-bottom-color:#fff;top:-10px}.introjs-arrow.top-right{right:10px}.introjs-arrow.top-middle{border-bottom-color:#fff;left:50%;margin-left:-5px;top:-10px}.introjs-arrow.right{border-left-color:#fff;right:-10px;top:10px}.introjs-arrow.right-bottom{border-left-color:#fff;bottom:10px;right:-10px}.introjs-arrow.bottom,.introjs-arrow.bottom-right{border-top-color:#fff;bottom:-10px}.introjs-arrow.bottom-right{right:10px}.introjs-arrow.bottom-middle{border-top-color:#fff;bottom:-10px;left:50%;margin-left:-5px}.introjs-arrow.left{border-right-color:#fff;left:-10px;top:10px}.introjs-arrow.left-bottom{border-right-color:#fff;bottom:10px;left:-10px}.introjs-tooltip{background-color:#fff;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);box-sizing:content-box;max-width:300px;min-width:200px;padding:10px;position:absolute;-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out;visibility:visible}.introjs-tooltipbuttons{text-align:right;white-space:nowrap}.introjs-button{zoom:1;-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);border:1px solid #d4d4d4;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;box-sizing:content-box;color:#333;cursor:pointer;display:inline-block;*display:inline;font:11px/normal sans-serif;margin:10px 0 0;outline:none;overflow:visible;padding:.3em .8em;position:relative;text-decoration:none;text-shadow:1px 1px 0 #fff;white-space:nowrap}.introjs-button:hover{border-color:#bcbcbc;box-shadow:0 1px 1px #e3e3e3;text-decoration:none}.introjs-button:active,.introjs-button:focus{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{border:0;padding:0}.introjs-skipbutton{box-sizing:content-box;color:#7a7a7a;margin-right:5px}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:none}.introjs-prevbutton.introjs-fullbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton.introjs-fullbutton{-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em}.introjs-disabled,.introjs-disabled:focus,.introjs-disabled:hover{background-color:#f4f4f4;background-image:none;border-color:#d4d4d4;box-shadow:none;color:#9a9a9a;cursor:default;text-decoration:none}.introjs-hidden{display:none}.introjs-bullets{text-align:center}.introjs-bullets ul{box-sizing:content-box;clear:both;display:inline-block;margin:15px auto 0;padding:0}.introjs-bullets ul li{box-sizing:content-box;float:left;list-style:none;margin:0 2px}.introjs-bullets ul li a{background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-sizing:content-box;cursor:pointer;display:block;height:6px;text-decoration:none;width:6px}.introjs-bullets ul li a.active,.introjs-bullets ul li a:hover{background:#999}.introjs-progress{background-color:#ecf0f1;border-radius:4px;box-sizing:content-box;height:10px;margin:10px 0 5px;overflow:hidden}.introjs-progressbar{background-color:#08c;box-sizing:content-box;float:left;font-size:10px;height:100%;line-height:10px;text-align:center;width:0}.introjsFloatingElement{height:0;left:50%;position:absolute;top:50%;width:0}.introjs-fixedTooltip{position:fixed}.introjs-hint{background:transparent;box-sizing:content-box;cursor:pointer;height:15px;position:absolute;width:20px}.introjs-hint:focus{border:0;outline:0}.introjs-hidehint{display:none}.introjs-fixedhint{position:fixed}.introjs-hint:hover>.introjs-hint-pulse{border:5px solid rgba(60,60,60,.57)}.introjs-hint-pulse{background-color:hsla(0,0%,53%,.24);border:5px solid rgba(60,60,60,.27);-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;box-sizing:content-box;height:10px;position:absolute;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;width:10px;z-index:10}.introjs-hint-no-anim .introjs-hint-dot{-webkit-animation:none;-moz-animation:none;animation:none}.introjs-hint-dot{-webkit-animation:introjspulse 3s ease-out;-moz-animation:introjspulse 3s ease-out;animation:introjspulse 3s ease-out;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;background:transparent;border:10px solid hsla(0,0%,57%,.36);-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;box-sizing:content-box;height:50px;left:-25px;opacity:0;position:absolute;top:-25px;width:50px;z-index:1}@-webkit-keyframes introjspulse{0%{opacity:0;-webkit-transform:scale(0)}25%{opacity:.1;-webkit-transform:scale(0)}50%{opacity:.3;-webkit-transform:scale(.1)}75%{opacity:.5;-webkit-transform:scale(.5)}to{opacity:0;-webkit-transform:scale(1)}}@-moz-keyframes introjspulse{0%{opacity:0;-moz-transform:scale(0)}25%{opacity:.1;-moz-transform:scale(0)}50%{opacity:.3;-moz-transform:scale(.1)}75%{opacity:.5;-moz-transform:scale(.5)}to{opacity:0;-moz-transform:scale(1)}}@keyframes introjspulse{0%{opacity:0;transform:scale(0)}25%{opacity:.1;transform:scale(0)}50%{opacity:.3;transform:scale(.1)}75%{opacity:.5;transform:scale(.5)}to{opacity:0;transform:scale(1)}}
+
+/*! Tablesaw - v3.1.2 - 2019-03-19
+* https://github.com/filamentgroup/tablesaw
+* Copyright (c) 2019 Filament Group; Licensed MIT */.tablesaw{border:0;border-collapse:collapse;empty-cells:show;max-width:100%;padding:0;width:100%}.tablesaw *{box-sizing:border-box}.tablesaw-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1px solid #ccc;border-radius:.25em;box-shadow:0 1px 0 #fff;color:#4a4a4a;cursor:pointer;margin:0;padding:.5em .85em .4em;text-align:center;text-decoration:none;text-transform:capitalize}a.tablesaw-btn{color:#1c95d4}.tablesaw-btn:hover{text-decoration:none}.tablesaw-btn:active{background-color:#ddd}@supports (box-shadow:none){.tablesaw-btn:focus{background-color:#fff;box-shadow:0 0 .35em #4faeef!important;outline:none}}.tablesaw-btn-select select{background:none;border:none;color:transparent;display:inline-block;height:100%;left:0;margin:0;min-height:1em;opacity:0;position:absolute;top:0;width:100%;z-index:2}.tablesaw-btn select option{background:#fff;color:#000}.tablesaw-btn{display:inline-block;height:auto;position:relative;top:0;width:auto}.tablesaw-btn.btn-small{font-size:1.0625em;line-height:19px;padding:.3em 1em}.tablesaw-btn.btn-micro{font-size:.8125em;padding:.4em .7em .25em}.tablesaw-btn-select{color:#4d4d4d;display:inline-block;min-width:7.25em;padding-right:2.5em;text-align:left}.tablesaw-btn-select:after{background:none;background-position:.25em .45em;background-repeat:no-repeat;bottom:0;content:" ";content:"\25bc";font-size:.55em;left:auto;margin:0;padding-left:1em;padding-top:1.2em;position:absolute;right:0;top:0;width:1.8em}.tablesaw-btn-select.btn-micro:after,.tablesaw-btn-select.btn-small:after{background:none;border-left-width:0;box-shadow:none;font-size:.5em;line-height:1.65;padding-right:.5em;padding-top:1em;width:1.2em}.tablesaw-advance .tablesaw-btn{-webkit-appearance:none;-moz-appearance:none;border-radius:.25em;box-sizing:border-box;text-shadow:0 1px 0 #fff}.tablesaw-advance .tablesaw-btn.btn-micro{font-size:.8125em;padding:.3em .7em .25em}.tablesaw-advance a.tablesaw-nav-btn:first-child{margin-left:0}.tablesaw-advance a.tablesaw-nav-btn:last-child{margin-right:0}.tablesaw-advance a.tablesaw-nav-btn{background-position:50% 50%;display:inline-block;height:1.8em;margin-left:.25em;margin-right:.25em;overflow:hidden;position:relative;text-indent:-9999px;width:1.8em}.tablesaw-advance a.tablesaw-nav-btn.down:before,.tablesaw-advance a.tablesaw-nav-btn.left:before,.tablesaw-advance a.tablesaw-nav-btn.right:before,.tablesaw-advance a.tablesaw-nav-btn.up:before{content:"\0020";height:0;overflow:hidden;position:absolute;width:0}.tablesaw-advance a.tablesaw-nav-btn.down:before{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid grey;left:.5em;top:.65em}.tablesaw-advance a.tablesaw-nav-btn.up:before{border-bottom:5px solid grey;border-left:5px solid transparent;border-right:5px solid transparent;left:.5em;top:.65em}.tablesaw-advance a.tablesaw-nav-btn.left:before,.tablesaw-advance a.tablesaw-nav-btn.right:before{border-bottom:5px solid transparent;border-top:5px solid transparent;top:.45em}.tablesaw-advance a.tablesaw-nav-btn.left:before{border-right:5px solid grey;left:.6em}.tablesaw-advance a.tablesaw-nav-btn.right:before{border-left:5px solid grey;left:.7em}.tablesaw-advance a.tablesaw-nav-btn.disabled{cursor:default;opacity:.25;pointer-events:none}.tablesaw-bar{clear:both}.tablesaw-bar *{box-sizing:border-box}.tablesaw-bar-section{float:left}.tablesaw-bar-section label{clear:both;color:#888;display:block;font-size:.875em;margin-right:.5em;padding:.5em 0;text-transform:uppercase}.tablesaw-btn,.tablesaw-enhanced .tablesaw-btn{margin-bottom:.5em;margin-top:.5em}.tablesaw-btn-select,.tablesaw-enhanced .tablesaw-btn-select{margin-bottom:0}.tablesaw-bar .tablesaw-bar-section .tablesaw-btn{background:transparent;border:none;box-shadow:none;font-size:1em;margin-left:.4em;margin-top:0;padding-left:.3em;text-transform:uppercase}.tablesaw-bar .tablesaw-bar-section .btn-select{min-width:0}.tablesaw-bar .tablesaw-bar-section .btn-select:after{padding-top:.9em}.tablesaw-bar .tablesaw-bar-section select{background:transparent;color:#888;text-transform:none}.tablesaw-bar-section~table{clear:both}.tablesaw-bar-section .abbreviated{display:inline}.tablesaw-bar-section .longform{display:none}@media (min-width:24em){.tablesaw-bar-section .abbreviated{display:none}.tablesaw-bar-section .longform{display:inline}}.tablesaw td,.tablesaw th{padding:.5em .7em;text-align:left;vertical-align:middle}.tablesaw-sortable-btn{padding:.5em .7em}.tablesaw thead th{text-align:left}.tablesaw-row-border tr{border-bottom:1px solid #dfdfdf}.tablesaw-row-zebra tr:nth-child(2n){background-color:#f8f8f8}.tablesaw caption{margin:.59375em 0;text-align:left}.tablesaw-swipe .tablesaw-swipe-cellpersist{border-right:2px solid #e4e1de}.tablesaw-swipe-shadow .tablesaw-swipe-cellpersist{border-right-width:1px;box-shadow:3px 0 4px -1px #e4e1de}.tablesaw-stack td .tablesaw-cell-label,.tablesaw-stack th .tablesaw-cell-label{display:none}@media only all{.tablesaw-stack{clear:both}.tablesaw-stack td,.tablesaw-stack th{display:block;text-align:left}.tablesaw-stack tr{clear:both;display:table-row}.tablesaw-stack td .tablesaw-cell-label,.tablesaw-stack th .tablesaw-cell-label{display:inline-block;padding:0 .6em 0 0;width:30%}.tablesaw-stack td .tablesaw-cell-label-top,.tablesaw-stack th .tablesaw-cell-label-top{display:block;margin:.4em 0;padding:.4em 0}.tablesaw-cell-label{display:block}.tablesaw-stack tbody th.group{margin-top:-1px}.tablesaw-stack th.group b.tablesaw-cell-label{display:none!important}}@media (max-width:39.9375em){.tablesaw-stack tbody tr{border-bottom:1px solid #dfdfdf;display:block;width:100%}.tablesaw-stack thead td,.tablesaw-stack thead th{display:none}.tablesaw-stack tbody td,.tablesaw-stack tbody th{clear:left;display:block;float:left;width:100%}.tablesaw-cell-label{vertical-align:top}.tablesaw-cell-content{display:inline-block;max-width:67%}.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content,.tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label{display:block;max-width:100%;padding:0;width:100%}.tablesaw-stack td:empty,.tablesaw-stack th:empty{display:none}}@media (min-width:40em){.tablesaw-stack tr{display:table-row}.tablesaw-stack td,.tablesaw-stack th,.tablesaw-stack thead td,.tablesaw-stack thead th{display:table-cell;margin:0}.tablesaw-stack td .tablesaw-cell-label,.tablesaw-stack th .tablesaw-cell-label{display:none!important}}.tablesaw-fix-persist{table-layout:fixed}@media only all{.tablesaw-swipe td.tablesaw-swipe-cellhidden,.tablesaw-swipe th.tablesaw-swipe-cellhidden{display:none}}.tablesaw-overflow{-webkit-overflow-scrolling:touch;overflow-x:auto;position:relative;width:100%}.tablesaw-overflow>.tablesaw{margin-top:2px}.tablesaw-columntoggle-btn span{display:inline-block;text-indent:-9999px}.tablesaw-columntoggle-btnwrap{position:relative}.tablesaw-columntoggle-btnwrap .dialog-content{padding:.5em}.tablesaw-columntoggle tbody td{line-height:1.5}.tablesaw-columntoggle-popup{display:none}.tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup{background-color:#fff;border:1px solid #ccc;border-radius:.2em;box-shadow:0 1px 2px #ccc;display:block;padding:.5em .8em;position:absolute;right:0;top:2em;z-index:1}.tablesaw-columntoggle-popup fieldset{margin:0}@media only all{.tablesaw-columntoggle td.tablesaw-priority-0,.tablesaw-columntoggle td.tablesaw-priority-1,.tablesaw-columntoggle td.tablesaw-priority-2,.tablesaw-columntoggle td.tablesaw-priority-3,.tablesaw-columntoggle td.tablesaw-priority-4,.tablesaw-columntoggle td.tablesaw-priority-5,.tablesaw-columntoggle td.tablesaw-priority-6,.tablesaw-columntoggle th.tablesaw-priority-0,.tablesaw-columntoggle th.tablesaw-priority-1,.tablesaw-columntoggle th.tablesaw-priority-2,.tablesaw-columntoggle th.tablesaw-priority-3,.tablesaw-columntoggle th.tablesaw-priority-4,.tablesaw-columntoggle th.tablesaw-priority-5,.tablesaw-columntoggle th.tablesaw-priority-6{display:none}}.tablesaw-columntoggle-btnwrap .dialog-content{left:auto!important;margin:-.5em auto 0;max-width:18em;right:1em;top:0!important;width:12em}.tablesaw-columntoggle-btnwrap .dialog-content:focus{outline-style:none}@media (min-width:20em){.tablesaw-columntoggle td.tablesaw-priority-1,.tablesaw-columntoggle th.tablesaw-priority-1{display:table-cell}}@media (min-width:30em){.tablesaw-columntoggle td.tablesaw-priority-2,.tablesaw-columntoggle th.tablesaw-priority-2{display:table-cell}}@media (min-width:40em){.tablesaw-columntoggle td.tablesaw-priority-3,.tablesaw-columntoggle th.tablesaw-priority-3{display:table-cell}.tablesaw-columntoggle tbody td{line-height:2}}@media (min-width:50em){.tablesaw-columntoggle td.tablesaw-priority-4,.tablesaw-columntoggle th.tablesaw-priority-4{display:table-cell}}@media (min-width:60em){.tablesaw-columntoggle td.tablesaw-priority-5,.tablesaw-columntoggle th.tablesaw-priority-5{display:table-cell}}@media (min-width:70em){.tablesaw-columntoggle td.tablesaw-priority-6,.tablesaw-columntoggle th.tablesaw-priority-6{display:table-cell}}@media only all{.tablesaw-columntoggle td.tablesaw-toggle-cellhidden,.tablesaw-columntoggle th.tablesaw-toggle-cellhidden{display:none}.tablesaw-columntoggle td.tablesaw-toggle-cellvisible,.tablesaw-columntoggle th.tablesaw-toggle-cellvisible{display:table-cell}}.tablesaw-columntoggle-popup .tablesaw-btn-group>label{cursor:default;display:block;padding:.2em 0;white-space:nowrap}.tablesaw-columntoggle-popup .tablesaw-btn-group>label input{margin-right:.8em}.tablesaw-sortable-head{position:relative;vertical-align:top}.tablesaw .tablesaw-sortable-head{padding:0}.tablesaw-sortable-btn{background:transparent;border:0;color:inherit;font:inherit;min-width:100%;text-align:inherit;text-transform:inherit}.tablesaw-sortable-arrow:after{content:" ";display:inline-block;height:14px;margin-left:.3125em;width:10px}.tablesaw-sortable-ascending .tablesaw-sortable-arrow:after,.tablesaw-sortable-descending .tablesaw-sortable-arrow:after{content:"\0020"}.tablesaw-sortable-ascending .tablesaw-sortable-arrow:after{content:"\2191"}.tablesaw-sortable-descending .tablesaw-sortable-arrow:after{content:"\2193"}.tablesaw-advance{float:right}.tablesaw-advance.minimap{margin-right:.4em}.tablesaw-advance-dots{float:left;list-style:none;margin:0;padding:0}.tablesaw-advance-dots li{display:table-cell;margin:0;padding:.4em .2em}.tablesaw-advance-dots li i{background:#555;border-radius:100%;display:inline-block;height:.25em;width:.25em}.tablesaw-advance-dots-hide{cursor:default;opacity:.25;pointer-events:none}.cc-window{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}.cc-revoke,.cc-window{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;overflow:hidden;position:fixed;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:24em;padding:2em}.cc-window.cc-banner{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:1em 1.8em;width:100%}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{display:inline-block;opacity:.8;padding:.2em;text-decoration:underline}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{border-style:solid;border-width:2px;display:block;font-size:.9em;font-weight:700;padding:.4em .8em;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;font-size:1.6em;line-height:.75;opacity:.9;position:absolute;right:.5em;top:.5em}.cc-close:focus,.cc-close:hover{opacity:1}.cc-revoke.cc-top{border-bottom-left-radius:.5em;border-bottom-right-radius:.5em;left:3em;top:0}.cc-revoke.cc-bottom{border-top-left-radius:.5em;border-top-right-radius:.5em;bottom:0;left:3em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{left:unset;right:3em}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{bottom:0;left:0;right:0}.cc-banner .cc-message{-webkit-box-flex:1;display:block;-ms-flex:1 1 auto;flex:1 1 auto;margin-right:1em;max-width:100%}.cc-compliance{-webkit-box-align:center;-ms-flex-align:center;-ms-flex-line-pack:justify;align-content:space-between;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}.cc-floating.cc-theme-classic{border-radius:5px;padding:1.2em}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{-webkit-box-flex:0;display:inline;-ms-flex:none;flex:none;text-align:center}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{height:100%;margin:0;padding:.8em 1.8em}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

package/dist/docs/accessibility.html

@@ -0,0 +1,70 @@
+<div class="container-grid">
+
+  <h1 class="mt-3 mb-5">Accessibility (A11y)</h1>
+
+  <h2>General recommendations</h2>
+  <p class="mt-3">In any EPFL project, you need to be thoughtful about accessibility: this does not only concern people browsing the web with a screen reader, but also people using the keyboard only, colorblind people, people who don't understand the language, etc.</p>
+
+  <hr>
+
+  <h2 class="mt-3 mb-3">Specific recommendations</h2>
+
+  <h3 class="mt-3">Colors and contrasts</h3>
+  <p>Good color contrasts for accessibility mean using colors that provide maximum contrast. You need to make sure there is enough contrast between the content and its background.</p>
+  <p>Please refer to the <a href="#/colors">color palette page</a>. The <b>accessibility table</b> provides color pairings that respect this recommendation.</p>
+
+  <h3>HTML5</h3>
+  <p>Use HTML5 as much as possible, don't use a basic <code>&lt;div&gt;</code> everywhere and prefer the correct and semantic elements instead.</p>
+
+  <h3>Aria</h3>
+  <p>Use Aria tags whenever it is needed, and remember <b>it is better to not use an aria tag than to use the wrong one</b>.</p>
+
+  <h3>Skip links (access nav)</h3>
+  <p>Don't forget to add the <a href="#/molecules/access-nav">skip links</a> to every page of your project. They should allow the user to more easily get to the main areas of the website.</p>
+  <p>To do that:</p>
+  <ol class="list-numbered">
+    <li>Set main area to:  <code>&lt;main role="main" id="main"&gt;</code></li>
+    <li>Set main navigation to: <code>&lt;nav class="nav-main" id="main-navigation" role="navigation"&gt;</code></li>
+    <li>Set search field to: <code>&lt;input type="text" class="form-control" id="search" placeholder="Rechercher"&gt;</code></li>
+    <li>Set a contact email</li>
+  </ol>
+
+  <hr>
+
+  <div class="mt-3 mb-5">
+    <h2 class="mb-3">Official A11y guidelines</h2>
+    <div class="introduction bg-gray-100 mt-3">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-10 offset-md-1">
+            <p>Elements follows the <b>Web Content Accessibility Guidelines 2.1</b>. Those guidelines must be applied the best way possible and follow the <b>level AA</b> recommendations.</p>
+            <div>
+              <a href="https://www.w3.org/TR/WCAG21" target="_blank" class="card link-trapeze-horizontal">
+                <div class="card-body">
+                  <h5 class="card-title text-arrow mb-0">WCAG 2.1 website</h5>
+                </div>
+              </a>
+            </div>
+            <p>You can as well <a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&currentsidebar=%23col_customize&levels=aaa" target="_blank">verify the requirements (success criteria) and techniques</a> about WCAG 2.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h2>Further read</h2>
+  <p>Please consider those links when adressing specific accessibility features:</p>
+  <ul>
+    <li><a href="https://a11yproject.com/" target="_blank"><b>The A11Y Project</b></a><br>“A community-driven effort to make web accessibility easier.”</li>
+    <li><a href="https://www.access-for-all.ch/en/" target="_blank"><b>Access For All</b></a><br>Swiss Accessibility foundation for information and communication technology.</li>
+  </ul>
+
+  <hr>
+
+  <h6 class="mt-3">A quote, for when you need to advocate about accessibility</h6>
+  <blockquote class="blockquote mt-3 mb-5">
+        <p class="mb-0">The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.</p>
+        <footer class="blockquote-footer"><cite title="Philip K. Dick"><a href="https://www.w3.org/standards/webdesign/accessibility" target="_blank">Henry & McGee, W3C</a></cite></footer>
+      </blockquote>
+
+</div>

package/dist/docs/contribute/index.md

@@ -0,0 +1,35 @@
+# Contribute to Elements
+
+## How to install
+Refer to our readme file in [the project repository](https://github.com/epfl-si/elements)
+
+## Contribute to the documentation
+This chapter is about writing documentation for the Elements project.
+
+## File structure
+
+The Git repository contains the following major subdirectories:
+- `./assets/` contains the bits and pieces of HTML, JS and (S)CSS that compose the EPFL Web visual identity, along with usage examples (in Twig format) metadata (YAML) and documentation (in Markdown)
+- `./reader/` contains a theming-neutral React Web app to showcase these graphical elements
+- `./docs/` contains general-purpose documentation to help you use epfl-elements in your Web site or app.
+
+## Contributing
+
+#### Locally
+1. Clone the [repository](https://github.com/epfl-si/elements)
+2. Create a new `doc/YOUR_BRANCHS_NAME` branch
+3. **Add** _or_ **edit** your documentation file under `./docs`
+4. **Commit** and **push** all your changes
+5. **Create** a pull request
+
+#### Online
+_⚠️ Github UI doesn't provide branch creation, so it will be harder to review._
+1. Go to the Github [repository](https://github.com/epfl-si/elements)
+2. **Add** _or_ **edit** your documentation file under `./docs`
+3. **Save** (will do a commit)
+
+## Republish
+
+The documentation can be directly seen inside the `./docs` directory by navigating in the **Github code tab**.
+
+To see the newly edited documentation **in the styleguide**, a **build** and **deploy** is required after merging the related pull requests. **Locally** you just have to `$ yarn deploy` to re-deploy the documentation.

package/dist/docs/contribute/support-and-request.html

@@ -0,0 +1,125 @@
+<div class="container-grid">
+
+  <h1 class="mt-3">Support & request</h1>
+
+  <p class="mt-3">
+    The EPFL’s styleguide team is committed to maintaining quality documentation of its design system. We are welcoming any feedback given on bugs, designs issues or new ideas. You can find all the <a href="#/doc/contribute--index.md" alt="Link to learn about contributing to this styleguide">information about contribution</a> in the dedicated page.
+    <br>
+    <br>
+    Elements is maintained by <a href="https://mediacom.epfl.ch/"><b>Mediacom</b></a>. All requests are sent there, then dispatched to the appropriate people.
+  </p>
+
+  <div class="mt-3">
+    <div class="introduction bg-gray-100">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-10 offset-md-1 text-center">
+            <h2>Requests</h2>
+            <p>
+              You have questions about Elements?
+              <br/>Please contact <strong><a href="https://support.epfl.ch/epfl" alt="Link to send an email to the support team">Support</a></strong> or <strong><a href="https://github.com/epfl-si/elements/issues/new" alt="Link to GitHub for opening an issue">open an issue</a></strong> in GitHub.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h1 class="mt-5">FAQ</h1>
+  <p>
+    We regrouped here the most common questions we get about Elements. If you have some more, please reach out!
+  </p>
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#collapse-1"
+    aria-expanded="false"
+    aria-controls="collapse-1"
+    >
+    How can I contribute or suggest new components/ideas?
+  </button>
+  <div class="collapse collapse-item collapse-item-desktop" id="collapse-1">
+    <p>
+      First of all, <b>thank you very much</b> for reading these lines. We really appreciate your interest into contributing to elements!
+    </p>
+    <p>
+      For all specific informations concerning contributions, please visit the <a href="#/doc/contribute--index.md">dedicated page</a> we built about this topic, just for you.
+    </p>
+  </div>
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#collapse-2"
+    aria-expanded="false"
+    aria-controls="collapse-2"
+    >
+    Which browser versions are supported?
+  </button>
+  <div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
+    <p>
+      Elements is supporting the following browsers and versions:
+      <ul>
+        <li>Chrome  63, 64+</li>
+        <li>Chrome for Android  64+</li>
+        <li>Firefox 57, 58+</li>
+        <li>Safari  10.1, 11+</li>
+        <li>Safari iOS  10.3, 11+</li>
+        <li>Internet Explorer 11</li>
+        <li>Edge  15, 16+</li>
+        <li>Opera 49, 50+</li>
+      </ul>
+    </p>
+  </div>
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#collapse-3"
+    aria-expanded="false"
+    aria-controls="collapse-3"
+    >
+    Why hasn't my bug been fixed yet?
+  </button>
+  <div class="collapse collapse-item collapse-item-desktop" id="collapse-3">
+    <p>
+      If you have a pressing bug, it is best to make a Pull Request (PR) on <a href="https://github.com/epfl-si/elements">the github repository</a> containing your suggestion of resolution for this bug. Our team will try to address your bug as soon as possible. Issues that are out of scope will be commented and closed until it becomes a higher priority. Thank you for your understanding.
+    </p>
+  </div>
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#collapse-4"
+    aria-expanded="false"
+    aria-controls="collapse-4"
+    >
+    Why is it only HTML/CSS/JS?
+  </button>
+  <div class="collapse collapse-item collapse-item-desktop" id="collapse-4">
+    <p>
+      The styleguide is Web first. We provide a CMS-agnostic or technology-agnostic design documentation. That's why you will only find components that match web standards. That doesn't mean you can't document your own project. We'll be happy to reference your work from other platforms here! Reach out to us.</p>
+  </div>
+  <button
+    class="collapse-title collapse-title-desktop collapsed"
+    type="button"
+    data-toggle="collapse"
+    data-target="#collapse-5"
+    aria-expanded="false"
+    aria-controls="collapse-5"
+    >
+    What is the meaning of 42?
+  </button>
+  <div class="collapse collapse-item collapse-item-desktop" id="collapse-5">
+    <p>
+      The number 42 is, in The Hitchhiker's Guide to the Galaxy by Douglas Adams, the "Answer to the Ultimate Question of Life, the Universe, and Everything", calculated by an enormous supercomputer named Deep Thought over a period of 7.5 million years. Unfortunately, no one knows what the question is.
+      <br>
+      <strong>More information on <a href="https://en.wikipedia.org/wiki/42_(number)#The_Hitchhiker's_Guide_to_the_Galaxy" target="_blank">Wikipedia</a></strong></p>
+  </div>
+
+  <hr>
+
+  <figcaption>© EPFL 2018-2022 — Mediacom</figcaption>
+
+</div>

package/dist/docs/design/helpers.html

@@ -0,0 +1,47 @@
+<div class="container">
+  <h1>Helpers</h1>
+  <h2>Text decoration</h2>
+  <div class="tlbx-notes">
+    <p>
+      The <code>text-decoration-line</code> property sets the kind of
+      decoration that is used on text in an element, such as an underline
+      or overline.
+    </p>
+    <p>
+      Set the decoration of a text using the <code>text-decoration-underline</code>,
+      <code>text-decoration-overline</code>, <code>text-decoration-line-through</code>, and
+      <code>text-decoration-none</code> utilities.
+    </p>
+  </div>
+  <div class="tlbx-item">
+    <div class="tlbx-item-preview">
+      <p class="text-decoration-underline">This text has a line underneath it.</p>
+      <p class="text-decoration-overline">This text has a line above it.</p>
+      <p class="text-decoration-line-through">This text has a line going through it.</p>
+      <a href="#" class="text-decoration-none">
+        This link has its text decoration removed
+      </a>
+    </div>
+  </div>
+  <h2 class="mt-5">Opacity</h2>
+  <div class="tlbx-notes">
+    <p>
+      The <code>opacity</code> property sets the opacity level for an element.
+      The opacity level describes the transparency level, where <code>1</code>
+      is not transparent at all, <code>.5</code> is 50% visible, and
+      <code>0</code> is completely transparent.
+    </p>
+    <p>
+      Set the opacity of an element using the <code>opacity-{value}</code>
+      utilities.
+    </p>
+  </div>
+  <div class="tlbx-item">
+    <div class="tlbx-item-preview">
+      <button class="btn btn-primary opacity-100">100%</button>
+      <button class="btn btn-primary opacity-75">75%</button>
+      <button class="btn btn-primary opacity-50">50%</button>
+      <button class="btn btn-primary opacity-25">25%</button>
+    </div>
+  </div>
+</div>

package/dist/docs/design/iconography.md

@@ -0,0 +1,3 @@
+# Iconography
+
+See [Icon](#/atoms/icon) section.

package/dist/docs/design/index.html

@@ -0,0 +1,61 @@
+<div class="text-center mt-3 mb-5">
+  <h1>Design principles</h1>
+  <p>Elements is the living design documentation of EPFL digital ecosystem</p>
+</div>
+
+<div class="container my-5 mb-5">
+  <hr>
+</div>
+
+<div class="container my-5 mb-5">
+  <h2>Our 3 design principles</h2>
+  <p>Our goal is to grow a single design system that supports a unified experience across all of EPFL platforms. To achieve this, we articulate our design desicions based on 3 master principles:</p>
+  <div class="card-deck">
+    <div class="card">
+      <picture class="card-img-top">
+        <img src="./images/styleguide/illustrations/animation-clarity.gif" class="img-fluid" title="Clarity principle" alt="A diamond that dispatch its sparkles" />
+      </picture>
+      <div class="card-body">
+        <h3>Clarity</h3>
+        <p>Our message is clear & understood. Clarity comes through intentional choices that support our values. Accessibility requires clarity.</p>
+      </div>
+    </div>
+    <div class="card">
+      <picture class="card-img-top">
+        <img src="./images/styleguide/illustrations/animation-balance.gif" class="img-fluid" title="Balance principle" alt="A pendulum indicating the equilibrium of things" />
+      </picture>
+      <div class="card-body">
+        <h3>Balance</h3>
+        <p>We serve our own diversity. Balance comes from rational decisions on what we know and what we communicate. We seek harmony.</p>
+      </div>
+    </div>
+    <div class="card">
+      <picture class="card-img-top">
+        <img src="./images/styleguide/illustrations/animation-modularity.gif" class="img-fluid" title="Modularity principle" alt="A square made of building blocks" />
+      </picture>
+      <div class="card-body">
+        <h3>Modularity</h3>
+        <p>Building blocks form or design system. We achieve consistency using those blocks. This versatility is the echo of our capacity to innovate.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row my-5">
+    <div class="col-lg-6 mb-3">
+      <h2>3, III, Trois, Three</h2>
+      <img src="./images/styleguide/illustrations/three.png" class="img-fluid mb-3" title="Modularity principle" alt="A square made of building blocks" />
+      <p>It is our goto number: it evoques our 3 missions: <strong>Education</strong>, <strong>Research</strong> & <strong>Innovation</strong>. Pronounced the French way, it sounds like “free“.</p>
+    </div>
+    <div class="col-lg-6 mb-3">
+      <h2>Atomic approach</h2>
+      <img src="./images/styleguide/illustrations/atomic-design-teaser.png" class="img-fluid mb-3" title="Modularity principle" alt="A square made of building blocks" />
+      <p>Elements component hierarchy is based on the <a href="http://bradfrost.com/blog/post/atomic-web-design/" target="_blank">Atomic Design approach</a>. User interface elements are construction bricks of various size and complexity.</p>
+    </div>
+  </div>
+</div>
+
+<div class="container my-5 mb-5">
+  <hr>
+</div>