diff --git a/src/docs/components/intro.stories.mdx b/src/docs/components/intro.stories.mdx index 13b6fa44..e057e8a3 100644 --- a/src/docs/components/intro.stories.mdx +++ b/src/docs/components/intro.stories.mdx @@ -6,3 +6,5 @@ import { parameters } from '$docs/utils/docsPage.js'; ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) # Components + +The components in this section can be used in any Svelte-based project. Check out the Guides section for more info on how to read the docs and use the components. diff --git a/src/docs/layout/article-well.jpg b/src/docs/layout/article-well.jpg new file mode 100644 index 00000000..250161eb Binary files /dev/null and b/src/docs/layout/article-well.jpg differ diff --git a/src/docs/layout/intro.stories.mdx b/src/docs/layout/intro.stories.mdx index db74f776..9edaa7a0 100644 --- a/src/docs/layout/intro.stories.mdx +++ b/src/docs/layout/intro.stories.mdx @@ -1,8 +1,31 @@ import { Meta } from '@storybook/addon-docs'; import { parameters } from '$docs/utils/docsPage.js'; +import WellImg from './article-well.jpg'; + ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) # Layout + +Layout components are special Svelte components that setup our default page layout. + +Generally, our page layout includes a central text well and a few block breakpoints that can be either wider or narrower. + +Here's how it works: + + + +The `Layout` component sets up the set dimensions of the well and the block breakpoints. The `Block` component is a wrapper for individual parts of a page. + +In many cases, you won't need to mess with `Layout`. + +More regularly, you'll use a `Block` to wrap a graphic or some other part of the page. (Most of our pre-fab components already use `Block` to set up the width options for your content.) + +The docs in this section explain how to use our basic layout components to build the basic structure of your page and also how to break out of our default layout if you need to do something different.