Squircles live

We use squircles to draw a person’s eye to a value offer (a deal or price) or to signify that something we think will interest a person has been added.

Example

Example

HTML

                                    
<div class="coop-l-row coop-u-margin-resp-t-64-32">
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
            <div class="coop-c-squircle coop-u-flex coop-u-flex-centered coop-c-squircle--new-squircle">       
                    <span class="coop-c-squircle__label">
                        <span class="coop-c-squircle__uppercase coop-c-squircle__uppercase__uppercase--new">New</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg width="115" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <path d="M111.237 28.442c-3.17-10.683-11.083-19.094-21.674-23.069-20.664-7.17-43.351-7.17-64.227.037C14.846 9.348 6.968 17.759 3.73 28.475A95.633 95.633 0 000 54.99a96.04 96.04 0 003.73 26.547c3.242 10.683 11.116 19.094 21.674 23.069A97.897 97.897 0 0057.5 110a97.366 97.366 0 0032.164-5.432c10.526-3.974 18.4-12.352 21.57-23.069A95.02 95.02 0 00115 54.989a95.424 95.424 0 00-3.763-26.547z" id="a"/>
                            </defs>
                            <g fill-rule="nonzero" fill="none">
                                <use fill="#FFEC00" xlink:href="#a"/>
                                <use fill="#0F947C" xlink:href="#a"/>
                            </g>
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure>
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
            <div class="coop-c-squircle coop-u-flex coop-u-flex-centered coop-c-squircle--new-squircle">       
                    <span class="coop-c-squircle__label">
                        <span class="coop-c-squircle__uppercase">New recipe</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg width="115" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <path d="M111.237 28.442c-3.17-10.683-11.083-19.094-21.674-23.069-20.664-7.17-43.351-7.17-64.227.037C14.846 9.348 6.968 17.759 3.73 28.475A95.633 95.633 0 000 54.99a96.04 96.04 0 003.73 26.547c3.242 10.683 11.116 19.094 21.674 23.069A97.897 97.897 0 0057.5 110a97.366 97.366 0 0032.164-5.432c10.526-3.974 18.4-12.352 21.57-23.069A95.02 95.02 0 00115 54.989a95.424 95.424 0 00-3.763-26.547z" id="a"/>
                            </defs>
                            <g fill-rule="nonzero" fill="none">
                                <use fill="#FFEC00" xlink:href="#a"/>
                                <use fill="#0F947C" xlink:href="#a"/>
                            </g>
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure>
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
                <div class="coop-c-squircle coop-u-flex coop-u-flex-centered coop-c-squircle--super_saver_squircle">       
                    <span class="coop-c-squircle__label">
                        <span class="coop-c-squircle__uppercase">Super saver</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg width="147" height="140" xmlns="http://www.w3.org/2000/svg">
                            <g fill="none" fill-rule="evenodd">
                            <path fill="#CF043C" fill-rule="nonzero" d="M129.043 98.685l14.729-2.594-12.147-8.73 14.342-4.244-13.047-7.31 13.78-5.817-13.78-5.813 13.047-7.306-14.342-4.236 12.147-8.726-14.717-2.546 9.735-12.074-15.5.935 4.684-14.81-14.112 6.496-1.024-15.532L101.5 17.121l-4.224-14.99-9.726 12.166L81.37 0l-8.02 13.353L65.333 0l-6.172 14.297-9.718-12.171-4.216 14.991L33.896 6.378 32.863 21.91l-14.108-6.511 4.672 14.813-15.504-.932 9.755 12.07-14.72 2.55 12.134 8.743-14.35 4.215 13.039 7.323L0 69.99l13.78 5.81L.743 83.124l14.35 4.224-12.139 8.742 14.721 2.558-9.755 12.067 15.504-.928-4.672 14.81 14.108-6.508 1.033 15.536 11.332-10.743 4.22 14.991 9.714-12.167L65.334 140l8.016-13.353L81.37 140l6.177-14.297 9.722 12.171 4.228-14.991 11.332 10.747 1.03-15.536 14.107 6.495-4.676-14.805 15.5.931-9.723-12.114"/><path d="M123.552 94.554a89.298 89.298 0 000-49.326 33.057 33.057 0 00-20.207-21.49 91.815 91.815 0 00-59.96 0 32.976 32.976 0 00-20.212 21.49 88.668 88.668 0 000 49.33 32.992 32.992 0 0020.211 21.495 91.597 91.597 0 0029.97 5.035 91.913 91.913 0 0029.987-5.031 33.08 33.08 0 0020.215-21.499" stroke="#FD0" stroke-width="3"/>
                            </g>
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure>
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
                <div class="coop-c-squircle coop-u-flex coop-u-flex-centered coop-c-squircle--fresh_3">       
                    <span class=" coop-c-squircle__label">
                        <span class="coop-c-squircle__uppercase">Fresh</span>
                        <span class="coop-c-squircle__large-text coop-c-squircle--text-pull">3</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg class="coop-c-squircle__svg" viewBox="0 0 100 115">
                        <g>
                            <path
                            d="M96.728125,43.0810931 C93.971875,33.6599519 87.090625,26.2431028 77.88125,22.7380123 C59.9125,16.4152936 40.184375,16.4152936 22.03125,22.7702875 C12.909375,26.2431028 6.059375,33.6599519 3.24375,43.1101408 C1.090625,50.6851385 0,58.5409308 0,66.4903213 C0,74.4397117 1.090625,82.295504 3.24375,89.8995495 C6.0625,99.3206907 12.909375,106.73754 22.090625,110.24263 C31.090625,113.402376 40.484375,115 50,115 C59.546875,115 68.940625,113.402376 77.96875,110.210355 C87.121875,106.705265 93.96875,99.3174631 96.725,89.8672742 C98.909375,82.2341811 100,74.3783888 100,66.4903213 C100,58.6022538 98.909375,50.7174138 96.728125,43.0810931 Z"
                            id="sq" fill-rule="nonzero"></path>
                            <path
                            d="M44,0 L50.6425124,0 L51.3188081,5.4309082 C54.5488399,3.59736314 58.0393144,2.68059061 61.7902314,2.68059061 C67.416607,2.68059061 67.4925974,5.01475016 69.8579135,5.01475016 C71.4347908,5.01475016 73.1488197,4.7828573 75,4.31907156 C71.0684597,8.28295675 68.1046199,11.2426224 66.1084806,13.1980684 C63.1142717,16.1312375 59.9780309,15.9122434 57.7791214,15.9122434 C56.3131817,15.9122434 54.5821423,15.3669442 52.586003,14.2763459 L52.586003,19.357326 L44.9134605,20 L44,0 Z"
                            id="Path"></path>
                        </g>
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure> 
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
                <div class="coop-c-squircle coop-u-flex coop-u-flex-centered">       
                    <span class=" coop-c-squircle__label">
                        <span class="coop-c-squircle__large-text">1/2</span>
                        <span class="coop-c-squircle__small-text">price</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg class="coop-c-squircle__svg" viewBox="0 0 61 58">
                        <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                                c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                                S60.3,19.6,59,15L59,15z" />
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure> 
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
                <div class="coop-c-squircle coop-u-flex coop-u-flex-centered">     
                    <span class=" coop-c-squircle__label">
                        <span class="coop-c-squircle__small-text">3 for</span>
                        <span class="coop-c-squircle__large-text coop-c-squircle--text-pull">£2</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg class="coop-c-squircle__svg" viewBox="0 0 61 58">
                        <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                                c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                                S60.3,19.6,59,15L59,15z" />
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure> 
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
    <div class="coop-l-column coop-l-large-4 coop-l-medium-6 coop-l-small-12">
        <article class="coop-c-editorialcard">
            <a
                href="#"
                class="coop-c-editorialcard__link"
                data-contenttype=""
                data-contentparent=""
                data-linktext=""
            >
                <div class="coop-c-squircle coop-u-flex coop-u-flex-centered">     
                    <span class="coop-c-squircle__label">
                        <span class="coop-c-squircle__large-text">£1</span>
                    </span>
                    <span class="coop-c-squircle__media coop-u-flex coop-u-flex-centered" aria-hidden="true">
                        <svg class="coop-c-squircle__svg" viewBox="0 0 61 58">
                        <path d="M59,15C57.3,9.4,53.1,4.9,47.5,2.8c-11-3.8-23-3.8-34.1,0C7.9,4.9,3.7,9.4,2,15c-1.3,4.5-2,9.2-2,14s0.7,9.4,2,14
                                c1.7,5.6,5.9,10.1,11.5,12.2C19,57,24.7,58,30.5,58c5.8,0,11.6-1,17.1-2.9C53.1,53,57.3,48.6,59,43c1.3-4.6,2-9.3,2-14
                                S60.3,19.6,59,15L59,15z" />
                        </svg>
                    </span>
                </div>
                <div class="coop-c-editorialcard__inner">
                    <figure class="coop-c-editorialcard__media">
                        <picture class="coop-c-editorialcard__image">
                            <!-- if browser supports webp image format, serve the webp format-->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=786&amp;h=446 2x" type="image/webp">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=968&amp;h=544 2x" type="image/webp">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=webp&amp;q=60&amp;w=1130&amp;h=634 2x" type="image/webp">
                            <!-- if no webp supported then default to serve progressive jpeg -->
                            <source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=393&amp;h=223 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=786&amp;h=446 2x" type="image/jpeg">
                            <source media="(min-width: 48em)" srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=484&amp;h=272 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <source srcset="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317 1x,
                                        //images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=968&amp;h=544 2x" type="image/jpeg">
                            <!-- fallback -->
                            <img src="//images.ctfassets.net/bffxiku554r1/4PEnVXbc1IsVbRramtgYL5/abaf2095c38b5c385bc0e352b4d2b20a/Hero-Card1_HalloweenRecipe_1008x567.jpg?fm=jpg&amp;fl=progressive&amp;q=60&amp;w=565&amp;h=317" width="565" height="317" alt="">
                        </picture>
                    </figure> 
                    <div class="coop-c-editorialcard__content">
                        <header class="coop-c-editorialcard__header">
                            <h3 class="coop-c-editorialcard__title">
                                <span>Explore our range of scary sweets, creepy cupcakes and petrifying pumpkins from £1</span>
                            </h3>
                        </header>
                    </div>
                </div>
            </a>
        </article> 
    </div>
</div>
    

                                    

Design and content

We see squircles a lot in physical locations (such as stores) as there is more competition for a person’s attention. Online we still use squircles to draw a person’s eye - but we use it a lot less. This is because when we design a user journey it should be focused around one or a small set of secific user needs.

Squircles should always be paired with an editorial card that contains more information on the deal or new content being promoted.

Within our content management system some squircles are editable whereas some are fixed.

Screen 2019-10-28 at 12.45.27

Related components

Suggest a pattern or change

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change