---
name: Panel
menu: Patterns
parent: Modules
route: /patterns/panel
---

# Panel

A Panel distinguishes and groups content on the page. It is used widely across Bulb products including FIT, Join, Bulb Account and the Marketing site.

This pattern is intended to be used nested inside of the [Page Container](/styles/layout).

## Full width Panel

Full width panel stretches across the width of the container. The contents should generally be constrained by a max-width of 38rem within the centered box.

```specimen-react
responsive: true
---
<Publication>
  <PageContainer width="standard">
    <Panel>
      <Vspace>
        <h1>'Straya</h1>

        <p>
          Dingos and galahs are very exciting animals. But did you know there is such a thing as a tree kangaroo?

          It's true, they are kangaroos that live in trees.
        </p>

        <figure>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Tree_kangaroo2.jpg/143px-Tree_kangaroo2.jpg" alt="Two Goodfellow's tree-kangaroos, (Dendrolagus goodfellowi)" />
          <figcaption>Two Goodfellow's tree-kangaroos, (Dendrolagus goodfellowi)</figcaption>
        </figure>

        <TextInput
          id="novalidationinput"
          label="Account number"
          status="unknown"
        />

        <TextInput
          id="novalidationinput"
          label="Account holder full name"
          status="unknown"
        />

        <CtaLink purpose="primary">
          Go for a Walkabout
        </CtaLink>
      </Vspace>
    </Panel>
  </PageContainer>
</Publication>
```

## Panel in Multi Column container

[Multi Panel Container](/styles/layout) typically include two or three panels.

```specimen-react
responsive: true
---
<Publication>
  <PageContainer width="multiple-col">
    <Panel>
      <Vspace>
        <h1>'Straya</h1>

        <p>
          Dingos and galahs are very exciting animals. But did you know there is such a thing as a tree kangaroo?

          It's true, they are kangaroos that live in trees.
        </p>

        <figure>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Tree_kangaroo2.jpg/143px-Tree_kangaroo2.jpg" alt="Two Goodfellow's tree-kangaroos, (Dendrolagus goodfellowi)" />
          <figcaption>Two Goodfellow's tree-kangaroos, (Dendrolagus goodfellowi)</figcaption>
        </figure>

        <TextInput
          id="novalidationinput"
          label="Account number"
          status="unknown"
        />

        <TextInput
          id="novalidationinput"
          label="Account holder full name"
          status="unknown"
        />

        <CtaLink purpose="primary">
          Go for a Walkabout
        </CtaLink>
      </Vspace>
    </Panel>
  </PageContainer>
</Publication>
```

```specimen-see-also
This pattern is intended to be used nested inside of the [PageContainer](/styles/layout) pattern.
```
