Detail layout

The detail layout is a one-column layout with one small column.

When to use this layout

Use the detail layout for detail pages of content.

Examples of detail pages of content:

  • A general, informational page about a certain specific topic.
  • A news article page.
  • An event page.
  • A page about a specific location.
  • A page about a specific person.

When not to use this layout

Do not use the detail layout to present an overview of content.

How it works

A detail layout conists of the following parts:

  • Header (required)
  • Page title (heading h1, required)
  • Text to speech button (optional, only when the website has a text so speech ability)
  • Detail page content (required)
  • Footer (required)
{% include '@header--subsite-hero' with {
  "site_name": "Stad Gent",
  "mijn_gent_block_items": [
    "<a href='javascript:(void);'>Mijn profiel</a>",
    "<a href='javascript:(void);'>Nieuwsbrieven</a>",
    "<a href='javascript:(void);'>Historiek</a>"
  ],
  "mijn_gent_block_auth": "true",
  "header_search_id": "header-search",
  "header_search_label": "Search",
  "header_search_placeholder": "Search",
  "header_search_text": "Search",
  "breadcrumbs_items": [
    "<a href='#'>Home</a>",
    "<a href='#'>Overview</a>",
    "<a href='#'>Theme</a>",
    "<a href='#'>Subpage</a>",
    "<span>Page title</span>"
  ],
  "hero_image_src": "/styleguide/img/stock/hero_blaarmeersen.jpg" | path,
  "hero_image_description": "Caption text comes here."
} %}

<main class="info-page">
  <article class="detail-layout">
    {% block info_page_article_content %}
      {% include '@heading' with {
        'type': 'h1',
        'heading_text': 'Info page title'
      } %}

      {% include '@readspeaker-button' %}

      {% include '@summary-box' %}

      {% include '@paragraph' with {
      "text": "Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.",
      "modifier": "summary-text"
      } %}

      {% include '@heading' with {
        'type': 'h2',
        'heading_text': 'This is an H2 paragraph title'
      } %}

      {% include '@paragraph' with {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur."
      } %}

      {% include '@heading' with {
        'type': 'h3',
        'heading_text': 'This is an H3 paragraph title'
      } %}

      {% render "@table" %}

      {% include '@paragraph' with {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio."
      } %}

      {% include '@cta-block' with {
        'type': 'link',
          'description': 'Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.',
        'links': [
          {
            'text': 'In the summertime',
            'url': '#',
            'modifier': 'standalone-link'
          },
          {
            'text': 'When the weather is hot',
            'url': '#',
            'modifier': 'standalone-link'
          }
        ]
      } %}

      {% include '@heading' with {
        'type': 'h4',
        'heading_text': 'This is an H4 paragraph title'
      } %}

      {% include '@paragraph' with {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio."
      } %}

      {% include '@image-gallery--multiple' with {
        "items": [
          {
            "src": "https://loremflickr.com/735/459/ghent?random=1",
            "alt": "placeholder image alternative text",
            "caption": "image caption"
          },
          {
            "src": "https://loremflickr.com/735/459/ghent?random=2",
            "alt": "placeholder image alternative text",
            "caption": "image caption"
          },
          {
            "src": "https://loremflickr.com/735/459/ghent?random=3",
            "alt": "placeholder image alternative text",
            "caption": "image caption"
          },
          {
            "src": "https://loremflickr.com/735/459/ghent?random=4",
            "alt": "placeholder image alternative text",
            "caption": "image caption"
          },
          {
            "src": "https://loremflickr.com/735/459/ghent?random=5",
            "alt": "placeholder image alternative text",
            "caption": "image caption"
          },
          {
            "src": "https://loremflickr.com/735/459/ghent?random=6",
            "alt": "placeholder image alternative text",
            "caption": "image caption"
          },
          {
            "src": "https://loremflickr.com/735/459/ghent?random=7",
            "alt": "placeholder image alternative text"
          }
        ]
      } %}

      {% include '@paragraph' with {
      "text": "Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus."
      } %}

      {% include '@image-gallery' with {
        "src": "https://loremflickr.com/735/459/ghent",
        "alt": "placeholder image alternative text",
        "caption": "image caption"
      } %}

      {% include '@paragraph' with {
      "text": "Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis."
      } %}

      {% include '@quote' %}

      {% include '@paragraph' with {
      "text": "Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero."
      } %}

      {% include '@contact-details' %}

      {% include '@list' with {
        'type': 'unordered',
        "items": [
          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
          'Aliquam tincidunt mauris eu risus.',
          'Vestibulum auctor dapibus neque.',
          'Nunc dignissim risus id metus.',
          'Cras ornare tristique elit.',
          'Vivamus vestibulum ntulla nec ante.',
          'Praesent placerat risus quis eros.',
          'Fusce pellentesque suscipit nibh.',
          'Integer vitae libero ac risus egestas placerat.',
          'Vestibulum commodo felis quis tortor.',
          'Ut aliquam sollicitudin leo.'
        ]
      }
      %}

      {% include '@accordion--multiple' with {
        items: [
          {
            'buttonText': 'First item',
            'content': '<p>Multiple item accordions are contained in a list element.</p>' ~
            '<p>They are indicated with a \'plus\' or \'minus\' icon</p>' ~
            '<p>Below is some nonsens text.</p>' ~
            '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
            'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
            'temporibus voluptatem!</p>'
          },
          {
            'buttonText': 'Second item',
            'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
            '<p>Below is some nonsens text.</p>' ~
            '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
            'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
            'temporibus voluptatem!</p>'
          },
          {
            'buttonText': 'Third item',
            'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
            '<p>Below is some nonsens text.</p>' ~
            '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
            'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
            'temporibus voluptatem!</p>'
          },
          {
            'buttonText': 'Fourth item',
            'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
            '<p>Below is some nonsens text.</p>' ~
            '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
            'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
            'temporibus voluptatem!</p>'
          }
        ]
      } %}

      {% include '@video' with {
      "title": "Promofilm stad Gent.",
      "src": "https://www.youtube.com/embed/S0vLmTWUmok",
      "audio_description_src": "https://www.youtube.com/embed/S0vLmTWUmok"
      } %}

      {% include '@timeline' %}
    {% endblock %}
  </article>

  <aside class="top">
    {% include '@document-box' with {
        unique_id: '1',
        documents: [
          {
            'text': 'In the summertime',
            'type': 'PDF',
            'size': '102kb'
          },
          {
            'text': 'When the weather is hot',
            'type': 'PDF',
            'size': '102kb'
          },
          {
            'text': 'You can stretch right up and touch the sky',
            'type': 'PDF',
            'size': '102kb'
          }
        ],
        other_documents: [
          {
            'text': 'In the summertime',
            'type': 'PDF',
            'size': '102kb'
          },
          {
            'text': 'When the weather is hot',
            'type': 'PDF',
            'size': '102kb'
          },
          {
            'text': 'You can stretch right up and touch the sky',
            'type': 'PDF',
            'size': '102kb'
          }
        ]
      }
    %}
    {% include '@related-box' with {
    'similar_articles': true,
    tags: [
    'Inner city',
    'Another tag'
    ]
    } %}

    {% include '@extra-articles' with {
      title: 'More news and events'
    } %}
  </aside>
  <aside class="bottom">
    {% include '@feedback-form' %}
  </aside>
</main>

<footer>
  {% include '@theme-footer' %}
  {% include '@footer' with footerConfig %}
</footer>
<header class="header">
    <div class="content-container">
        <a href="#" title="Home" class="site-logo " rel="home">
            Stad Gent
        </a>

        <a href='#' class="search--link" title="search">
            search</a>

        <form class="form search">
            <label for="header-search">Search
            </label>

            <input type="search" id="header-search" name="header-search" class="search" placeholder="Search" required="true" />
            <input type="submit" value="Search" class="" />
        </form>

        <div class="mijn-gent-block accordion">

            <button aria-expanded="false" aria-controls="default-mijn-gent" class="toggle accordion--button">
                <span class="avatar">j</span>
                <span>James M.</span>
            </button>

            <div id="default-mijn-gent" class="accordion--content" aria-hidden="true" hidden>
                <article class="content">
                    <h2>Mijn bibliotheek</h2>
                    <section class="profile">
                        <span class="avatar">j</span>
                        <div class="profile-info">
                            <span>John Doe</span>
                            <a href='#' class="button button-primary button-small">
                                Show profile</a>
                        </div>
                    </section>
                    <section>

                        <ul class="links">
                            <li><a href='javascript:(void);'>Overzicht</a></li>
                            <li><a href='javascript:(void);'>Leestips</a></li>
                        </ul>

                    </section>
                    <section>
                        <h2>Mijn gent</h2>

                        <ul class="links">
                            <li><a href='javascript:(void);'>Mijn profiel</a></li>
                            <li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
                            <li><a href='javascript:(void);'>Historiek</a></li>
                        </ul>

                    </section>
                    <footer>
                        <a href='javascript:(void);' class="button button-small button-secondary">
                            Afmelden</a>
                    </footer>
                </article>
            </div>
        </div>
    </div>

    <nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
        <div class="content-container">
            <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
            <ol class="breadcrumb no-style">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Overview</a></li>
                <li><a href='#'>Theme</a></li>
                <li><a href='#'>Subpage</a></li>
                <li><span>Page title</span></li>
            </ol>
        </div>
    </nav>

    <hr />
    <figure class="hero">
        <div class="image-wrapper" data-ratio="4:1">
            <img src="../../styleguide/img/stock/hero_blaarmeersen.jpg" alt="" />
        </div>

        <figcaption>Caption text comes here.</figcaption>
    </figure>
</header>

<main class="info-page">
    <article class="detail-layout">
        <h1>Info page title</h1>

        <button class="readspeaker-button">
            <i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
        </button>

        <aside class="summary-box box-top">
            <div class="inner-box">

                <ul class="icon-list ">
                    <li><i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span></li>
                    <li><i class="icon-marker" aria-hidden="true"></i><span>Inner city</span></li>
                </ul>

                <div class="accolade "></div>
            </div>

            <button type="button" class="button button-primary icon-arrow-right ">
                Register for this event
            </button>
        </aside>

        <p class="summary-text">Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.</p>

        <h2>This is an H2 paragraph title</h2>

        <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur.</p>

        <h3>This is an H3 paragraph title</h3>

        <div class="responsive-table">
            <div class="table-wrapper">
                <table>
                    <tr>
                        <th scope="col">Header column 1</th>
                        <th scope="col">Header column 2</th>
                        <th scope="col">Header column 3</th>
                        <th scope="col">Header column 4</th>
                        <th scope="col">Header column 5</th>
                        <th scope="col">Header column 6</th>
                    </tr>
                    <tr>
                        <th scope="row">Header row 2</th>
                        <td class="success">Row 2, column 2</td>
                        <td>Row 2, column 3</td>
                        <td>Row 2, column 4</td>
                        <td>Row 2, column 5</td>
                        <td>Row 2, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 3</th>
                        <td>Row 3, column 2</td>
                        <td>Row 3, column 3</td>
                        <td>Row 3, column 4</td>
                        <td>Row 3, column 5</td>
                        <td>Row 3, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 4</th>
                        <td>Row 4, column 2</td>
                        <td>Row 4, column 3</td>
                        <td>Row 4, column 4</td>
                        <td class="error">Row 4, column 5</td>
                        <td>Row 4, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 5</th>
                        <td>Row 5, column 2</td>
                        <td>Row 5, column 3</td>
                        <td>Row 5, column 4</td>
                        <td>Row 5, column 5</td>
                        <td>Row 5, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 6</th>
                        <td>Row 6, column 2</td>
                        <td>Row 6, column 3</td>
                        <td class="warning">Row 6, column 4</td>
                        <td>Row 6, column 5</td>
                        <td>Row 6, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 7</th>
                        <td>Row 7, column 2</td>
                        <td>Row 7, column 3</td>
                        <td>Row 7, column 4</td>
                        <td>Row 7, column 5</td>
                        <td>Row 7, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 8</th>
                        <td>Row 8, column 2</td>
                        <td>Row 8, column 3</td>
                        <td>Row 8, column 4</td>
                        <td>Row 8, column 5</td>
                        <td>Row 8, column 6</td>
                    </tr>
                    <tr class="success">
                        <th scope="row">Header row 9</th>
                        <td>Row 9, column 2</td>
                        <td>Row 9, column 3</td>
                        <td>Row 9, column 4</td>
                        <td>Row 9, column 5</td>
                        <td>Row 9, column 6</td>
                    </tr>
                    <tr>
                        <th scope="row">Header row 10</th>
                        <td>Row 10, column 2</td>
                        <td>Row 10, column 3</td>
                        <td>Row 10, column 4</td>
                        <td>Row 10, column 5</td>
                        <td>Row 10, column 6</td>
                    </tr>
                    <caption>
                        This is a table caption that describes the table content.
                    </caption>
                </table>
            </div>
        </div>

        <div aria-labelledby="-list-description" class="table-list">
            <ul>
                <li>

                    <h3>Header row 2</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd class="success">Row 2, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 2, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 2, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 2, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 2, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 3</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 3, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 3, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 3, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 3, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 3, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 4</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 4, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 4, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 4, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd class="error">Row 4, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 4, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 5</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 5, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 5, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 5, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 5, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 5, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 6</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 6, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 6, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd class="warning">Row 6, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 6, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 6, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 7</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 7, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 7, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 7, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 7, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 7, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 8</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 8, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 8, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 8, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 8, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 8, column 6</dd>
                    </dl>
                </li>
                <li class="success">

                    <h3>Header row 9</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 9, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 9, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 9, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 9, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 9, column 6</dd>
                    </dl>
                </li>
                <li>

                    <h3>Header row 10</h3>

                    <dl>
                        <dt>Header column 2</dt>

                        <dd>Row 10, column 2</dd>
                        <dt>Header column 3</dt>

                        <dd>Row 10, column 3</dd>
                        <dt>Header column 4</dt>

                        <dd>Row 10, column 4</dd>
                        <dt>Header column 5</dt>

                        <dd>Row 10, column 5</dd>
                        <dt>Header column 6</dt>

                        <dd>Row 10, column 6</dd>
                    </dl>
                </li>
            </ul>
            <div class="list-description" id="-list-description">
                This is a table caption that describes the table content.
            </div>
        </div>

        <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio.</p>

        <div class="cta-block box-left link">
            <div class="inner-box">

                <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

                <ul class="links">

                    <li>
                        <a href='#' class="button button-primary">
                            In the summertime</a>

                    </li>

                    <li>
                        <a href='#' class="standalone-link">
                            When the weather is hot</a>

                    </li>

                </ul>
            </div>
        </div>

        <h4>This is an H4 paragraph title</h4>

        <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio.</p>

        <div class="image-gallery--wrapper multiple">
            <ul class="image-gallery js-lightbox">
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=1" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=1" alt="placeholder image alternative text" />
                            </div>

                            <figcaption>image caption</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=2" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=2" alt="placeholder image alternative text" />
                            </div>

                            <figcaption>image caption</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=3" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=3" alt="placeholder image alternative text" />
                            </div>

                            <figcaption>image caption</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=4" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=4" alt="placeholder image alternative text" />
                            </div>

                            <figcaption>image caption</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=5" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=5" alt="placeholder image alternative text" />
                            </div>

                            <figcaption>image caption</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=6" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=6" alt="placeholder image alternative text" />
                            </div>

                            <figcaption>image caption</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="https://loremflickr.com/735/459/ghent?random=7" class="gallery-link" aria-labelledby="image-gallery__open-gallery">
                        <figure>
                            <div class="image-wrapper" data-ratio="8:5">
                                <img src="https://loremflickr.com/735/459/ghent?random=7" alt="placeholder image alternative text" />
                            </div>

                        </figure>
                    </a>
                </li>
                <li class="image-gallery__show-more">
                    <div class="show-more__content">
                        <span class="show-more__total">7</span>
                        <span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
                    </div>
                </li>
            </ul>
        </div>

        <!-- Add this to the bottom of your page template, above scripts -->
        <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->

        <p class="">Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.</p>

        <div class="image-gallery--wrapper single">
            <div class="image-gallery js-lightbox">
                <a href="https://loremflickr.com/735/459/ghent" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
                    <figure>
                        <div class="image-wrapper" data-ratio="8:5">
                            <img src="https://loremflickr.com/735/459/ghent" alt="placeholder image alternative text" />
                        </div>

                        <figcaption>image caption</figcaption>
                    </figure>
                </a>
            </div>
        </div>
        <!-- Add this to the bottom of your page template, above scripts -->
        <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->

        <p class="">Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis.</p>

        <div class="quote-wrapper">
            <div class="quote">
                <blockquote>
                    <div class="content">
                        <p>
                            This is a huge quote on lots of lines. Dessert cookie cotton candy. Gummies jelly beans cupcake liquorice carrot cake chocolate bar jelly-o gummies gingerbread.Bonbon marshmallow dragée danish lollipop cheesecake gingerbread.
                        </p>
                    </div>
                    <footer>
                        Daniel Termont, Mayor Ghent
                    </footer>
                </blockquote>
            </div>
        </div>

        <p class="">Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero.</p>

        <div class="contact-details box-top ">
            <div class="inner-box">
                <h2>Contact details</h2>

                <div class="contact-details-column">

                    <ul class="icon-list ">
                        <li><i class="icon-marker" aria-hidden="true"></i><span>Stadhuis<br />Botermarkt 1<br />
9000 Gent</span></li>
                        <li><i class="icon-normalphone" aria-hidden="true"></i><span><a href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a></span></li>
                        <li><i class="icon-phone" aria-hidden="true"></i><span><a href="tel:+32 476 23 42 98" alt="Person mobile phone">0476 23 42 98</a></span></li>
                        <li><i class="icon-fax" aria-hidden="true"></i><span><a href="tel:+32 9 266 50 19" alt="Person fax number">09 266 50 19</a> (Fax)</span></li>
                        <li><i class="icon-envelope" aria-hidden="true"></i><span><a href="mailto:daniel.termont@stad.gent" alt="Person mail link">daniel.termont@stad.gent</a></span></li>
                        <li><i class="icon-url" aria-hidden="true"></i><span><a href="http://stad.gent" alt="Website link">http://stad.gent</a></span></li>
                    </ul>

                </div>

                <div class="contact-details-column">
                    <div class="image-wrapper" data-ratio="1:1">
                        <img src="https://via.placeholder.com/280x280&text=1:1+(280x280)" alt="Person avatar" />

                    </div>
                </div>
            </div>
        </div>

        <ul class="">
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
            <li>Vestibulum auctor dapibus neque.</li>
            <li>Nunc dignissim risus id metus.</li>
            <li>Cras ornare tristique elit.</li>
            <li>Vivamus vestibulum ntulla nec ante.</li>
            <li>Praesent placerat risus quis eros.</li>
            <li>Fusce pellentesque suscipit nibh.</li>
            <li>Integer vitae libero ac risus egestas placerat.</li>
            <li>Vestibulum commodo felis quis tortor.</li>
            <li>Ut aliquam sollicitudin leo.</li>
        </ul>

        <ul class="accordion">
            <li>
                <h3>
                    <button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--1">
                        First item
                    </button>
                </h3>
                <div class="accordion--content" id="accordion--multiple--content--1">
                    <p>Multiple item accordions are contained in a list element.</p>
                    <p>They are indicated with a 'plus\' or \'minus\' icon</p>
                    <p>Below is some nonsens text.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
                </div>
            </li>
            <li>
                <h3>
                    <button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--2">
                        Second item
                    </button>
                </h3>
                <div class="accordion--content" id="accordion--multiple--content--2">
                    <p>Single item accordions are indicated by a chevron.</p>
                    <p>Below is some nonsens text.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
                </div>
            </li>
            <li>
                <h3>
                    <button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--3">
                        Third item
                    </button>
                </h3>
                <div class="accordion--content" id="accordion--multiple--content--3">
                    <p>Single item accordions are indicated by a chevron.</p>
                    <p>Below is some nonsens text.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
                </div>
            </li>
            <li>
                <h3>
                    <button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--4">
                        Fourth item
                    </button>
                </h3>
                <div class="accordion--content" id="accordion--multiple--content--4">
                    <p>Single item accordions are indicated by a chevron.</p>
                    <p>Below is some nonsens text.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
                </div>
            </li>
        </ul>

        <div class="video">
            <div class="responsive-video">
                <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
            <div class="audio-description">
                <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                    Watch this video with audio description</a>
            </div>
        </div>

        <div class="timeline-wrapper">
            <h2 class="visually-hidden">Timeline</h2>
            <dl class="timeline accordion">
                <div class="timeline-slot" role="listitem">
                    <dt>2018</dt>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--1" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">27 august 2017</span>
                            <div class="image-gallery--wrapper multiple image-gallery--secondary">
                                <ul class="image-gallery js-lightbox">
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li class="image-gallery__show-more">
                                        <div class="show-more__content">
                                            <span class="show-more__total">3</span>
                                            <span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--1">
                            <p class="">This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
                        </div>
                    </dd>
                </div>
                <div class="timeline-slot" role="listitem">
                    <dt>2017</dt>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--2" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">27 august 2017</span>
                            <div class="image-gallery--wrapper multiple image-gallery--secondary">
                                <ul class="image-gallery js-lightbox">
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li class="image-gallery__show-more">
                                        <div class="show-more__content">
                                            <span class="show-more__total">3</span>
                                            <span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--2">
                            <p class="">This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
                        </div>
                    </dd>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title">Title</h3>
                            <span class="timeline-slot-date">7 november 2017</span>
                        </div>
                    </dd>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title">Title</h3>
                            <span class="timeline-slot-date">7 november 2017</span>
                        </div>
                    </dd>
                </div>
                <div class="timeline-slot" role="listitem">
                    <dt>Once upon a time</dt>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--3" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">27 august 2011</span>
                            <div class="image-gallery--wrapper multiple image-gallery--secondary">
                                <ul class="image-gallery js-lightbox">
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li class="image-gallery__show-more">
                                        <div class="show-more__content">
                                            <span class="show-more__total">6</span>
                                            <span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--3">
                            <p class="">This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
                        </div>
                    </dd>
                </div>
                <div class="timeline-slot" role="listitem">
                    <dt>Sometime in 2016</dt>
                    <dd class="active">
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--4" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">Januari 2016</span>
                            <div class="image-gallery--wrapper multiple image-gallery--secondary">
                                <ul class="image-gallery js-lightbox">
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li class="image-gallery__show-more">
                                        <div class="show-more__content">
                                            <span class="show-more__total">2</span>
                                            <span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--4">
                            <p class="">This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
                            <div class="video-wrapper">
                                <div class="video-inner-wrapper">
                                    <div class="video">
                                        <div class="responsive-video">
                                            <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                        <div class="audio-description">
                                            <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                                                Watch this video with audio description</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                </div>
                <div class="timeline-slot" role="listitem">
                    <dt>1,4 till 1,6 milion years ago</dt>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--5" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">On a thursday</span>
                            <div class="image-gallery--wrapper single image-gallery--secondary">
                                <div class="image-gallery js-lightbox">
                                    <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
                                        <figure>
                                            <div class="image-wrapper" data-ratio="8:5">
                                                <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                            </div>

                                            <figcaption>image caption</figcaption>
                                        </figure>
                                    </a>
                                </div>
                            </div>
                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--5">
                            <div class="video-wrapper">
                                <div class="video-inner-wrapper">
                                    <div class="video">
                                        <div class="responsive-video">
                                            <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                        <div class="audio-description">
                                            <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                                                Watch this video with audio description</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--6" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">On a thursday</span>
                            <div class="image-gallery--wrapper single image-gallery--secondary">
                                <div class="image-gallery js-lightbox">
                                    <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
                                        <figure>
                                            <div class="image-wrapper" data-ratio="8:5">
                                                <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                            </div>

                                            <figcaption>image caption</figcaption>
                                        </figure>
                                    </a>
                                </div>
                            </div>
                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--6">
                            <div class="video-wrapper">
                                <div class="video-inner-wrapper">
                                    <div class="video">
                                        <div class="responsive-video">
                                            <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                        <div class="audio-description">
                                            <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                                                Watch this video with audio description</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                </div>
                <div class="timeline-slot" role="listitem">
                    <dt>Sometime in 2016</dt>
                    <dd class="active">
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--7" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">Januari 2016</span>
                            <div class="image-gallery--wrapper multiple image-gallery--secondary">
                                <ul class="image-gallery js-lightbox">
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
                                            <figure>
                                                <div class="image-wrapper" data-ratio="8:5">
                                                    <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                                </div>

                                                <figcaption>image caption</figcaption>
                                            </figure>
                                        </a>
                                    </li>
                                    <li class="image-gallery__show-more">
                                        <div class="show-more__content">
                                            <span class="show-more__total">2</span>
                                            <span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--7">
                            <p class="">This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
                            <div class="video-wrapper">
                                <div class="video-inner-wrapper">
                                    <div class="video">
                                        <div class="responsive-video">
                                            <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                        <div class="audio-description">
                                            <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                                                Watch this video with audio description</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                </div>
                <div class="timeline-slot" role="listitem">
                    <dt>1,4 till 1,6 milion years ago</dt>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--8" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">On a thursday</span>
                            <div class="image-gallery--wrapper single image-gallery--secondary">
                                <div class="image-gallery js-lightbox">
                                    <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
                                        <figure>
                                            <div class="image-wrapper" data-ratio="8:5">
                                                <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                            </div>

                                            <figcaption>image caption</figcaption>
                                        </figure>
                                    </a>
                                </div>
                            </div>
                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--8">
                            <div class="video-wrapper">
                                <div class="video-inner-wrapper">
                                    <div class="video">
                                        <div class="responsive-video">
                                            <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                        <div class="audio-description">
                                            <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                                                Watch this video with audio description</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    <dd>
                        <div class="timeline-slot-header">
                            <h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--9" class="accordion--button">Title</button></h3>
                            <span class="timeline-slot-date">On a thursday</span>
                            <div class="image-gallery--wrapper single image-gallery--secondary">
                                <div class="image-gallery js-lightbox">
                                    <a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
                                        <figure>
                                            <div class="image-wrapper" data-ratio="8:5">
                                                <img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" />
                                            </div>

                                            <figcaption>image caption</figcaption>
                                        </figure>
                                    </a>
                                </div>
                            </div>
                            <!-- Add this to the bottom of your page template, above scripts -->
                            <!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
                        </div>
                        <div class="timeline-slot-content accordion--content" id="timeline-slot-content--9">
                            <div class="video-wrapper">
                                <div class="video-inner-wrapper">
                                    <div class="video">
                                        <div class="responsive-video">
                                            <iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                        <div class="audio-description">
                                            <a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
                                                Watch this video with audio description</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                </div>
            </dl>
        </div>
    </article>

    <aside class="top">
        <div class="document-box accordion">
            <h2>Documents</h2>
            <ul class="links">
                <li>
                    <a href='javascript:(void);' class="standalone-link" download>
                        In the summertime</a>

                    <span class="file-type">
                        PDF
                        <span class="file-size">
                            (102kb)
                        </span>
                    </span>
                </li>
                <li>
                    <a href='javascript:(void);' class="standalone-link" download>
                        When the weather is hot</a>

                    <span class="file-type">
                        PDF
                        <span class="file-size">
                            (102kb)
                        </span>
                    </span>
                </li>
                <li>
                    <a href='javascript:(void);' class="standalone-link" download>
                        You can stretch right up and touch the sky</a>

                    <span class="file-type">
                        PDF
                        <span class="file-size">
                            (102kb)
                        </span>
                    </span>
                </li>
            </ul>

            <h3>
                <button class="accordion--button" aria-expanded="false" aria-controls="documents--content--documentbox-1">
                    There are 3 other documents available
                </button>
            </h3>

            <div class="accordion--content" id="documents--content--documentbox-1">
                <ul class="links">
                    <li>
                        <a href='javascript:(void);' class="standalone-link" download>
                            In the summertime</a>

                        <span class="file-type">
                            PDF
                            <span class="file-size">
                                (102kb)
                            </span>
                        </span>
                    </li>
                    <li>
                        <a href='javascript:(void);' class="standalone-link" download>
                            When the weather is hot</a>

                        <span class="file-type">
                            PDF
                            <span class="file-size">
                                (102kb)
                            </span>
                        </span>
                    </li>
                    <li>
                        <a href='javascript:(void);' class="standalone-link" download>
                            You can stretch right up and touch the sky</a>

                        <span class="file-type">
                            PDF
                            <span class="file-size">
                                (102kb)
                            </span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="related-box">
            <div class="related-box-content">
                <h2>Also interesting</h2>

                <div class="related-box-content-column">
                    <h3>Similar articles</h3>

                    <ul class="">
                        <li><a href="javascript:(void);">Council meeting dates</a></li>
                        <li><a href="javascript:(void);">Neighborhood</a></li>
                        <li><a href="javascript:(void);">Service policy participation</a></li>
                        <li><a href="javascript:(void);">Re-listen the city council and the dec...<Paste></a></li>
                    </ul>

                </div>
                <div class="related-box-content-column">
                    <h3>More info about</h3>

                    <ul class="related-box-tags">
                        <li>
                            <a href="javascript:(void);" class="tag ">
                                Inner city
                            </a>

                        </li>
                        <li>
                            <a href="javascript:(void);" class="tag ">
                                Another tag
                            </a>

                        </li>
                    </ul>

                    <h3>Related Linked Open Data</h3>

                    <a href='https://stad.gent'>
                        Lorem ipsum dolor set</a>
                </div>
            </div>
        </div>

        <div class="extra-articles">

            <div class="extra-articles-content">
                <h2>More news and events</h2>

                <ul>
                    <li class="teaser  teaser-article  ">
                        <article class="teaser-content">

                            <div class="content__second">
                                <h3>Event title text</h3>

                                <div class="event">
                                    <span>
                                        <time datetime="2019-01-07">From the 7th</time>
                                        &nbsp;<time datetime="2019-01-13">untill the 13th of January 2019</time>
                                    </span>
                                </div>

                                <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>

                                <a href='#' class="read-more standalone-link" title="Event title text">
                                    <span class="visually-hidden">
                                        Event title text
                                    </span>
                                    read more</a>
                            </div>
                            <div class="content__first">

                                <div class="figure-wrapper">
                                    <figure>
                                        <img src="../../styleguide/img/stock/teaser_2.jpg" alt="alt text" />

                                    </figure>

                                    <div class="accolade-inverse bottom-left"></div>
                                </div>

                                <span class="tag ">
                                    Just some tag
                                </span>

                            </div>
                        </article>
                        <a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title text</a>
                    </li>

                    <li class="teaser  teaser-article  ">
                        <article class="teaser-content">

                            <div class="content__second">
                                <h3>General article title text</h3>

                                <time class="published" datetime="2019-01-07" pubdate="pubdate">Published on Saturday 7th of January 2019</time>

                                <p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nihil quisquam ratione. Ab deserunt omnis quam quisquam quo repudiandae temporibus totam voluptates.</p>

                                <a href='javascript:void(0);' class="read-more standalone-link" title="General article title text">
                                    <span class="visually-hidden">
                                        General article title text
                                    </span>
                                    read more</a>
                            </div>
                            <div class="content__first">

                                <div class="figure-wrapper">
                                    <figure>
                                        <img src="../../styleguide/img/stock/teaser_1.jpg" alt="alt text" />

                                    </figure>

                                    <div class="accolade-inverse bottom-left"></div>
                                </div>

                                <span class="tag ">
                                    I'm another tag
                                </span>

                            </div>
                        </article>
                        <a href="javascript:void(0);" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">General article title text</a>
                    </li>

                </ul>
            </div>
        </div>
    </aside>
    <aside class="bottom">
        <div class="feedback-form box-no-icon accordion ">
            <h2><button class="accordion--button" aria-expanded="false" aria-controls="feedback-form-content">Can we improve something about this page?</button></h2>
            <div id="feedback-form-content" class="accordion--content">
                <h3>You can contact Gentinfo for personal questions or complaints.</h3>

                <p class="">How to reach?</p>

                <ul class="icon-list ">
                    <li><i class="icon-phone"></i><span>By phone: <a href="tel: 09 210 10 10">09 210 10 10</a> (from monday till saturday from 08:00 till 19:00)</span></li>
                    <li><i class="icon-envelope"></i><span>Send us an <a href="mailto: info@stad.gent">email</a></span></li>
                    <li><i class="icon-twitter-outline"></i><span>Through the <a href="https://twitter.com/stadgent">Twitter account</a> of the City of Gent (<a href="https://twitter.com/stadgent">@StadGent</a>)</span></li>
                    <li><i class="icon-document"></i><span>Through the <a href="#">contact form</a></span></li>
                    <li><i class="icon-chat-round"></i><span>Through the <a href="#">chat</a></span></li>
                </ul>

                <form action="#" class="no-style">
                    <h3>Do you have suggestions or comments concerning this page?</h3>

                    <div class="form-item ">
                        <label for="textarea_id">Message
                        </label>
                        <div class="form-columns">
                            <div class="form-item-column">
                                <textarea name="textarea_name" id="textarea_id">
</textarea>
                            </div>
                            <div class="form-item-column">
                            </div>
                        </div>
                    </div>

                    <button type="button" class="button button-primary button-large ">
                        Send suggestion
                    </button>
                </form>
            </div>
        </div>
    </aside>
</main>

<footer>

    <section class="theme-footer">
        <h2 class="visually-hidden">Theme footer</h2>
        <div class="content-container">
            <div class="bottom">

            </div>
        </div>
    </section>
    <section class="footer">
        <h2 class="visually-hidden">Footer</h2>
        <div class="footer-top">
            <div class="content-container">

                <div class="footer--column">
                    <div class="gentinfo-block">
                        <div class="gentinfo-block-content">
                            <h2 class="visually-hidden">Gentinfo</h2>
                            <img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" />

                            <p class="">We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm</p>

                            <ul class="icon-list ">
                                <li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10" alt="Gentinfo tel link">09 210 10 10</a></li>
                                <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
                                <li><i class="icon-document" aria-hidden="true"></i><a href="#">Contact form</a></li>
                            </ul>

                        </div>

                        <button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
                            Chat with Gentinfo
                        </button>
                    </div>
                </div>

                <div class="footer--column">
                    <div class="dg-block-disclaimer">
                        <h2>Useful links</h2>

                        <ul class="">
                            <li><a href="https://jobs.gent.be/">Vacancies</a></li>
                            <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">City map</a></li>
                            <li><a href="https://persruimte.stad.gent/nl">Newsroom City of Ghent</a></li>
                            <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Legal information</a></li>
                            <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Privacy</a></li>
                        </ul>

                    </div>
                </div>

                <div class="footer--column">
                    <div class="dg-block-post-address">
                        <h2>Postal address</h2>
                        <address>
                            City of Ghent<br />
                            Botermarkt 1<br />
                            9000 Ghent
                        </address>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom content-container">

            <div class="footer--column">
                <div class="db-block-partnership">
                    <p class="">In cooperation with Digipolis</p>
                    <i aria-hidden="true" class="icon-digipolis"></i>
                </div>
            </div>

            <div class="footer--column">
                <div class="dg-blocks-social">
                    <span>Follow the City of Ghent on social media</span>
                    <div class="social-list">

                        <ul class="">
                            <li><a href="https://www.facebook.com/stadsbestuurgent"><i aria-hidden="true" class="icon-facebook"></i><span class="visually-hidden">Facebook</span></a></li>
                            <li><a href="https://www.twitter.com/stadgent"><i aria-hidden="true" class="icon-twitter"></i><span class="visually-hidden">Twitter</span></a></li>
                            <li><a href="https://www.linkedin.com/company/stad-gent"><i aria-hidden="true" class="icon-linkedin"></i><span class="visually-hidden">LinkedIn</span></a></li>
                            <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw"><i aria-hidden="true" class="icon-youtube"></i><span class="visually-hidden">Youtube</span></a></li>
                            <li><a href="https://www.instagram.com/stadgent/"><i aria-hidden="true" class="icon-instagram"></i><span class="visually-hidden">Instagram</span></a></li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </section>
</footer>
{
  "footerConfig": {
    "gentinfo": {
      "title": "gentinfo",
      "description": "We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm",
      "phone": {
        "label": "09 210 10 10",
        "machine": "+32 9 210 10 10"
      },
      "email": "gentinfo@stad.gent",
      "form": "Contact form",
      "chat": "Chat with Gentinfo"
    },
    "disclaimer": {
      "title": "Useful links",
      "links": [
        "Vacancies",
        "City map",
        "Newsroom City of Ghent",
        "Legal information",
        "Privacy"
      ]
    },
    "address": {
      "title": "Postal address",
      "name": "City of Ghent",
      "street": "Botermarkt 1",
      "city": "9000 Ghent"
    },
    "bottom": {
      "partnership": "In cooperation with Digipolis",
      "social": "Follow the City of Ghent on social media"
    }
  }
}
  • Content:
    .detail-layout {
      @extend %content-container;
    
      margin-top: 1.2rem;
      font-size: .9rem;
      line-height: 1.8;
    
      // Give each direct child a specific width.
      // This is a fallback width given to all children of the detail layout.
      > * {
        @include desktop {
          @include set-layout('width-7', 'offset-2');
        }
      }
    
      h1 {
        width: 100%;
    
        + .tag {
          display: inline-block;
          width: auto;
          margin-top: -.4rem;
          margin-bottom: 2rem;
        }
      }
    
      > div,
      > section,
      > aside,
      > article {
        margin-top: 2rem;
        margin-bottom: 2rem;
      }
    
      > ul,
      > ol {
        padding-left: 2rem;
      }
    
      > .help-block,
      > .search-block {
        @include desktop {
          @include set-layout('width-9', 'offset-1');
        }
      }
    
      > .box-top,
      > .summary-box,
      > .cta-block,
      > .contact-block,
      > .contact-details,
      > .image-gallery--wrapper.multiple,
      > .contact-box {
        @include desktop {
          @include set-layout('width-10', 'offset-1');
        }
      }
    
      > ul.accordion {
        @include desktop {
          @include set-layout('width-7', 'offset-2');
        }
    
        .accordion--content p {
          line-height: 1.75;
        }
      }
    
      > .help-block {
        @include desktop {
          padding-left: span(1 wide of 12);
        }
      }
    
      > .quote-wrapper {
        @include desktop {
          @include set-layout();
    
          > .quote {
            @include set-layout('width-9', 'offset-1');
          }
        }
      }
    
      > .timeline-wrapper,
      > .programme-wrapper {
        @include set-layout();
        @include extra-wide;
      }
    
      .readspeaker-button {
        display: block;
        width: auto;
        margin-top: -.4rem;
        margin-bottom: 2rem;
      }
    
      .summary-text {
        @include bold-text;
      }
    
      .openinghours-widget[data-type="month"] {
        @include desktop {
          @include month-widget-mobile;
        }
    
        @include breakpoint(1200px) {
          @include month-widget-desktop;
        }
      }
    
      > .full-width {
        @include full-width;
      }
    
      > .box-top {
        .inner-box {
          @include desktop {
            padding-right: 0;
            padding-left: 0;
    
            > *:not(.accolade) {
              width: span(7 of 10);
              margin-left: span(1 wide of 10);
            }
          }
        }
      }
    
    }
    
    $bulb-image-width: 6rem;
    
    aside.top,
    aside.bottom {
      @extend %content-container;
    
      > * {
        @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
    
        padding-top: 3rem;
        border-top: 2px solid;
    
        @include tablet {
          padding-top: 2rem;
        }
    
        @include desktop {
          @include set-layout();
          width: 100%;
          margin-bottom: 2rem;
          margin-left: 0;
          padding-right: span(2 wide of 12);
          padding-left: span(2 wide of 12);
        }
      }
    
      > p {
        padding-top: 0;
        border-top: 0;
      }
    }
    
    aside.top {
      position: relative;
      margin: 5rem auto 0;
    
      > div:first-child {
        &::before {
          @include spot-image('lightbulb', $bulb-image-width);
    
          display: block;
          position: relative;
          margin: (-$bulb-image-width) auto 1rem;
          z-index: z('default');
    
          @include tablet {
            position: absolute;
            top: -($bulb-image-width/2);
            right: span(1 of 12);
            margin: 0;
          }
        }
      }
    }
    
    aside.bottom {
      .feedback-form {
    
        margin-bottom: 2rem;
        padding-top: 1.2rem;
        border-top: 0;
    
        @include desktop {
          @include set-layout('width-10', 'offset-1');
    
          padding-left: span(1 wide of 12);
        }
      }
    
      .changed-date {
        @include desktop {
          @include set-layout('width-9', 'offset-2');
        }
    
        padding: 0;
      }
    }
    
  • URL: /components/raw/detail-layout/_detail-layout.scss
  • Filesystem Path: components/61-layouts/detail-layout/_detail-layout.scss
  • Size: 3.5 KB