Designsystem

Post archive 

<section class="posts-archive">
    <div class="inline-grid cols-3">
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
        <div class="cardPost card--small card--stretchable">
            <div class="card-header">
                <img src="https://placeimg.com/640/480/tech" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                <span class="card-label">Les aides</span>
            </div>
            <div class="card-content">
                <time class="card-date">20/03/2020</time>
                <h4 class="h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
                <p>Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.</p>
            </div>
        </div>
    </div>
    <nav class="pagination" aria-label="Pagination">
        <a class="pagination-link pagination-link--direction" href="#">précédent</a>
        <ul>
            <li><a class="pagination-link is-active" aria-current="page" href="#">1</a></li>
            <li><a class="pagination-link" href="#">2</a></li>
            <li><a class="pagination-link" href="#">3</a></li>
            <li><a class="pagination-link" href="#">4</a></li>
        </ul>
        <a class="pagination-link pagination-link--direction" href="#">suivant</a>
    </nav>
</section>
 
<section class="posts-archive">
    <div class="inline-grid cols-3">
        {{#each cards}}
        {{> @card-post--small-stretchable }}
        {{/each}}
    </div>
    {{> @nav-pagination }}
</section>
 
{
  "cards": [
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    },
    {
      "card": {
        "title_post": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "label": "Les aides",
        "date": "20/03/2020",
        "image": "https://placeimg.com/640/480/tech",
        "text": "Suspendisse potenti. Curabitur ultrices dui ut ex scelerisque, ut condimentum risus varius. In auctor, erat eu iaculis interdum, dui nunc sollicitudin enim, at lobortis quam elit vel justo.",
        "class": ""
      }
    }
  ]
}

There are no notes for this item.