Svelte Blog Sections - Flowbite Svelte Blocks

Get started with a collection of website sections related to the blog area of your website including blog posts, article pages, comments, categories, and more.

Default blog card #

Use this example to show a preview of a blog post including the title, description, category, author, publication date, and CTA link.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6"><section class="relative py-6 sm:py-10"><div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6"><div class="mx-auto max-w-screen-sm text-center lg:mb-16 mb-8"><h2 class="mb-4 text-3xl lg:text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Our Blog</h2> <p class="font-light text-gray-500 sm:text-xl dark:text-gray-400" data-svelte-h="svelte-1ywgcx2">We use an agile approach to test assumptions and connect with the needs of your audience early and often.</p> </div>  <div class="grid gap-8 lg:grid-cols-2"><article class="p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"><div class="flex justify-between items-center mb-5 text-gray-500"><span class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-3 h-3 mr-1" role="img" aria-label="video camera solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M14 7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7Zm2 9.387 4.684 1.562A1 1 0 0 0 22 17V7a1 1 0 0 0-1.316-.949L16 7.613v8.774Z" clip-rule="evenodd"></path></svg> 
Tutorial</span> <span class="text-sm" data-svelte-h="svelte-qlls00">14 days ago</span></div>  <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"><a href="/" data-svelte-h="svelte-d4ppj">How to quickly deploy a static website</a></h2> <p class="mb-5 font-light text-gray-500 dark:text-gray-400" data-svelte-h="svelte-m3wslp">Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.</p>   <div class="flex justify-between items-center"><div class="flex items-center space-x-4"><img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="Jese Leos avatar"> <span class="font-medium dark:text-white" data-svelte-h="svelte-bapn05">Jese Leos</span> </div> <a href="/" class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline">Read more
<svg xmlns="http://www.w3.org/2000/svg" fill="none" color="currentColor" class="shrink-0 w-4 h-4 ml-2" role="img" aria-label="arrow right outline" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"></path></svg> </a></div> </article>  <article class="p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"><div class="flex justify-between items-center mb-5 text-gray-500"><span class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-3 h-3 mr-1" role="img" aria-label="newspaper solid" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11.5c.07 0 .14-.007.207-.021.095.014.193.021.293.021h2a2 2 0 0 0 2-2V7a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2v11h-2V5a2 2 0 0 0-2-2H5Zm7 4a1 1 0 0 1 1-1h.5a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1Zm0 3a1 1 0 0 1 1-1h.5a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1Zm-6 4a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm0 3a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1ZM7 6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H7Zm1 3V8h1v1H8Z" clip-rule="evenodd"></path></svg> 
Article</span> <span class="text-sm" data-svelte-h="svelte-qlls00">14 days ago</span></div>  <h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"><a href="/" data-svelte-h="svelte-y26d5n">Our first project with React</a></h2> <p class="mb-5 font-light text-gray-500 dark:text-gray-400" data-svelte-h="svelte-m3wslp">Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.</p>   <div class="flex justify-between items-center"><div class="flex items-center space-x-4"><img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Bonnie Green avatar"> <span class="font-medium dark:text-white" data-svelte-h="svelte-1uq1lix">Bonnie Green</span> </div> <a href="/" class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline">Read more
<svg xmlns="http://www.w3.org/2000/svg" fill="none" color="currentColor" class="shrink-0 w-4 h-4 ml-2" role="img" aria-label="arrow right outline" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"></path></svg> </a></div> </article> </div> </div></section> </div>
Svelte
<script>
  import { Section, ArticleAuthor, ArticleBody, ArticleHead, ArticleWrapper, BlogHead, BlogBodyWrapper } from 'flowbite-svelte-blocks';
  import { VideoCameraSolid, ArrowRightOutline, NewspaperSolid } from 'flowbite-svelte-icons';
</script>

<Section name="blog">
  <BlogHead>
    <svelte:fragment slot="h2">Our Blog</svelte:fragment>
    <svelte:fragment slot="paragraph">
      <p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">We use an agile approach to test assumptions and connect with the needs of your audience early and often.</p>
    </svelte:fragment>
  </BlogHead>
  <BlogBodyWrapper>
    <ArticleWrapper>
      <ArticleHead>
        <span class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800">
          <VideoCameraSolid size="xs" class="mr-1" />
          Tutorial
        </span>
        <span class="text-sm">14 days ago</span>
      </ArticleHead>
      <ArticleBody>
        <svelte:fragment slot="h2"><a href="/">How to quickly deploy a static website</a></svelte:fragment>
        <svelte:fragment slot="paragraph">
          <p class="mb-5 font-light text-gray-500 dark:text-gray-400">Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.</p>
        </svelte:fragment>
      </ArticleBody>
      <ArticleAuthor>
        <svelte:fragment slot="author">
          <img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="Jese Leos avatar" />
          <span class="font-medium dark:text-white"> Jese Leos </span>
        </svelte:fragment>
        <a href="/" class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline">
          Read more
          <ArrowRightOutline size="sm" class="ml-2" />
        </a>
      </ArticleAuthor>
    </ArticleWrapper>

    <ArticleWrapper>
      <ArticleHead>
        <span class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800">
          <NewspaperSolid size="xs" class="mr-1" />
          Article
        </span>
        <span class="text-sm">14 days ago</span>
      </ArticleHead>
      <ArticleBody>
        <svelte:fragment slot="h2"><a href="/">Our first project with React</a></svelte:fragment>
        <svelte:fragment slot="paragraph">
          <p class="mb-5 font-light text-gray-500 dark:text-gray-400">Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers influence both web designers and developers.</p>
        </svelte:fragment>
      </ArticleBody>
      <ArticleAuthor>
        <svelte:fragment slot="author">
          <img class="w-7 h-7 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="Bonnie Green avatar" />
          <span class="font-medium dark:text-white"> Bonnie Green </span>
        </svelte:fragment>
        <a href="/" class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline">
          Read more
          <ArrowRightOutline size="sm" class="ml-2" />
        </a>
      </ArticleAuthor>
    </ArticleWrapper>
  </BlogBodyWrapper>
</Section>

Component data

Banners

Contact Forms