uktrade/directory-components

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

{% load static %}
{% load demo_tags %}
{% load directory_components %}
{% load code from demo_tags %}

{% block head_title %}directory-components{% endblock %}

{% block content %}
<div class="container">
  {% breadcrumbs 'Featured articles' %}<a href="/">Home</a>{% endbreadcrumbs %}
</div>

<section>
  <div class="container">
    <div class="width-two-thirds">
      <h1 class="heading-xlarge">Featured articles</h1>
      <p>This is a list of article previews with text and an image for the first item. The <code>items</code> param expects a list of dictionaries like this:</p>
    </div>
    {% code 'python' %}
      {
        'title': 'Article title',
        'url': '/article',
        'type_of_article': 'Advice',
        'teaser': 'This is some intro text',
        'image': {
            'url': '/link-to-the-image.jpeg',
        },
        'image_alt': 'Some descriptive image text',
      }
    {% endcode %}

    <p>Used below:</p>
    {% code 'python' %}
      {% featured_articles items=articles_list heading="What's new" %}
    {% endcode %}
  </div>
</section>

{% featured_articles items=articles_list heading="What's new" %}

<div class="container">
  <p><code>section_class</code> can be given to change the container style:</p>
  {% code 'python' %}
    {% featured_articles items=articles_list heading="What's new" section_class='underline-flag-red background-stone-30' %}
  {% endcode %}
</div>

{% featured_articles items=articles_list heading="What's new" section_class='underline-flag-red background-stone-30' %}

{% endblock content %}