page layout components for documents and tools
Reusable react components for common layouts, such as those used in our articles, tools, blog posts, and maps. All the components here either wrap the base Layout from @carbonplan/components directly, or are linked in their design constraints to one of the layouts in this package that do so. Similar to those in the @carbonplan/components package, these components assume and make extensive use of theme-ui and next, and are meant to be composed with our theme. These components also work particularly well with MDX, which we use for authoring lots of our content.
To use, install the package with
npm i @carbonplan/layouts
and then import the component(s) you want into your next project.
The easiest way to understand these components is to see them in use across our sites.
- Visit carbonplan.org/research or github.com/carbonplan/research to see the use of
ArticleandTool. - Visit carbonplan.org/blog or github.com/carbonplan/blog to see the use of
Post. - Visit carbonplan.org/design or github.com/carbonplan/design to see the use of
NavSectionandNavMenu.
Most of these components are wrappers for the Layout component that we generally use as the top-level component for our pages. As such, they are also intended to act as top-level page components. In particular, Article Supplement Post Tool and NavSection all play this role.
The remaining components are either elements of those layouts that might sometimes be useful on their own, llike NavMenu, or components that se only in the context of these layouts and are linked via specifid design constraints, like the use of Cite and PullQuote within an Article.
Here are all the components currently available, grouped by where we tend to use them (some components appear in multiple groups):
Article
Supplement
Endnote
Cite
PullQuote
Sidenote
Tool
Post
NavSection
NavMenu
Sidebar
SidebarAttachment
SidebarFooter
SidebarDivider
All the code in this repository is MIT-licensed, but we request that you please provide attribution if reusing any of our digital content (graphics, logo, articles, etc.).
CarbonPlan is a nonprofit organization that uses data and science for climate action. We aim to improve the transparency and scientific integrity of climate solutions with open data and tools. Find out more at carbonplan.org or get in touch by opening an issue or sending us an email.