How to use the idyll-components.Aside function in idyll-components

To help you get started, we’ve selected a few idyll-components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github idyll-lang / idyll / packages / idyll-docs / idyll-components / contents.js View on Github external
import * as COMPONENTS from 'idyll-components';

const components = [
  {
    Layout: {
      description:
        'These components help manage page layout, for example putting text in the `Aside` component will render it in the article margin instead of inline with the rest of your text.',
      components: [
        {
          Aside: {
            description:
              'Content inside of an aside component will be displayed in the margin of your document. For example, the [consumer complaints](https://mathisonian.github.io/consumer-complaints/) article uses the `Aside` component to display a small chart and caption:',
            image: 'aside.png',
            thumbnail: 'aside.png',
            component: COMPONENTS.Aside,
            liveExample: false
          }
        },
        {
          FullWidth: {
            description:
              "A `FullWidth` component will break out of the text container and expand to fill the full width of the reader's browser.",
            image: 'feature.png',
            thumbnail: 'feature.png',
            liveExample: false
          }
        },
        {
          Fixed: {
            description:
              'Content inside of a `fixed` component will be locked in place, even when the rest of the document scrolls. The [scroll](https://idyll-lang.github.io/idyll/scroll) example uses the `fixed` component to keep the dynamic chart in place:',