<div id="blog-cards" style="display:flex;flex-wrap:wrap;"></div>
<script>
fetch("/rest/scriptrunner/latest/custom/blogcards?spaceKey=ASD&limit=6")
  .then(res => res.json())
  .then(data => {
    const container = document.getElementById("blog-cards");
    data.forEach(blog => {
      container.innerHTML += `
        <div style="width: 30%; margin: 1%; box-shadow: 0px 5px 10px rgba(0,0,0,0.3);">
          <img src="${blog.image}" style="width: 100%; height: 200px; object-fit: cover;">
          <div style="padding: 15px;">
            <div style="font-size: 0.9rem; color: gray;">${blog.date}</div>
            <h3 style="margin: 10px 0;"><a href="${blog.link}" style="text-decoration: none; color: black;">${blog.title}</a></h3>
            <p style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">${blog.excerpt}</p>
          </div>
        </div>
      `;
    });
  });
</script>