<!-- Default -->
<div class="feature ">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Headline group without sub and super</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

</div>

<!-- No Link -->
<div class="feature ">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Feature with no link</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

    </div>

</div>

<!-- Aside -->
<div class="feature ">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Most features should have an aside</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>
                <p class="">This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom
                    or inclusion setting.</p>

                <cite>
  <div class="title">Alfred E. Newman</div>
  </cite>
            </figcaption>
        </figure>
    </div>

</div>

<!-- Aside Reversed -->
<div class="feature feature--aside-reversed">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Option to flip the aside on large screens</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>
                <p class="">This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom
                    or inclusion setting.</p>

                <cite>
  <div class="title">Alfred E. Newman</div>
  </cite>
            </figcaption>
        </figure>
    </div>

</div>

<!-- With Link List -->
<div class="feature ">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Option to use link list component instead of single link</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <div class="link-list ">

            <ul class="clean">
                <li>
                    <span class="link-list__title">
              
              <a href="http://www.example.com/"  class="link--fancy link--arrow">Default Link Text</a>            </span>
                </li>
                <li>
                    <span class="link-list__title">
              
              <a href="http://www.example.com/"  class="link--fancy link--arrow">Default Link Text</a>            </span>
                </li>
            </ul>
        </div>
    </div>

</div>

<!-- Scheme Green Primary -->
<div class="feature scheme--green-primary">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Features can be schemed to stand out</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

</div>

<!-- Fancy -->
<div class="feature feature--fancy">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">The fancy option provides more visual interest</span>

        </h2>
        <p class="">Without an aside or a scheme/background, the fancy style doesn't look all that different from the default, but here it is anyway. In this demo, the accent line attached to the headline is hidden by the Fractal frame.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

</div>

<!-- Fancy Schemed -->
<div class="feature feature--fancy scheme--green-primary">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Fancy Schemed Feature with no aside</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

</div>

<!-- Fancy Aside -->
<div class="feature feature--fancy">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Fancy Feature with Aside</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>
                <p class="">This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom
                    or inclusion setting.</p>

                <cite>
  <div class="title">Alfred E. Newman</div>
  </cite>
            </figcaption>
        </figure>
    </div>

</div>

<!-- Fancy Aside Reversed -->
<div class="feature feature--fancy feature--aside-reversed">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Fancy Feature with Aside Reversed</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>
                <p class="">This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom
                    or inclusion setting.</p>

                <cite>
  <div class="title">Alfred E. Newman</div>
  </cite>
            </figcaption>
        </figure>
    </div>

</div>

<!-- Fancy Green Primary Aside -->
<div class="feature feature--fancy scheme--green-primary">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Fancy Schemed Feature with Aside</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>
                <p class="">This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom
                    or inclusion setting.</p>

                <cite>
  <div class="title">Alfred E. Newman</div>
  </cite>
            </figcaption>
        </figure>
    </div>

</div>

<!-- Fancy Green Primary Aside Reversed -->
<div class="feature feature--fancy feature--aside-reversed scheme--green-primary">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Fancy Schemed Feature with Aside Reversed</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>
                <p class="">This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom
                    or inclusion setting.</p>

                <cite>
  <div class="title">Alfred E. Newman</div>
  </cite>
            </figcaption>
        </figure>
    </div>

</div>

<!-- Minimal -->
<div class="feature feature--minimal">
    <div class="feature__content">

        <h2 class="headline-group ">
            <span class="headline-group__super">Optional Superhead</span>
            <span href="undefined" -keys="class,href" class="headline-group__head">Minimal Feature</span>
            <span class="headline-group__sub">Optional Subhead</span>
        </h2>
        <p class="">This minimal visual style is provided for when a more subdued feature is needed.</p>

        <a href="http://www.example.com/" class="link--fancy link--arrow">Default Link Text</a> </div>

</div>

<!-- Minimal With Linked Headline -->
<div class="feature feature--minimal">
    <div class="feature__content">

        <h2 class="headline-group ">

            <a href="http://www.example.com" -keys="class,href" class="headline-group__head">Minimal with Linked Headline</a>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

    </div>

</div>

<!-- Minimal With Aside -->
<div class="feature feature--minimal">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Headline group without sub and super</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

    </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>

            </figcaption>
        </figure>
    </div>

</div>

<!-- Minimal With Aside Reversed -->
<div class="feature feature--minimal feature--aside-reversed">
    <div class="feature__content">

        <h2 class="headline-group ">

            <span href="undefined" -keys="class,href" class="headline-group__head">Headline group without sub and super</span>

        </h2>
        <p class=""><strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side
            of these conduits, and extending their entire length, <a href="http://www.example.com/">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government
            officers.</p>

    </div>

    <div class="feature__aside">
        <figure class="">
            <img src="https://magicyeti.us/1200/900/gmu-cos" alt="Placeholder image. This should be real alt text when implemented." class="" />
            <figcaption>

            </figcaption>
        </figure>
    </div>

</div>

{% set _feature_aside_content %}
  {% if feature.aside is not empty or block('feature_aside') is not empty %}
    {% if feature.aside.pattern %}
      {% include feature.aside.pattern with feature.aside.pattern_context %}
    {% elseif is_render_array(feature.aside) %}
      {{ feature.aside }}
    {% endif %}
  {% endif %}
{% endset %}

{% if feature is not empty %}
<div class="feature {{ feature.variant }}">
  <div class="feature__content">
        {% include '@hg' with { hg: feature.hg } %}
        {% block feature_content %}
          {% if feature.content %}
            {{ feature.content }}
          {% elseif feature.pattern %}
            {% include feature.pattern with feature.pattern_context %}
          {% endif %}
        {% endblock %}
        {% include '@link' with { link: feature.link } %}
        {% include '@link-list' with { link_list: feature.link_list } %}
  </div>

  {{ (block('feature_aside')|default(_feature_aside_content))|trim|tagwrap('feature__aside') }}

</div>
{% endif %}
/* Default */
{
  "feature": {
    "hg": {
      "super": null,
      "headline": "Headline group without sub and super",
      "sub": null,
      "tag": "h2"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    }
  }
}

/* No Link */
{
  "feature": {
    "hg": {
      "headline": "Feature with no link"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": null
  }
}

/* Aside */
{
  "feature": {
    "hg": {
      "headline": "Most features should have an aside"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": {
            "citation": "Alfred E. Newman"
          },
          "p": {
            "content": "This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom or inclusion setting."
          },
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

/* Aside Reversed */
{
  "feature": {
    "hg": {
      "headline": "Option to flip the aside on large screens"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": {
            "citation": "Alfred E. Newman"
          },
          "p": {
            "content": "This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom or inclusion setting."
          },
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    },
    "variant": "feature--aside-reversed"
  }
}

/* With Link List */
{
  "feature": {
    "hg": {
      "headline": "Option to use link list component instead of single link"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": null,
    "link_list": {
      "list_style": "clean",
      "items": [
        {
          "link": {
            "url": "http://www.example.com/",
            "title": "Default Link Text",
            "variant": "link--fancy link--arrow"
          }
        },
        {
          "link": {
            "url": "http://www.example.com/",
            "title": "Default Link Text",
            "variant": "link--fancy link--arrow"
          }
        }
      ]
    }
  }
}

/* Scheme Green Primary */
{
  "feature": {
    "hg": {
      "headline": "Features can be schemed to stand out"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "scheme--green-primary"
  }
}

/* Fancy */
{
  "feature": {
    "hg": {
      "level": 2,
      "headline": "The fancy option provides more visual interest"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "Without an aside or a scheme/background, the fancy style doesn't look all that different from the default, but here it is anyway. In this demo, the accent line attached to the headline is hidden by the Fractal frame."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--fancy"
  }
}

/* Fancy Schemed */
{
  "feature": {
    "hg": {
      "headline": "Fancy Schemed Feature with no aside"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--fancy scheme--green-primary"
  }
}

/* Fancy Aside */
{
  "feature": {
    "hg": {
      "headline": "Fancy Feature with Aside"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--fancy",
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": {
            "citation": "Alfred E. Newman"
          },
          "p": {
            "content": "This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom or inclusion setting."
          },
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

/* Fancy Aside Reversed */
{
  "feature": {
    "hg": {
      "headline": "Fancy Feature with Aside Reversed"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--fancy feature--aside-reversed",
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": {
            "citation": "Alfred E. Newman"
          },
          "p": {
            "content": "This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom or inclusion setting."
          },
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

/* Fancy Green Primary Aside */
{
  "feature": {
    "hg": {
      "headline": "Fancy Schemed Feature with Aside"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--fancy scheme--green-primary",
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": {
            "citation": "Alfred E. Newman"
          },
          "p": {
            "content": "This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom or inclusion setting."
          },
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

/* Fancy Green Primary Aside Reversed */
{
  "feature": {
    "hg": {
      "headline": "Fancy Schemed Feature with Aside Reversed"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--fancy feature--aside-reversed scheme--green-primary",
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": {
            "citation": "Alfred E. Newman"
          },
          "p": {
            "content": "This is a caption. Ideally most photos should have a caption. Learn how to design and implement programs for K-12 students with varying significant disabling conditions, and to work with children with severe disabilities in a classroom or inclusion setting."
          },
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

/* Minimal */
{
  "feature": {
    "hg": {
      "level": 2,
      "headline": "Minimal Feature",
      "sub": "Optional Subhead",
      "super": "Optional Superhead"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "This minimal visual style is provided for when a more subdued feature is needed."
      }
    },
    "link": {
      "url": "http://www.example.com/",
      "title": "Default Link Text",
      "variant": "link--fancy link--arrow"
    },
    "variant": "feature--minimal"
  }
}

/* Minimal With Linked Headline */
{
  "feature": {
    "hg": {
      "level": 2,
      "headline": {
        "url": "http://www.example.com",
        "title": "Minimal with Linked Headline"
      }
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": null,
    "variant": "feature--minimal"
  }
}

/* Minimal With Aside */
{
  "feature": {
    "hg": {
      "super": null,
      "headline": "Headline group without sub and super",
      "sub": null,
      "tag": "h2"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": null,
    "variant": "feature--minimal",
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": null,
          "p": null,
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

/* Minimal With Aside Reversed */
{
  "feature": {
    "hg": {
      "super": null,
      "headline": "Headline group without sub and super",
      "sub": null,
      "tag": "h2"
    },
    "pattern": "@p",
    "pattern_context": {
      "p": {
        "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers. Along either side of these conduits, and extending their entire length, <a href=\"http://www.example.com/\">lie the cultivated districts.</a> These are divided into tracts of about the same size, each tract being under the supervision of one or more government officers."
      }
    },
    "link": null,
    "variant": "feature--minimal feature--aside-reversed",
    "aside": {
      "pattern": "@figure",
      "pattern_context": {
        "image": {
          "ratio": "4:3",
          "width": 1200,
          "alt": "Placeholder image. This should be real alt text when implemented.",
          "tag": "gmu-cos"
        },
        "figure": {
          "media": "@image",
          "media_context": {
            "image": {
              "ratio": "4:3",
              "width": 1200,
              "alt": "Placeholder image. This should be real alt text when implemented.",
              "tag": "gmu-cos"
            }
          },
          "cite": null,
          "p": null,
          "hg": {
            "super": "Optional Superhead",
            "headline": "Headline Group",
            "sub": "Optional Subhead",
            "tag": "h2"
          }
        }
      }
    }
  }
}

  • Content:
    .feature {
        &:not(:last-child) {
            margin-bottom: component-spacing(medium);
        }
    
        .feature__content {
            &:not(:last-child) {
                margin-bottom: component-spacing(medium);
                @include rr-break-directive(l) {
                    margin-bottom: 0;
                }
            }
        }
    
        @include rr-break-directive(m) {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            .feature__content {
                order: 2;
                flex: 1 1 auto;
            }
            .feature__aside {
                order: 1;
                flex: 1 0 50%;
                margin-right: component-spacing(wide);
            }
        }
    
        &.feature--aside-reversed {
            @include rr-break-directive(m) {
                .feature__content {
                    order: 1;
                }
                .feature__aside {
                    order: 2;
                    margin-right: 0;
                    margin-left: component-spacing(wide);
                }
            }
        }
    
        &.feature--fancy {
            @include rr-break-directive(m) {
                // all fancy features, schemed or not, have the accent line that connects the aside & headline
                .feature__content {
                    .headline-group {
                        .headline-group__head {
                            position: relative;
                            display: block;
                            &:after {
                                content: '';
                                display: block;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: -(component-spacing(wide) * $fancy-feature-accent-line-constant);
                                right: auto;
                                margin: auto;
                                height: $accent-line;
                                width: $floating-line-width;
                            }
                        }
                    }
                }
                &.feature--aside-reversed {
                    .feature__content {
                        .headline-group {
                            .headline-group__head {
                                &:after {
                                    right: -(component-spacing(wide) * $fancy-feature-accent-line-constant);
                                    left: auto;
                                }
                            }
                        }
                    }
                }
    
                // if the feature is schemed, the aside pops out of the schemed/background area at the top and side
                &[class*=scheme--] {
                    position: relative;
                    margin-top: $fancy-feature-popout/2;
                    .feature__content {
                        position: relative;
                        z-index: 2;
                    }
                    .feature__aside {
                        flex-basis: 60%; 
                        align-self: flex-start;
                        position: relative;
                        top: -$fancy-feature-popout;
                        margin-bottom: -$fancy-feature-popout;
                        left: -$fancy-feature-popout;
                        margin-right: -($fancy-feature-popout/2);
                        // we'll probably have to change this, but the hope here is:
                        // whatever pattern wrapper > whatever's inside it and not an image.
                        // if we restrict feature asides to figure only, we can be specific with just figcaption,
                        // but keeping it open-ended for now...
                        & > * > :not(img) {
                            margin-left: $fancy-feature-popout;
                        }
                    }
                    &.feature--aside-reversed {
                        .feature__aside {
                            right: -$fancy-feature-popout;
                            margin-left: -($fancy-feature-popout/2);
                            left: auto;
                            margin-right: 0;
                            & > * > :not(img) {
                                margin-left: 0;
                                margin-right: $fancy-feature-popout;
                            }
                        }
                    }
                }
            }
        }
    
        &.feature--minimal {
            align-items: flex-start;
            .headline-group {
                @include rr-font-compute(xl, medium);
                font-family: $font-primary;
                .headline-group__head {
                    @include rr-font-compute(xl, medium);
                    font-family: $font-primary;
                }
                .headline-group__sub,
                .headline-group__super {
                    @include rr-font-compute(m, squeeze);
                    font-weight: normal;
                    font-family: $font-primary;
                }
            }
            .feature__aside {
                @include rr-break-directive(m) {
                    flex: 1 0 25%;
                    margin-right: component-spacing(medium);
                }
            }
        }
    
        &[class*=scheme--] {
            padding: component-spacing(medium);
            @include rr-break-directive(m) {
                padding: component-spacing(wide);
            }
        }
    }
    
    // Bump down font size in sidebar context.
    // Something like this may need to generalize to other components.
    .sidebar {
      .grid__main {
        .feature {
          h2 {
            @include heading-style(4);
          }
        }
      }
    }
  • URL: /components/raw/feature/feature.scss
  • Filesystem Path: patterns/organisms/feature/feature.scss
  • Size: 5.3 KB

There are no notes for this item.