Add Pages and Sections
Follow this easy three step process:
- Find the page template you want in src/page_templates
- Copy it into pages
- That page now exists at whatever the file name was "colors.js" would be found at {BASE}/colors!
Examples of every section are shown in src/page_templates/page.js and below so please refer to that if you'd like to dive right in!
The base architecture for a page should look like this:
<Layout title="Test Page"> // Put the title you want to show for the page
<SEO title="Test Page" keywords={[`styleguide`, `design`, `base`]} /> // Put SEO keywords if SEO is a concern
<Section title="Colors"> // Every section needs a title for itself and the contextual navigation
// Section content goes here.
// This is very specific to every type of section.
// If you're not comfortable with writing code, please copy paste the sections in page.js as you'll
// see an example of how to use each there.
// If you are comfortable with development, we've included prop types in every component so you can go
// to the source code and see what is configurable. You'll also see errors in your browser console
// should anything be used differently than intended
</Section>
<Section title="Mo-sections">
// Add more sections as needed!
</Section>
</Layout>Intended to wrap really any form of HTML. Lists, text, etc. It's the kitchen sink of components.
Display any static content.
