<div class="mt-2 article-grid-container">

    <div class="article-grid-head">
        <div class="d-flex flex-items-baseline flex-justify-between mt-3">
            <h1 class="border-bottom-0" id="unions">Unions</h1>
        </div>
    </div>
    <div class="article-grid-toc border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0">
        <div class="article-grid-toc-content">
            <h3 id="unions-in-this-section" class="f5 mb-2">
                <a class="link-gray-dark" href="#unions-in-this-section">In this section</a>
            </h3>
            <ul class="list-style-none pl-0 f5 mb-0">
                <li class="ml-0  mb-2 lh-condensed">
                    <a href="#about-unions">About unions</a>
                </li>
                {% for union in reference.unions %}
                <li class="ml-0  mb-2 lh-condensed">
                    <a href="#unions-{{ union.name|slugify }}">{{ union.name }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div id="article-contents" class="article-grid-body">
        <h3 id="about-unions"><a href="#about-unions">About unions</a></h3>
        <p>
            A <a href="https://graphql.github.io/graphql-spec/June2018/#sec-Unions">union</a>
            is a type of object representing many objects.
        </p>
        {% for union in reference.unions %}
        <div>
            <div>
                <h3 id="unions-{{ union.name|slugify }}" class="pt-3">
                    <a href="#unions-{{ union.name|slugify }}">{{ union.name }}</a>
                </h3>
                {{ union.description|default('', True)|markdown|safe }}
            </div>
            <div>
                <h4>Possible types</h4>
                <ul>
                    {% for type in union.types %}
                    <li>
                        <a href="#objects-{{ type.name|slugify }}">{{ type.name }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <hr>
        </div>
        {% endfor %}
    </div>
</div>
