Media Mentions View

<div class="c-media-mentions-view">
    <h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only"></h2>
    <div id="js-filter-content" class="o-filter-content-container">
        <div class="o-filter-content-container__loader">
            <div class="o-filter-content-container__loader-icon"></div>
            <span class="u-sr-only">Loading...</span>
        </div>
        <div id="js-replace-content" class="o-filter-content-container__inner">

            <div class="o-column-panel c-c-media-mentions-view-year o-column-panel--collapsed" data-bkg-theme="base">
                <div class="o-container">
                    <div class="o-row">
                        <div class="o-column-panel__header o-col o-col-sm-md-4">
                            <div class="o-column-panel__header-content">
                                <h2 class="o-column-panel__title f-title--h3">2021</h2>

                            </div>
                        </div>

                        <div class="o-column-panel__content o-col o-col-sm-md-8">

                            <ul class="c-media-mentions-view-year__list-items">

                                <li class="o-list-card c-media-mentions-view-year__list-item js-watch u-watch--fade-up">
                                    <a href="" class="o-list-card__link o-list-card__link--no-image">
                                        <div class="o-list-card__content">
                                            <h4 class="o-list-card__title f-title--h5">
                                                <span class="u-hover-drawline">Academy Science Camp: Life before dinosaurs</span>
                                            </h4>

                                            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

                                            <p class="o-list-card__date f-text--time">Thursday, February 12</p>

                                        </div>

                                    </a>
                                </li>

                                <li class="o-list-card c-media-mentions-view-year__list-item js-watch u-watch--fade-up">
                                    <a href="" class="o-list-card__link o-list-card__link--no-image">
                                        <div class="o-list-card__content">
                                            <h4 class="o-list-card__title f-title--h5">
                                                <span class="u-hover-drawline">Paleo Playdate</span>
                                            </h4>

                                            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

                                            <p class="o-list-card__date f-text--time">Thursday, February 12</p>

                                        </div>

                                    </a>
                                </li>

                                <li class="o-list-card c-media-mentions-view-year__list-item js-watch u-watch--fade-up">
                                    <a href="" class="o-list-card__link o-list-card__link--no-image">
                                        <div class="o-list-card__content">
                                            <h4 class="o-list-card__title f-title--h5">
                                                <span class="u-hover-drawline">Academy Science Camp: Secrets of the museum</span>
                                            </h4>

                                            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

                                            <p class="o-list-card__date f-text--time">Thursday, February 12</p>

                                        </div>

                                    </a>
                                </li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="o-column-panel c-c-media-mentions-view-year o-column-panel--collapsed" data-bkg-theme="base">
                <div class="o-container">
                    <div class="o-row">
                        <div class="o-column-panel__header o-col o-col-sm-md-4">
                            <div class="o-column-panel__header-content">
                                <h2 class="o-column-panel__title f-title--h3">2022</h2>

                            </div>
                        </div>

                        <div class="o-column-panel__content o-col o-col-sm-md-8">

                            <ul class="c-media-mentions-view-year__list-items">

                                <li class="o-list-card c-media-mentions-view-year__list-item js-watch u-watch--fade-up">
                                    <a href="" class="o-list-card__link o-list-card__link--no-image">
                                        <div class="o-list-card__content">
                                            <h4 class="o-list-card__title f-title--h5">
                                                <span class="u-hover-drawline">Academy Science Camp: Life before dinosaurs</span>
                                            </h4>

                                            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

                                            <p class="o-list-card__date f-text--time">Thursday, February 13</p>

                                        </div>

                                    </a>
                                </li>

                                <li class="o-list-card c-media-mentions-view-year__list-item js-watch u-watch--fade-up">
                                    <a href="" class="o-list-card__link o-list-card__link--no-image">
                                        <div class="o-list-card__content">
                                            <h4 class="o-list-card__title f-title--h5">
                                                <span class="u-hover-drawline">Academy Science Camp: Life before dinosaurs</span>
                                            </h4>

                                            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

                                            <p class="o-list-card__date f-text--time">Thursday, February 13</p>

                                        </div>

                                    </a>
                                </li>

                                <li class="o-list-card c-media-mentions-view-year__list-item js-watch u-watch--fade-up">
                                    <a href="" class="o-list-card__link o-list-card__link--no-image">
                                        <div class="o-list-card__content">
                                            <h4 class="o-list-card__title f-title--h5">
                                                <span class="u-hover-drawline">Academy Science Camp: Life before dinosaurs</span>
                                            </h4>

                                            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

                                            <p class="o-list-card__date f-text--time">Thursday, February 13</p>

                                        </div>

                                    </a>
                                </li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="c-pagination-column o-container">
                <div class="o-row">
                    <div class="c-pagination-column__content o-col o-col-sm-8 o-col-sm--offset-4">
                        <div class="o-pagination">
                            <nav class="o-pagination__nav" aria-label="Pagination">

                                <ul class="o-pagination__items" aria-label="Pagination links">

                                    <li class="o-pagination__item">
                                        <a href="#1" class="o-pagination__link" aria-current="page" aria-label="Current Page - Page 1">1</a>
                                    </li>

                                    <li class="o-pagination__item">
                                        <a href="#2" class="o-pagination__link" aria-label="Page 2">2</a>
                                    </li>

                                    <li class="o-pagination__item">
                                        <a href="#3" class="o-pagination__link" aria-label="Page 3">3</a>
                                    </li>

                                    <li class="o-pagination__item">
                                        <a href="#4" class="o-pagination__link" aria-label="Page 4">4</a>
                                    </li>

                                    <li class="o-pagination__item o-pagination__item--elipsis">
                                        <span class="o-pagination__elipsis"></span>
                                    </li>

                                    <li class="o-pagination__item">
                                        <a href="#11" class="o-pagination__link" aria-label="Page 11">11</a>
                                    </li>

                                </ul>

                                <div class="o-pagination__next">
                                    <a href="#next" class="o-pagination__dir-link">
                                        <span class="u-sr-only">Next Page</span>
                                        <span class="o-pagination__dir-icon" aria-hidden="true">
                                            <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1L6 6L1 11" class="u-ct-stroke" />
                                            </svg>

                                        </span>
                                    </a>
                                </div>

                            </nav>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<div class="c-media-mentions-view">
  {% embed "04-objects/filters/filter-content-container" %}
    {% block filterContainerContent %}
      {% for year in years %}
        {% include "06-components/press-room-views/helpers/media-mentions-view-year" with {
          year: year.year,
          items: year.items
        } only %}
      {% endfor %}
      {% include "06-components/pagination-column" with pagination only %}
    {% endblock %}
  {% endembed %}
</div>
{
  "pageColorTheme": "teal",
  "years": [
    {
      "year": "2021",
      "items": [
        {
          "title": "Academy Science Camp: Life before dinosaurs",
          "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
          "date": "Thursday, February 12",
          "time": "1:00p.m.–2:30p.m."
        },
        {
          "title": "Paleo Playdate",
          "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
          "date": "Thursday, February 12",
          "time": "4:00p.m.–5:30p.m."
        },
        {
          "title": "Academy Science Camp: Secrets of the museum",
          "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
          "date": "Thursday, February 12",
          "time": "2:00p.m.–3:00p.m."
        }
      ]
    },
    {
      "year": "2022",
      "items": [
        {
          "title": "Academy Science Camp: Life before dinosaurs",
          "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
          "date": "Thursday, February 13",
          "time": "1:00p.m.–2:30p.m."
        },
        {
          "title": "Academy Science Camp: Life before dinosaurs",
          "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
          "date": "Thursday, February 13",
          "time": "1:00p.m.–2:30p.m."
        },
        {
          "title": "Academy Science Camp: Life before dinosaurs",
          "image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
          "date": "Thursday, February 13",
          "time": "1:00p.m.–2:30p.m."
        }
      ]
    }
  ],
  "pagination": {
    "data": {
      "prev": false,
      "items": [
        {
          "title": "1",
          "link": "#1",
          "isCurrent": true
        },
        {
          "title": "2",
          "link": "#2"
        },
        {
          "title": "3",
          "link": "#3"
        },
        {
          "title": "4",
          "link": "#4"
        },
        {
          "isElipsis": true
        },
        {
          "link": "#11",
          "title": "11"
        }
      ],
      "next": {
        "title": "Next Page",
        "link": "#next"
      }
    }
  }
}

No notes defined.