Gentinfo is the central point of contact for information about the city council and the city of Ghent.
Use the Gentinfo component to show Gentinfo contact information as a call-to-action on a page when it is relevant to the page and when a separate call-to-action for Gentinfo is useful for users.
The Gentinfo component should always be used as is. The elements, style, layout and content in the Gentinfo component cannot be changed in any way.
In the examples the Gentinfo component is shown as it should be included in different languages.
Note that the contact information of Gentinfo is also always included in the footer.
The Gentinfo component contains the following elements:
{# Variables #}
{% if paragraphs is not defined %}
{% set paragraphs = [
'Do you have any questions, complaints, suggestions, notifications etc. concerning the City of Ghent? If this is the case, please contact Gentinfo.',
'We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.'
] %}
{% endif %}
{% if listItems is not defined %}
{% set listItems = [
'<i aria-hidden="true" class="icon-phone"></i><a href="tel:092101010">09 210 10 10</a>',
'<i aria-hidden="true" class="icon-envelope"></i><a href="mailto:gentinfo@stad.gent">Gentinfo@stad.gent</a>',
'<i aria-hidden="true" class="icon-document"></i><a href="#">Contact form</a>'
] %}
{% endif %}
{# Component #}
<div class="gentinfo {{ modifier }}">
<div class="gentinfo-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
{% include '@paragraph' with {
text: paragraphs[0]
} %}
{% include '@paragraph' with {
text: paragraphs[1]
} %}
{% include '@list' with {
'type': 'icon-list',
'modifier': 'inline',
'icon_items': listItems
}
%}
</div>
</div>
<div class="gentinfo ">
<div class="gentinfo-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p>Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen,… over de Stad Gent? Neem dan contact op met Gentinfo.</p>
<p>Bereikbaar van maandag tot en met zaterdag van 8 tot 19 uur.</p>
<ul class="icon-list inline">
<li><i aria-hidden="true" class="icon-phone"></i><a href="tel:092101010">09 210 10 10</a></li>
<li><i aria-hidden="true" class="icon-envelope"></i><a href="mailto:gentinfo@stad.gent">Gentinfo@stad.gent</a></li>
<li><i aria-hidden="true" class="icon-document"></i><a href="#">Contactformulier</a></li>
</ul>
</div>
</div>
{
"paragraphs": [
"Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen,… over de Stad Gent? Neem dan contact op met Gentinfo.",
"Bereikbaar van maandag tot en met zaterdag van 8 tot 19 uur."
],
"listItems": [
"<i aria-hidden=\"true\" class=\"icon-phone\"></i><a href=\"tel:092101010\">09 210 10 10</a>",
"<i aria-hidden=\"true\" class=\"icon-envelope\"></i><a href=\"mailto:gentinfo@stad.gent\">Gentinfo@stad.gent</a>",
"<i aria-hidden=\"true\" class=\"icon-document\"></i><a href=\"#\">Contactformulier</a>"
]
}
@use "sass:math";
$gentinfo-icon-size: 8rem;
.gentinfo {
@include theme('background-color', 'color-primary--lighten-5', 'gentinfo-background');
margin: 3rem 0;
padding: 2rem 1rem;
.gentinfo-content {
@include theme('background-color', 'color-secondary', 'gentinfo-content-background');
position: relative;
max-width: $bp-max-content;
min-height: $gentinfo-icon-size + 2rem;
margin: 0 auto;
padding: 1.2rem;
&::before {
@include spot-image('gentinfo', $gentinfo-icon-size);
margin: 0 auto 1.5rem;
}
@include tablet {
padding: 2.3rem 2.3rem 2.3rem 20rem;
&::before {
position: absolute;
top: 50%;
left: 10rem;
margin-top: math.div($gentinfo-icon-size, -2);
margin-bottom: 0;
margin-left: math.div($gentinfo-icon-size, -2);
}
}
}
.gentinfo-title {
font-size: 1.5rem;
font-weight: 400;
}
.icon-list.inline {
> li {
margin-bottom: .5rem;
}
}
}