<div class="container mt-5">
<h2 class="vd-heading-light h4 mb-3 sr-only">Partager la page</h2>
<ul class="list-inline vd-social-icons mt-4 mb-3">
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fas fa-envelope" aria-hidden="true"></span><span class="sr-only">Envoyer par courriel</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-twitter" aria-hidden="true"></span><span class="sr-only">Partager sur Twitter</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-facebook-f" aria-hidden="true"></span><span class="sr-only">Partager sur Facebook</span></a>
</li>
<li class="list-inline-item">
<a class="vd-social-icon" href="#"><span class="fab fa-linkedin-in" aria-hidden="true"></span><span class="sr-only">Partager sur Linkedin</span></a>
</li>
<li class="list-inline-item d-lg-none">
<a class="vd-social-icon" href="#"><span class="fab fa-whatsapp" aria-hidden="true"></span><span class="sr-only">Partager sur WhatsApp</span></a>
</li>
<li class="list-inline-item d-none d-lg-inline-block">
<a class="vd-social-icon" href="#"><span class="fas fa-print" aria-hidden="true"></span><span class="sr-only">Imprimer la page</span></a>
</li>
</ul>
</div>
<footer>
<div class="container">
<div class="text-end">
<a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-10">
<nav class="row" aria-label="pied de page">
<div class="col-sm">
<h2 class="vd-heading-light h4 sr-only">Accès directs</h2>
<ul class="list-unstyled vd-list-columns">
<li><a href="">Offre d'emploi</a></li>
<li><a href="">Statistiques</a></li>
<li><a href="">Portail sécurisé</a></li>
<li><a href="">Flux RSS</a></li>
<li><a href="">Espace sécurisé</a></li>
<li><a href="">Mentions légales</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Permaliens</a></li>
<li><a href="">Guides TYPO3</a></li>
</ul>
</div>
<div class="col-sm">
<h2 class="vd-heading-light h4 ">Sites partenaires</h2>
<ul class="list-unstyled ">
<li><a href="">Promotion Vaud.ch</a></li>
<li><a href="">Tourisme</a></li>
<li><a href="">Musées</a></li>
<li><a href="">Patrimoine</a></li>
<li><a href="">CH.ch</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-xs-2">
<div class="d-flex align-items-end flex-column h-100">
<div class="mt-auto w-100 end">
<a href="#" class="d-inline-block">
<span class="sr-only">Retour à la page d'accueil</span>
<img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
{% if (social) or (updateTime) %}
<div class="container mt-5">
{% if updateTime %}{% render '@update-time' %}{% endif %}
{%if social %}{%render '@social-icons', {title:'Partager la page', titleModifier:'sr-only', styleModifier:'mt-4 mb-3'}, true %}{% endif %}
</div>
{% endif %}
<footer{% if (not social) and (not updateTime) %} class="mt-5"{% endif %}>
{% render '@button-back-to-top' %}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-10">
<nav class="row" aria-label="pied de page">
{% for list in lists %}
<div class="col-sm">
{% if list.title %}<h2 class="vd-heading-light h4 {% if list.hideTitle %}sr-only{% endif %}">{{ list.title }}</h2>{% endif %}
<ul class="list-unstyled {% if list.style %}{{ list.style }}{% endif %}">
{%- for item in list.items -%}
<li><a href="{{ url }}">{{ item.text }}</a></li>
{%- endfor -%}
</ul>
</div>
{% endfor %}
</nav>
</div>
<div class="col-xs-2">
<div class="d-flex align-items-end flex-column h-100">
<div class="mt-auto w-100 end">
<a href="#" class="d-inline-block">
<span class="sr-only">Retour à la page d'accueil</span>
{% render '@logo--white' %}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
{
"updateTime": false,
"social": true,
"lists": [
{
"title": "Accès directs",
"style": "vd-list-columns",
"hideTitle": true,
"items": [
{
"text": "Offre d'emploi",
"url": "#"
},
{
"text": "Statistiques",
"url": "#"
},
{
"text": "Portail sécurisé",
"url": "#"
},
{
"text": "Flux RSS",
"url": "#"
},
{
"text": "Espace sécurisé",
"url": "#"
},
{
"text": "Mentions légales",
"url": "#"
},
{
"text": "Contact",
"url": "#"
},
{
"text": "Permaliens",
"url": "#"
},
{
"text": "Guides TYPO3",
"url": "#"
}
]
},
{
"title": "Sites partenaires",
"hideTitle": false,
"items": [
{
"text": "Promotion Vaud.ch",
"url": "#"
},
{
"text": "Tourisme",
"url": "#"
},
{
"text": "Musées",
"url": "#"
},
{
"text": "Patrimoine",
"url": "#"
},
{
"text": "CH.ch",
"url": "#"
}
]
}
]
}
@charset 'UTF-8';
/**
* footer
*
* 1. add a white line between on top of the green border
* 2. Make text and links more readable
*/
.footer {
position: relative; /* [1] */
padding: $spacer 0 $spacer;
background-image: url("../svg/bars_black.svg");
background-repeat: repeat-x;
background-position: center bottom;
background-size: auto 21px;
background-color: $dark;
border-bottom: 23px solid $vd-primary;
color: $white; /* [2] */
&:after {
content: ""; /* [1] */
display: block; /* [1] */
position: absolute; /* [1] */
bottom: 0; /* [1] */
left: 0; /* [1] */
width: 100%; /* [1] */
border-top: 2px solid $white; /* [1] */
}
a {
&,
&:visited {
color: $white; /* [2] */
}
&:focus {
color: $body-color; /* [2] */
}
}
@media print {
display: none;
}
}
.footer-logo {
width: 100%;
max-width: $spacer * 2;
margin-bottom: $spacer;
}