Feature card

Honduras

How open contracting is driving more powerful controls — from spot checks to analyzing sector trends.

<div class="card card--feature">

    <div class="card__image">

        <img src="https://ocp.imgix.net/wp-content/uploads/2019/09/Mitad_del_Mundo_Quito_Ecuador_2015-07-22_DD_03-e1567799287970.jpg?fm=pjpg&fit=max&w=1000" />

        <div class="card__image-overlay">

            <a class="card__title-link" href="#">
                <h2 class="card__title">Honduras</h2>
            </a>

            <div class="card__intro">
                <p>How open contracting is driving more powerful controls — from spot checks to analyzing sector trends.</p>
            </div>

        </div>

    </div>

</div>

Link card

Default

<div class="card card--link">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">

        <a class="arrow-link" href="#" data-icon-color="white" data-text-color="black">
            <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
            <span class="arrow-link__label">Read</span>
        </a>

    </div>

</div>

Light

<div class="card card--link" data-colour-scheme="light">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">

        <a class="arrow-link" href="#" data-text-color="black">
            <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
            <span class="arrow-link__label">Read</span>
        </a>

    </div>

</div>

Transparent

<div class="aigis-preview__background">

    <div class="card card--link" data-colour-scheme="transparent">

        <div class="card__body">
            <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
        </div>

        <div class="card__footer">

            <a class="arrow-link" href="#" data-icon-color="white" data-text-color="white">
                <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>
                <span class="arrow-link__label">Read</span>
            </a>

        </div>

    </div>

</div>

Primary card

Blog

Reflections from the middle of the world: innovation in open contracting from Latin America

Nicolas Penagos

Read

<div class="card card--primary">

    <div class="card__image">

        <img src="https://ocp.imgix.net/wp-content/uploads/2019/09/Mitad_del_Mundo_Quito_Ecuador_2015-07-22_DD_03-e1567799287970.jpg?fm=pjpg&fit=max&w=1000" />

        <div class="card__image-overlay">
            <div class="card__tag">Blog</div>
        </div>

    </div>

    <div class="card__main">

        <a class="card__title-link" href="#">
            <h2 class="card__title">Reflections from the middle of the world: innovation in open contracting from Latin&nbsp;America</h2>
        </a>

        <div class="card__footer">

            <div class="card__meta">
                Nicolas Penagos
            </div>

            <div class="card__cta">

                <a class="arrow-link" href="#">

                    <svg class="arrow-link__icon"><use xlink:href="#icon-arrow-circle"></use></svg>

                    <span class="arrow-link__label">Read</span>

                </a>

            </div>

        </div>

    </div>

</div>

Resource card

Default

<div class="card card--resource">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">
        <div class="card__icon"></div>
        <span class="card__type">Resource</span>
    </div>

</div>

Highlight Colours

<div class="card card--resource" data-post-type="orange">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">
        <div class="card__icon"></div>
        <span class="card__type">Resource</span>
    </div>

</div>

<div class="card card--resource" data-post-type="resource">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">
        <div class="card__icon"></div>
        <span class="card__type">Resource</span>
    </div>

</div>

Background Colours

<div class="card card--resource" data-colour-scheme="light" data-post-type="post">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">
        <div class="card__icon"></div>
        <span class="card__type">Blog</span>
    </div>

</div>

<div class="card card--resource" data-colour-scheme="light" data-post-type="resource">

    <div class="card__body">
        <a class="card__link" href="#">How we successfully pushed for more transparent public procurement rules in Spain</a>
    </div>

    <div class="card__footer">
        <div class="card__icon"></div>
        <span class="card__type">Resource</span>
    </div>

</div>

Square card

<div class="card card--square">

    <div class="card__image">
        <img src="https://ocp.imgix.net/wp-content/uploads/2019/09/Mitad_del_Mundo_Quito_Ecuador_2015-07-22_DD_03-e1567799287970.jpg?fm=pjpg&fit=crop&h=500&w=500&sat=-100" />
    </div>

</div>