<div class="c-journal-view" data-bkg-theme="base">
<div class="o-filter-bar o-container c-journal-view__filters">
<h2 class="u-sr-only">Filters</h2>
<form id="js-filter-form" class="o-row o-filter-bar__form js-filter-form" data-baseurl="https://bc-ans.netlify.app">
<div class="c-experience-filters__filter c-experience-filters__filter--search o-col o-col-sm-4 o-col-lg-3">
<div class="o-fancy-form-item o-fancy-form-item--icon o-fancy-input">
<label class="o-fancy-form-item__label" for="journal-search">
<span class="o-fancy-form-item__icon" aria-hidden="true"><svg width="14" height="14" viewbox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M6.90519 12.5466C10.1665 12.5466 12.8104 9.96179 12.8104 6.77329C12.8104 3.58479 10.1665 1 6.90519 1C3.64383 1 1 3.58479 1 6.77329C1 9.96179 3.64383 12.5466 6.90519 12.5466Z" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
<path class="u-ct-stroke" d="M11.0859 10.8608L15.9998 15.6649" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
</svg>
</span>
<span class="o-fancy-form-item__label-text">Search the Journal</span>
</label>
<input id="journal-search" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="s" />
</div>
</div>
<div class="c-experience-filters__filter c-experience-filters__filter--topic o-col o-col-sm-4 o-col-lg-3">
<div class="o-listbox-filter js-listbox-parent" data-param-name="topic">
<button class="o-listbox-filter__trigger js-listbox-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
Topic
<span class="o-listbox-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</button>
<ul role="listbox" class="o-listbox-filter__listbox js-listbox" tabindex="0" aria-label="Topic list">
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4947" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 1" value="topic-1">
<label class="o-listbox-filter__label" for="listbox-item-4947">Topic 1</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-855" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 2" value="topic-2">
<label class="o-listbox-filter__label" for="listbox-item-855">Topic 2</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4377" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 3" value="topic-3">
<label class="o-listbox-filter__label" for="listbox-item-4377">Topic 3</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-2340" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 4" value="topic-4">
<label class="o-listbox-filter__label" for="listbox-item-2340">Topic 4</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-928" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Topic 5" value="topic-5">
<label class="o-listbox-filter__label" for="listbox-item-928">Topic 5</label>
</li>
</ul>
</div>
</div>
</form>
</div>
<div class="o-applied-filters o-container is-empty">
<h2 id="applied-filter-results-title" class="u-sr-only">Applied Filters</h2>
<div class="o-applied-filters__wrapper">
<div id="applied-filter-results" class="o-applied-filters__inner">
</div>
<button class="js-remove-all-filters o-applied-filters__remove-all">
<span class="u-hover-drawline--thin">Remove All Filters</span>
</button>
</div>
</div>
<h2 id="js-filter-content-title" tabIndex="-1" class="u-sr-only">Journal Results List</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="c-journal-view__content o-container">
<ul class="c-journal-view__results o-row" aria-labelledby="js-filter-content-title">
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Support environmental justice</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/katie-rodriguez.jpg" alt="katie rodgriguez" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>Environmental Justice</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<div class="o-card__video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ShL5zhd5cWQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/dino-on-truck.png" alt="katie rodgriguez" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>Environmental Justice</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Dragons after dark: Seven reasons you should go</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/wizarding.jpg" alt="wizarding" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/eel.jpg" alt="eel" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor set amet</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/owl-on-branch.jpg" alt="wizarding" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Support environmental justice</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/Wiley_Bioko.jpg" alt="katie rodgriguez" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>Environmental Justice</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/museum.png" alt="eel" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Dragons after dark: Seven reasons you should go</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/wizarding.jpg" alt="wizarding" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Support environmental justice</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>
</div>
<div class="o-card__img">
<div class="o-card__video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ShL5zhd5cWQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>Environmental Justice</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/Habibata-Sylla.jpg" alt="eel" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
<li class="c-journal-view__result o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Dragons after dark: Seven reasons you should go</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/journal/wizarding.jpg" alt="wizarding" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="c-journal-view__pagination o-container">
<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 class="c-journal-view" data-bkg-theme="base">
{% embed "04-objects/filters/filter-bar" with filterBar|merge({classes: 'c-journal-view__filters'}) %}
{% block formContent %}
<div class="c-experience-filters__filter c-experience-filters__filter--search o-col o-col-sm-4 o-col-lg-3">
<div class="o-fancy-form-item o-fancy-form-item--icon o-fancy-input">
<label class="o-fancy-form-item__label" for="journal-search">
<span class="o-fancy-form-item__icon" aria-hidden="true">{% include "03-icons/search" %}</span>
<span class="o-fancy-form-item__label-text">Search the Journal</span>
</label>
<input id="journal-search" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="s" />
</div>
</div>
<div class="c-experience-filters__filter c-experience-filters__filter--topic o-col o-col-sm-4 o-col-lg-3">
{% include "04-objects/filters/listbox-filter" with {
title: 'Topic',
items: filterBar.topics,
paramName: 'topic'
} only %}
</div>
{% endblock %}
{% endembed %}
{% embed "04-objects/filters/filter-content-container" with filterContainerData %}
{% block filterContainerContent %}
<div class="c-journal-view__content o-container">
<ul class="c-journal-view__results o-row" aria-labelledby="js-filter-content-title">
{% for card in cards %}
<li class="c-journal-view__result o-col o-col-sm-4">
{% include "04-objects/card" with card|merge({
hSize: 'small',
}) %}
</li>
{% endfor %}
</ul>
</div>
<div class="c-journal-view__pagination o-container">
{% include "04-objects/pagination" with pagination only %}
</div>
{% endblock %}
{% endembed %}
</div>
{
"pageColorTheme": "teal",
"filterBar": {
"title": "Filters",
"formBaseURL": "https://bc-ans.netlify.app",
"topics": [
{
"title": "Topic 1",
"value": "topic-1"
},
{
"title": "Topic 2",
"value": "topic-2"
},
{
"title": "Topic 3",
"value": "topic-3"
},
{
"title": "Topic 4",
"value": "topic-4"
},
{
"title": "Topic 5",
"value": "topic-5"
}
]
},
"filterContainerData": {
"title": "Journal Results List"
},
"cards": [
{
"link": "#",
"title": "Support environmental justice",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
"image": "<img src=\"/images/journal/katie-rodriguez.jpg\" alt=\"katie rodgriguez\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "Environmental Justice",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor sit amet consectetur adipiscing",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/eel.jpg\" alt=\"eel\" />",
"videoEmbed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/ShL5zhd5cWQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
"image": "<img src=\"/images/journal/dino-on-truck.png\" alt=\"katie rodgriguez\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "Environmental Justice",
"link": "#"
}
]
},
{
"link": "#",
"title": "Dragons after dark: Seven reasons you should go",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/wizarding.jpg\" alt=\"wizarding\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor sit amet consectetur adipiscing",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/eel.jpg\" alt=\"eel\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor set amet",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/owl-on-branch.jpg\" alt=\"wizarding\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Support environmental justice",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
"image": "<img src=\"/images/journal/Wiley_Bioko.jpg\" alt=\"katie rodgriguez\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "Environmental Justice",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor sit amet consectetur adipiscing",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/museum.png\" alt=\"eel\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Dragons after dark: Seven reasons you should go",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/wizarding.jpg\" alt=\"wizarding\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Support environmental justice",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
"videoEmbed": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/ShL5zhd5cWQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "Environmental Justice",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor sit amet consectetur adipiscing",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/Habibata-Sylla.jpg\" alt=\"eel\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
},
{
"link": "#",
"title": "Dragons after dark: Seven reasons you should go",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/journal/wizarding.jpg\" alt=\"wizarding\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
}
],
"pagination": {
"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"
}
}
}
.c-journal-view {
margin-bottom: 8rem;
@include break($sm) {
margin-bottom: 10rem;
}
}
.c-journal-view__filters {
.o-filter-bar__form {
@include break($sm) {
justify-content: flex-end;
}
}
.o-listbox-filter__trigger {
border-bottom: 0.1rem solid var(--ct-txt);
background: none;
padding-left: 0;
}
.o-listbox-filter__icon {
right: 0;
}
& + .o-applied-filters {
margin-bottom: 5.4rem;
display: flex;
@include break($sm) {
justify-content: flex-end;
}
.o-applied-filters__wrapper {
@include flexColCommon;
@include break($sm) {
@include flexCol(8);
}
@include break($lg) {
@include flexCol(6);
}
}
}
}
.c-journal-view__result {
padding-bottom: 3.2rem;
@include break($sm) {
padding-bottom: 5.4rem;
}
&:last-child {
padding-bottom: 0;
}
}
.c-journal-view__pagination {
margin-top: 5.4rem;
display: flex;
justify-content: center;
@include break($sm) {
margin-top: 9.2rem;
}
}
No notes defined.