{% raw %}
{% extends "mote/element/index.html" %}
{% load mote_tags %}
{% block codeblock %}
<div class="sg-code-block">
  <h4 class="title">
      Base Article Teaser
  </h4>
  <div class="description">
    <p>Article teasers load on the homepage upon first load as latest promoted articles (latest according to publish date or randomized rotation) with the most recent being at the top.</p>
  </div>
  <div class="code-example">
      <pre>
          <code class="language-markup">
              <xmp>
                {% render_element element %}
              </xmp>
          </code>
      </pre>
  </div>
</div>
<div class="sg-code-block">
  <h4 class="title">
    Grid Article Teaser
  </h4>
  <div class="description">
    <p>Grid article teasers are category featured articles on homepage. Latest stories will be displayed in a grid-like style (in two columns). On feature phones, these will be displayed in  a single column (one grid article teaser block below the other), instead of side-by-side.</p>
  </div>
  <div class="code-example">
      <pre>
          <code class="language-markup">
              <xmp>
                {% render_element element.aspect.basics.article-teaser.grid-teaser-title %}
              </xmp>
          </code>
      </pre>
  </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Carousel Teaser
    </h4>
    <div class="description">
      <p>Carousel article teasers are articles promoted to the homepage under featured tags.</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render_element element.aspect.basics.article-teaser.carousel-teaser-title %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Base Teaser Thumbnail
    </h4>
    <div class="description">
      <p>Article Teaser Description</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render_element element.aspect.basics.article-teaser.base-teaser-thumbnail %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
<div class="sg-code-block">
    <h4 class="title">
      Carousel Teaser Thumbnail
    </h4>
    <div class="description">
      <p>Article Teaser Description</p>
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
                  {% render_element element.aspect.basics.article-teaser.carousel-teaser-image %}
                </xmp>
            </code>
        </pre>
    </div>
</div>
{% endblock %}
{% endraw %}
