---
name: Publication
menu: Patterns
parent: Modules
route: /patterns/publication
---

# Publication

Adds spacing between supported elements.

---

```specimen-react
<Publication>
  <Heading1>Heading 1</Heading1>

  <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Paragraph>

  <Heading2>Heading 2</Heading2>

  <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Paragraph>

  <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Paragraph>

  <Heading3>Heading 3</Heading3>

  <Paragraph>Lorem ipsum dolor <Strong>sit amet</Strong>, consectetur adipiscing elit, sed do eiusmod <Emphasis>tempor incididunt ut labore</Emphasis> et dolore magna aliqua.</Paragraph>

  <Heading4>Heading 4</Heading4>

  <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Paragraph>

  <Figure
    sources={[
      {
        media: '(min-width: 1150px)',
        srcSet:
          'https://storage.googleapis.com/static.bulb.co.uk/design/images/service.jpg',
        type: 'image/webp',
        width: 1029,
        height: 683
      },
      {
        media: '(min-width: 0px)',
        srcSet:
          'https://storage.googleapis.com/static.bulb.co.uk/design/images/service.jpg',
        type: 'image/webp',
        width: 1500,
        height: 800
      },
    ]}
    src="https://storage.googleapis.com/static.bulb.co.uk/design/images/service.jpg"
    alt="Some alt text"
    title="A title for the image"
    caption={(<Paragraph>A caption for the image</Paragraph>)}
  />

  <Heading5>Heading 5</Heading5>

  <Paragraph>Lorem ipsum <Link href="/">dolor sit amet</Link>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Paragraph>

  <Block
    width={560}
    height={315}
    caption="Lorem ipsum dolor"
  >
    <iframe src="https://www.youtube.com/embed/ieDYYzsIsPk" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
  </Block>

  <OrderedList>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </OrderedList>

  <Video
    sources={[
      {
        src: 'https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm',
        type: 'video/webm',
      },
      {
        src: 'https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4',
        type: 'video/mp4',
      },
    ]}
    width={640}
    height={360}
    caption="Lorem ipsum dolor"
  />

  <Blockquote quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet" citation="Bulb Energy Ltd." />

  <UnorderedList>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </UnorderedList>
</Publication>
```

## Figure

Figure can be used to show an image with an optional caption.

```specimen-react
<Figure
  sources={[
    {
      media: '(min-width: 1150px)',
      srcSet:
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/service.jpg',
      type: 'image/webp',
      width: 1029,
      height: 683
    },
    {
      media: '(min-width: 0px)',
      srcSet:
        'https://storage.googleapis.com/static.bulb.co.uk/design/images/service.jpg',
      type: 'image/webp',
      width: 1500,
      height: 800
    },
  ]}
  src="https://i.imgur.com/X9ct19r.jpg"
  alt="Some alt text"
  title="A title for the image"
  caption="A caption for the image"
/>
```

## Video

Video can be used to show a video with an optional caption.

```specimen-react
<Video
    sources={[
      {
        src: 'https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm',
        type: 'video/webm',
      },
      {
        src: 'https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4',
        type: 'video/mp4',
      },
    ]}
    width={640}
    height={360}
    caption="Lorem ipsum dolor"
  />
```

## Block

Block represents a generic container for content with an optional caption.

```specimen-react
<Block
    width={560}
    height={315}
    caption="Lorem ipsum dolor"
  >
    <iframe src="https://www.youtube.com/embed/ieDYYzsIsPk" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
  </Block>
```

## Blockquote

Blockquote represents content that is quoted from another source, optionally with a citation.

```specimen-react
<Blockquote
  quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
  citation="Bulb Energy"
/>
```

### Variants

#### Without citation

```specimen-react
<Blockquote
  quote="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
/>
```
