<commit_before>{% extends "layout.html" %}

{% block page_title %}
  Components - Status
{% endblock %}

{% block content %}

{% set active = "components" %}
{% include "includes/top_nav.html" %}

<main id="content" role="main">


  <div class="banner" role="banner">
    <h1 class="heading-section">Guidance images</h1>
    <p class="lede">Using images to better explain content to users.</p>
    <ul class="metadata">
      <li>Usage: internal/external</li>
      <li>Status: experimental</li>
      <li>Last updated: 25 August 2018</li>
    </ul>
  </div>

  <div class="grid-row">


    <div class="column-two-thirds">

      <h2 id="interaction" class="heading-medium">When to use this component</h2>
      <p>Most content will <a href="https://design-system.service.gov.uk/styles/images/">not need an image</a>.  If users are struggling and you can see a real user need, consider introducing an image to see if it helps. Examples where an image might help users:</p>
      <ul class="list list-bullet">
        <li>to explain a new concept to users</li>
        <li>for more complex guidance when completing a task</li>
        <li>finding a reference number on a document</li>
      </ul>

      <h2>Related</h2>
      <ul class="list list-bullet">
        <li>illustration style</li>
        <li><a href="https://home-office-digital-patterns.herokuapp.com/patterns/interruption-card">Interruption card</a></li>
      </ul>

    </div>

    <div class="column-full">
      <div class="contact-us">
        <h2 class="heading-medium">Get in touch</h2><commit_msg>content: iterate image guidance<commit_after>{% extends "layout.html" %}

{% block page_title %}
  Components - Image guidance
{% endblock %}

{% block content %}

{% set active = "components" %}
{% include "includes/top_nav.html" %}

<main id="content" role="main">


  <div class="banner" role="banner">
    <h1 class="heading-section">Guidance images</h1>
    <p class="lede">Using images to better explain content to users.</p>
    <ul class="metadata">
      <li>Usage: internal/external</li>
      <li>Status: experimental</li>
      <li>Last updated: 25 August 2018</li>
    </ul>
  </div>

  <div class="grid-row">


    <div class="column-two-thirds">

      <h2 id="interaction" class="heading-medium">When to use this component</h2>
      <p>Most content will <a href="https://design-system.service.gov.uk/styles/images/">not need an image</a>.  If users are struggling and you can see a real user need, consider introducing an image to see if it helps. Examples where an image might help users:</p>
      <ul class="list list-bullet">
        <li>to explain a new concept to users</li>
        <li>for more complex guidance when completing a task</li>
        <li>finding a reference number on a document</li>
      </ul>

      <h2 id="related" class="heading-medium">Related</h2>
      <ul class="list list-bullet">
        <li><a href="#0">Illustration style (coming soon)</a></li>
        <li><a href="https://home-office-digital-patterns.herokuapp.com/patterns/interruption-card">Interruption card</a></li>
      </ul>

    </div>

    <div class="column-full">
      <div class="contact-us">
        <h2 class="heading-medium">Get in touch</h2>
{'fraction_non_alphanumeric': 0.15753636645001548, 'fraction_numerical': 0.00897554936552151, 'mean_word_length': 3.2751322751322753, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 97, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2387409', 'n_tokens_mistral': 1059, 'n_tokens_neox': 988, 'n_words': 284}