Styleguide

Media Echo 

<section class="bg-white pb-2">
    <div class="container">
        <div class="row justify-content-center pt-4 pb-3">
            <div class="mt-4 pb-5 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                <nav id="mediaAppearanceList" aria-label="Page navigation index">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="?page=0#mediaAppearanceList" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;1#mediaAppearanceList">1</a></li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;2#mediaAppearanceList">2</a></li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;3#mediaAppearanceList">3</a></li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;4#mediaAppearanceList">4</a></li>
                        <li class="page-item">
                            <a class="page-link" href="?page=2#mediaAppearanceList" aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="d-none d-md-block">
                    <table class="table table-striped table-light" aria-label="Table of media appearence results (desktop view)">
                        <thead>
                            <tr>
                                <th scope="col">Überschrift</th>
                                <th scope="col">Medium</th>
                                <th scope="col">Datum</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf" target="_blank" rel="noopener" title="Harter Wettbewerb um digitale Vorherrschaft">Harter Wettbewerb um digitale Vorherrschaft</a></td>
                                <td>DVZ</td>
                                <td>12.05.2021</td>
                            </tr>
                            <tr>
                                <td><a href="https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf" target="_blank" rel="noopener" title="Harter Wettbewerb um digitale Vorherrschaft">Harter Wettbewerb um digitale Vorherrschaft</a></td>
                                <td>DVZ</td>
                                <td>12.05.2021</td>
                            </tr>
                            <tr>
                                <td><a href="https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf" target="_blank" rel="noopener" title="Harter Wettbewerb um digitale Vorherrschaft">Harter Wettbewerb um digitale Vorherrschaft</a></td>
                                <td>DVZ</td>
                                <td>12.05.2021</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="d-block d-md-none" aria-label="Table of media appearence results (mobile view)">
                    <table class="table table-striped table-light">
                        <tbody>
                            <tr>
                                <td>
                                    <strong>Überschrift:</strong>
                                    <a href="https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf" target="_blank" rel="noopener" title="Harter Wettbewerb um digitale Vorherrschaft">Harter Wettbewerb um digitale Vorherrschaft</a>
                                    <br /><strong>Medium:</strong>
                                    DVZ
                                    <br /><strong>Datum:</strong>
                                    12.05.2021
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Überschrift:</strong>
                                    <a href="https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf" target="_blank" rel="noopener" title="Harter Wettbewerb um digitale Vorherrschaft">Harter Wettbewerb um digitale Vorherrschaft</a>
                                    <br /><strong>Medium:</strong>
                                    DVZ
                                    <br /><strong>Datum:</strong>
                                    12.05.2021
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Überschrift:</strong>
                                    <a href="https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf" target="_blank" rel="noopener" title="Harter Wettbewerb um digitale Vorherrschaft">Harter Wettbewerb um digitale Vorherrschaft</a>
                                    <br /><strong>Medium:</strong>
                                    DVZ
                                    <br /><strong>Datum:</strong>
                                    12.05.2021
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <nav aria-label="Page navigation index">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="?page=0#mediaAppearanceList" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;1#mediaAppearanceList">1</a></li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;2#mediaAppearanceList">2</a></li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;3#mediaAppearanceList">3</a></li>
                        <li class="page-item active"><a class="page-link" href="?page&#x3D;4#mediaAppearanceList">4</a></li>
                        <li class="page-item">
                            <a class="page-link" href="?page=2#mediaAppearanceList" aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>
 
<section class="bg-white pb-2">
  <div class="container">
    <div class="row justify-content-center pt-4 pb-3">
      <div class="mt-4 pb-5 col-sm-8 col-md-8 col-lg-8 col-xl-8">
        {{#with navigation}}
          <nav id="mediaAppearanceList" aria-label="Page navigation index">
            <ul class="pagination">
              <li class="page-item disabled">
                <a
                  class="page-link"
                  href="?page=0#mediaAppearanceList"
                  aria-label="Previous"
                >
                  <span aria-hidden="true">«</span>
                </a>
              </li>
              {{#each item}}
                <li class="page-item active"><a
                    class="page-link"
                    href="{{href}}"
                  >{{{text}}}</a></li>
              {{/each}}
              <li class="page-item">
                <a
                  class="page-link"
                  href="?page=2#mediaAppearanceList"
                  aria-label="Next"
                >
                  <span aria-hidden="true">»</span>
                </a>
              </li>
            </ul>
          </nav>
        {{/with}}
        {{#with entries}}
          <div class="d-none d-md-block">
            <table
              class="table table-striped table-light"
              aria-label="Table of media appearence results (desktop view)"
            >
              <thead>
                <tr>
                  <th scope="col">Überschrift</th>
                  <th scope="col">Medium</th>
                  <th scope="col">Datum</th>
                </tr>
              </thead>
              <tbody>
                {{#each item}}
                  <tr>
                    <td><a
                        href="{{href}}"
                        target="_blank"
                        rel="noopener"
                        title="{{title}}"
                      >{{{text}}}</a></td>
                    <td>{{medium}}</td>
                    <td>{{date}}</td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <div
            class="d-block d-md-none"
            aria-label="Table of media appearence results (mobile view)"
          >
            <table class="table table-striped table-light">
              <tbody>
                {{#each item}}
                  <tr>
                    <td>
                      <strong>Überschrift:</strong>
                      <a
                        href="{{href}}"
                        target="_blank"
                        rel="noopener"
                        title="{{title}}"
                      >{{{text}}}</a>
                      <br /><strong>Medium:</strong>
                      {{medium}}
                      <br /><strong>Datum:</strong>
                      {{date}}
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
        {{/with}}
        {{#with navigation}}
          <nav aria-label="Page navigation index">
            <ul class="pagination">
              <li class="page-item disabled">
                <a
                  class="page-link"
                  href="?page=0#mediaAppearanceList"
                  aria-label="Previous"
                >
                  <span aria-hidden="true">«</span>
                </a>
              </li>
              {{#each item}}
                <li class="page-item active"><a
                    class="page-link"
                    href="{{href}}"
                  >{{{text}}}</a></li>
              {{/each}}
              <li class="page-item">
                <a
                  class="page-link"
                  href="?page=2#mediaAppearanceList"
                  aria-label="Next"
                >
                  <span aria-hidden="true">»</span>
                </a>
              </li>
            </ul>
          </nav>
        {{/with}}
      </div>
    </div>
  </div>
</section>
 
{
  "navigation": {
    "item": [
      {
        "href": "?page=1#mediaAppearanceList",
        "active": true,
        "text": "1"
      },
      {
        "href": "?page=2#mediaAppearanceList",
        "active": true,
        "text": "2"
      },
      {
        "href": "?page=3#mediaAppearanceList",
        "active": true,
        "text": "3"
      },
      {
        "href": "?page=4#mediaAppearanceList",
        "active": true,
        "text": "4"
      }
    ]
  },
  "entries": {
    "item": [
      {
        "href": "https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf",
        "title": "Harter Wettbewerb um digitale Vorherrschaft",
        "text": "Harter Wettbewerb um digitale Vorherrschaft",
        "medium": "DVZ",
        "date": "12.05.2021"
      },
      {
        "href": "https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf",
        "title": "Harter Wettbewerb um digitale Vorherrschaft",
        "text": "Harter Wettbewerb um digitale Vorherrschaft",
        "medium": "DVZ",
        "date": "12.05.2021"
      },
      {
        "href": "https://www.timocom.de/STATIC/mediapool/content/mediaappearance/DVZ_2021_019_Leitartikel_Reimann_Liz.pdf",
        "title": "Harter Wettbewerb um digitale Vorherrschaft",
        "text": "Harter Wettbewerb um digitale Vorherrschaft",
        "medium": "DVZ",
        "date": "12.05.2021"
      }
    ]
  }
}

No notes defined.