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.

Mar 16, 2020 Marketing

Boost your conversion rate

Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo.

Michael Foster

Co-Founder / CTO

Mar 10, 2020 Sales

How to use SEO to drive sales

Optio cum necessitatibus dolor voluptatum provident commodi et.

Lindsay Walton

Front-end Developer

Feb 12, 2020 Business

Improve your customer experience

Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus.

Tom Cook

Director of Product

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",
      },
    },
  ]}
/>