Notification banner - Informačný banner
Informačný banner
Code
Markup
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
This publication was withdrawn on 7 March 2014.
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
text: "This publication was withdrawn on 7 March 2014."
}) }}Informačný banner paragraph as html heading
Otvoriť príklad na novej záložke: informačný banner paragraph as html heading
Code
Markup
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">You have 9 days to send a response.</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
html: '<p class="govuk-notification-banner__heading">You have 9 days to send a response.</p>\n'
}) }}Informačný banner with text as html
Otvoriť príklad na novej záložke: informačný banner with text as html
Code
Markup
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">
This publication was withdrawn on 7 March 2014
</h3>
<p class="govuk-body">
Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
html:
'<h3 class="govuk-notification-banner__heading">\n' +
" This publication was withdrawn on 7 March 2014\n" +
"</h3>\n" +
'<p class="govuk-body">\n' +
' Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website\n' +
"</p>\n"
}) }}Informačný banner with type as success
Otvoriť príklad na novej záložke: informačný banner with type as success
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
Email sent to example@email.com
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "success",
text: "Email sent to example@email.com"
}) }}Informačný banner success with custom html
Otvoriť príklad na novej záložke: informačný banner success with custom html
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">
2 files uploaded
</h3>
<ul class="govuk-!-margin-0 govuk-list">
<li><a href="link-1" class="govuk-notification-banner__link">government-strategy.pdf</a> [pdf, 123.45 kB]</li>
<li><a href="link-2" class="govuk-notification-banner__link">government-strategy-v1.pdf</a> [pdf, 123.45 kB]</li>
</ul>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "success",
html:
'<h3 class="govuk-notification-banner__heading">\n' +
" 2 files uploaded\n" +
"</h3>\n" +
'<ul class="govuk-!-margin-0 govuk-list">\n' +
' <li><a href="link-1" class="govuk-notification-banner__link">government-strategy.pdf</a> [pdf, 123.45 kB]</li>\n' +
' <li><a href="link-2" class="govuk-notification-banner__link">government-strategy-v1.pdf</a> [pdf, 123.45 kB]</li>\n' +
"</ul>\n"
}) }}Informačný banner with type warning
Otvoriť príklad na novej záložke: informačný banner with type warning
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--warning" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Warning
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">
Oops! Something went wrong
</h3>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "warning",
html:
'<h3 class="govuk-notification-banner__heading">\n' +
" Oops! Something went wrong\n" +
"</h3>\n"
}) }}Informačný banner warning with custom html
Otvoriť príklad na novej záložke: informačný banner warning with custom html
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--warning" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Warning
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">
This publication was withdrawn on 7 March 2014
</h3>
<p class="govuk-body">
Sorry for the inconvenience, but it seems like an error has occurred. You can report this error to <a href="#" class="govuk-notification-banner__link">our support</a>.
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "warning",
html:
'<h3 class="govuk-notification-banner__heading">\n' +
" This publication was withdrawn on 7 March 2014\n" +
"</h3>\n" +
'<p class="govuk-body">\n' +
' Sorry for the inconvenience, but it seems like an error has occurred. You can report this error to <a href="#" class="govuk-notification-banner__link">our support</a>.\n' +
"</p>\n"
}) }}Informačný banner with a list
Otvoriť príklad na novej záložke: informačný banner with a list
Code
Markup
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">4 files uploaded</h3>
<ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-0">
<li><a href="#" class="govuk-notification-banner__link">government-strategy.pdf</a> [pdf, 123.45 kB]</li>
<li><a href="#" class="govuk-notification-banner__link">government-strategy-v2.pdf</a> [pdf, 123.45 kB]</li>
<li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a> [pdf, 123.45 kB]</li>
<li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a> [pdf, 123.45 kB]</li>
</ul>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
html:
'<h3 class="govuk-notification-banner__heading">4 files uploaded</h3>\n' +
'<ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-0">\n' +
' <li><a href="#" class="govuk-notification-banner__link">government-strategy.pdf</a> [pdf, 123.45 kB]</li>\n' +
' <li><a href="#" class="govuk-notification-banner__link">government-strategy-v2.pdf</a> [pdf, 123.45 kB]</li>\n' +
' <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a> [pdf, 123.45 kB]</li>\n' +
' <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a> [pdf, 123.45 kB]</li>\n' +
"</ul>\n"
}) }}Informačný banner with long heading
Otvoriť príklad na novej záložke: informačný banner with long heading
Code
Markup
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters.
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
text: "This publication was withdrawn on 7 March 2014, before being sent in, sent back, queried, lost, found, subjected to public inquiry, lost again, and finally buried in soft peat for three months and recycled as firelighters."
}) }}Informačný banner with lots of content
Otvoriť príklad na novej záložke: informačný banner with lots of content
Code
Markup
<div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">
Check if you need to apply the reverse charge to this application
</h3>
<p class="govuk-body">
You will have to apply the <a href="#" class="govuk-notification-banner__link">reverse charge</a> if the applicant supplies any of these services:
</p>
<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
<li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>
<li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>
</ul>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
html:
'<h3 class="govuk-notification-banner__heading">\n' +
" Check if you need to apply the reverse charge to this application\n" +
"</h3>\n" +
'<p class="govuk-body">\n' +
' You will have to apply the <a href="#" class="govuk-notification-banner__link">reverse charge</a> if the applicant supplies any of these services:\n' +
"</p>\n" +
'<ul class="govuk-list govuk-list--bullet govuk-list--spaced">\n' +
" <li>constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services</li>\n" +
" <li>constructing, altering, repairing, extending, demolishing of any works forming, or planned to form, part of the land, including (in particular) walls, roadworks, power lines, electronic communications equipment, aircraft runways, railways, inland waterways, docks and harbours</li>\n" +
"</ul>\n"
}) }}Informačný banner auto-focus disabled, with type as success
Otvoriť príklad na novej záložke: informačný banner auto-focus disabled, with type as success
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" data-disable-auto-focus="true">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
Email sent to example@email.com
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "success",
disableAutoFocus: true,
text: "Email sent to example@email.com"
}) }}Informačný banner auto-focus explicitly enabled, with type as success
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" data-disable-auto-focus="false">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
Email sent to example@email.com
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "success",
disableAutoFocus: false,
text: "Email sent to example@email.com"
}) }}Informačný banner role=alert overridden to role=region, with type as success
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--success" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
Email sent to example@email.com
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "success",
role: "region",
text: "Email sent to example@email.com"
}) }}Informačný banner custom tabindex
Otvoriť príklad na novej záložke: informačný banner custom tabindex
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner" tabindex="2">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Success
</h2>
</div>
<div class="govuk-notification-banner__content">
<p class="govuk-notification-banner__heading">
Email sent to example@email.com
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
type: "success",
text: "Email sent to example@email.com",
attributes: {
tabindex: 2
}
}) }}Informačný banner of small size
Otvoriť príklad na novej záložke: informačný banner of small size
Code
Markup
<div class="govuk-notification-banner govuk-notification-banner--small " role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<h3 class="govuk-notification-banner__heading">
This publication was withdrawn on 7 March 2014
</h3>
<p class="govuk-body">
Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website
</p>
</div>
</div>
Macro
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
{{ govukNotificationBanner({
isSmall: true,
html:
'<h3 class="govuk-notification-banner__heading">\n' +
" This publication was withdrawn on 7 March 2014\n" +
"</h3>\n" +
'<p class="govuk-body">\n' +
' Archived and replaced by the <a href="#" class="govuk-notification-banner__link">new planning guidance</a> launched 6 March 2014 on an external website\n' +
"</p>\n"
}) }}