Demo

Source Code

<template>
  <b-container
    fluid
    :class="backgroundClass"
    class="px-0 StoryList"
    v-if="stories !==null && stories.length > 0 || search"
  >
    <b-container class="pt-5">
      <b-row class="mb-5">
        <b-col
          cols="12"
          md="7"
        >
          <template class="d-flex">
            <b-button
              v-for="tag in tags"
              :key="tag.index"
              class="mr-2 mb-2 StoryList__Button"
              :pressed="topic === tag.name ? true : false"
              :variant="variant === 'dark' || variant === 'primary' ? 'outline-light' : 'outline-primary'"
              @click="addRemoveTopicQuery(tag.name)"
            >
              {{ tag.name }}
              <b-badge
                v-if="tag.taggings_count > 1"
                class="ml-2"
                variant="dark"
              >
                {{ tag.taggings_count }}
              </b-badge>
              <div class="StoryList__Button--circle">
                <span class="StoryList__Button--xcross" />
              </div>
            </b-button>
          </template>
        </b-col>
        <b-col
          cols="12"
          md="5"
        >
          <div
            class="SearchBar"
            :class="{ 'SearchBar--open': isActive, 'SearchBar--light': variant === 'primary' || variant === 'dark' }"
          >
            <div
              class="SearchBar--wrapper"
              @click="focusInput()"
            >
              <b-form @submit.prevent="onSearch(search)">
                <label
                  for="search"
                  class="sr-only"
                >Search</label>
                <div
                  class="SearchBar--border"
                  :aria-pressed="isActive"
                  @click="toggleActive"
                />
                <input
                  v-if="topic"
                  type="hidden"
                  name="topic"
                  :value="topic"
                >
                <input
                  ref="search"
                  v-model="search"
                  class="SearchBar__input"
                  :class="textClass"
                  name="search"
                  placeholder="search by title"
                >
                <button
                  type="button"
                  class="SearchBar__close"
                  value="send"
                  @click.prevent="toggleActive(); clearSearch();"
                />
              </b-form>
            </div>
          </div>
        </b-col>
      </b-row>
      <b-row
        v-if="stories"
        class="mb-5"
      >
        <template v-for="story in stories">
          <b-col
            :key="story.index"
            cols="6"
            lg="4"
            md="6"
            :class="{textClass, 'StoryList--light': variant === 'primary' || variant === 'dark'}"
          >
            <card
              :title="story.name"
              :image="story.content.Image"
              :content="story.content.Description"
              :button-to="`/${story.full_slug}`"
              button-title="Read"
              :button-variant="variant"
            />
          </b-col>
        </template>
      </b-row>
      <b-row
        v-if="!totalPages"
        class="mb-5 mt-5"
      >
        <b-col :class="textClass">
          <p>Sorry, no posts matched your criteria</p>
        </b-col>
      </b-row>
      <b-row v-if="totalPages">
        <b-col>
          <b-pagination-nav
            v-model="currentPage"
            :number-of-pages="totalPages"
            :base-url="baseUrl"
            last-number
            use-router
          />
        </b-col>
      </b-row>
    </b-container>
  </b-container>
</template>

props

headline: { type: String, default: '' },
variant: { type: String, default: '' },
folderSlug: { type: String, default: null },
storiesPerPage: { type: String, default: '12' },
client: { type: String, default: null }

stories: null,
totalPages: null,
currentPage: 1,
tags: null,
search: null,
topic: null,
isActive: false

...