Blog sections

Three-column and single-column post card grids. Pass posts as a list of %{title, href, excerpt, date, date_label, category, author} maps.

Preview

From the blog

Learn how to grow your business with our expert advice.

React preview

LiveView (HEEx)

alias DesignSystem.UI.BlogSections

<BlogSections.blog_section
  variant="three-column"
  title="From the blog"
  posts={[
    %{
      title: "Boost your conversion rate",
      href: ~p"/blog/boost",
      excerpt: "Illo sint voluptas...",
      date: ~D[2020-03-16],
      date_label: "Mar 16, 2020",
      category: %{label: "Marketing", href: ~p"/blog?tag=marketing"},
      author: %{
        name: "Michael Foster",
        role: "Co-Founder / CTO",
        avatar_url: ~p"/images/team/michael.jpg"
      }
    }
  ]}
/>

React (JSX)

import { BlogSection } from "../ui/index.mjs"

<BlogSection
  variant="three-column"
  title="From the blog"
  posts={[
    {
      title: "Boost your conversion rate",
      href: "/blog/boost",
      excerpt: "Illo sint voluptas...",
      date: "2020-03-16",
      dateLabel: "Mar 16, 2020",
      category: { label: "Marketing", href: "/blog?tag=marketing" },
      author: {
        name: "Michael Foster",
        role: "Co-Founder / CTO",
        avatarUrl: "/images/team/michael.jpg",
      },
    },
  ]}
/>