selfdefined/11ty/_includes/components/content-warning.njk

{%- if
  flag and
  flag.text and
  (flag.level == 'avoid') -%}
  <div class="u-margin-bottom-double u-margin-top-double content-warning content-warning--avoid" id="content-warning-guide">
    <p>You may want to add a content warning before discussing or showing imagery involving this topic, as it is a topic that can elicit unnecessary harm through inducing negative feelings, anxiety, or trauma.</p>
    <p>
      <strong>Content warnings usually take the form of "Content warning:
        {{ title }}" or "CW:
        {{ title }}. We recommend the former when possible.</strong>
    </p>
    <p>Content warnings should be given at the earliest possible opportunity. Examples of where you can do this are:</p>
    <ul class="list-default">
      <li>Articles under the byline, before content</li>
      <li>Videos (with proper audio descriptions)</li>
      <li>Photographs (with proper alt text)</li>
      <li>Podcasts (before topic, in transcript)</li>
      <li>Books (introductory page, summary)</li>
      <li>Conference talks/webinars</li>
      <li>Start of social media posts including this term</li>
      <li>Social media posts with a link to content including this term</li>
    </ul>
  </div>
{%- elseif
  flag and
  flag.text and
  (flag.level == 'warning') -%}
  <div class="u-margin-bottom-double u-margin-top-double content-warning" id="content-warning-guide">
    <p>You may want to add a content warning before discussing or showing imagery involving this topic, as it is a topic that can elicit unnecessary harm through inducing negative feelings, anxiety, or trauma.</p>
    <p>
      <strong>Content warnings usually take the form of "Content warning:
        {{ title }}" or "CW:
        {{ title }}. We recommend the former when possible.</strong>
    </p>
    <p>This content warning should be given at the earliest possible opportunity. Examples of where you can do this are:</p>
    <ul class="list-default">
      <li>Articles under the byline, before content</li>
      <li>Videos (with proper audio descriptions)</li>
      <li>Photographs (with proper alt text)</li>
      <li>Podcasts (before topic, in transcript)</li>
      <li>Books (introductory page, summary)</li>
      <li>Conference talks/webinars</li>
      <li>Start of social media posts including this term</li>
      <li>Social media posts with a link to content including this term</li>
    </ul>
  </div>
{% endif %}