uktrade/directory-components

{% extends 'demo/base.html' %}

{% load static %}
{% load demo_tags %}
{% load banner hero message_box breadcrumbs cta_box card labelled_card labelled_image_card informative_banner from directory_components %}
{% load code from demo_tags %}

{% block css_layout_class %}components{% endblock css_layout_class %}

{% block body_header %}
  {{ block.super }}
  {% include 'directory_components/header_beta_banner.html' %}
{% endblock %}

{% block content %}

<div class="container">
  {% breadcrumbs 'Banners' %}<a href="/">Home</a>{% endbreadcrumbs %}
</div>

<div class="container">
  <div class="width-two-thirds">
    <h1 class="heading-xlarge">Banners</h1>
    <h2 class="heading-medium">Beta banner</h2>
    <p>See above.</p>
  </div>
  {% code 'django' %}
    {% include 'directory_components/header_beta_banner.html' %}
  {% endcode %}
  <div class="width-two-thirds">
    <h2 class="heading-large">Cookie notice</h2>
    <p>The cookie notice is displayed at the top of every page (clear your cookies if you already dismissed it). When dismissed it will set the cookie <code>hide_cookie_notice</code>. The JavaScript <code>dit.components.cookie-notice.js</code> will look for that cookie when the page loads. If it finds it, the cookie notice will not display. This JS requires jQuery to run. When JS is disabled in the browser the cookie notice will always be displayed.</p>

    <h3 class="heading-medium">HTML markup</h3>
  </div>

  {% code 'html' %}
    <div id="header-cookie-notice" class="cookie-notice">
      <div class="container cookie-notice-container">
        <p>Great.gov.uk uses cookies to make the site simpler. <a class="link" href="/privacy-and-cookies/">Find out more about cookies</a></p>
      </div>
    </div>
  {% endcode %}


  <div class="width-two-thirds">
    <h2 class="heading-large">Dismissable banner</h2>
    <p>A dismissible banner that can be used to alert the user to potentially useful information.</p>
  </div>

  {% code 'django' %}
    {% load banner from directory_components %}
    {% banner banner_content='<p>For more information go to <a href="#">Great.gov.uk</a></p>' badge_content='Information' %}
    {% banner banner_content='<p>For more information go to <a href="#">Great.gov.uk</a></p>' badge_content='Information' %}
  {% endcode %}

  <div class="width-two-thirds">
    <h3 class="heading-medium">HTML markup</h3>
    <p>The close button is appended to the banner with JavaScript and does not need to be in the template.</p>
  </div>
  {% code 'html' %}
    <div id="information-banner" class="information-banner border-medium border-stone-30 padding-15">
      <div class="banner-content">
        <div class="banner-badge">
          <span class="bold-small background-active-blue white-text">Banner badge text</span>
        </div>
        <div>
          <p class="body-text">Banner content with a <a class="link" href="#">link</a></p>
        </div>
      </div>
    </div>
  {% endcode %}

  <div class="width-two-thirds">
    <h2 class="heading-large">Informative banner</h2>
    <p>A different style of informative banner that can be used to alert the user to potentially useful but not urgent information.</p>
  </div>

  {% code 'django' %}
    {% load informative_banner from directory_components %}

    {% informative_banner banner_label='Banner Label' banner_content='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="#">sed do eiusmod tempor incididunt </a> ut labore et dolore magna aliqua.</p>' %}

    {% informative_banner banner_label='Banner Label' banner_content='<br><p>An informative banner with separate lines <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p><br><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>' %}

    {% informative_banner banner_content='<p>An informative banner with separate lines <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p><br><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>' %}
  {% endcode %}

  <br>
  <br>
  {% informative_banner banner_label='Banner Label' banner_content='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="#">sed do eiusmod tempor incididunt </a> ut labore et dolore magna aliqua.</p>' %}
  <br>
  {% informative_banner banner_label='Banner Label' banner_content='<br><p>An informative banner with separate lines <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p><br><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>' %}
  <br>
  {% informative_banner banner_content='<p>An informative banner with separate lines <a>Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></p><br><p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>' %}

  </div>

{% endblock %}