Two panel layout

Pain point

The solution was developed as part of the education annotation tool. The users neededto complete a long list of tasks and needed quick access to a large amount of contextual information to do this accurately.

Having everything in one long linear flow or separate pages created a confusing workflow.

Solution

The solution went for here was to split the task view into 2 pane layout with context available in tabs on the left and the task required to be filled out on the right:

Implementation

This can be achieved using the GOV.UK grid system, splitting a row into two govuk-grid-column-one-half columns for the context and task panels:

Contents

Context 1

Context 2

Action content

Show code

<div class="govuk-main-wrapper">
    <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-half">
            <div class="govuk-tabs" data-module="govuk-tabs">
                <h2 class="govuk-tabs__title">
                    Contents
                </h2>
                <ul class="govuk-tabs__list">
                    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
                        <a class="govuk-tabs__tab" href="#context-1">
                            Context 1
                        </a>
                    </li>
                    <li class="govuk-tabs__list-item">
                        <a class="govuk-tabs__tab" href="#context-2">
                            Context 2
                        </a>
                    </li>
                </ul>
                <div class="govuk-tabs__panel" id="context-1">
                    <p class="govuk-body">Context 1</p>
                </div>
                <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="context-2">
                    <p class="govuk-body">Context 2</p>
                </div>
            </div>
        </div>
        <div class="govuk-grid-column-one-half">
            <p class="govuk-body">Action content</p>
            <button class="govuk-button">Click here</button>
        </div>
    </div>
</div>

---
import {
  Tabs,
  TabsTitle,
  TabsList,
  Tab,
  TabPanel,
  Button,
} from "@i-dot-ai-npm/component-library-astro";
---

<div class="govuk-main-wrapper">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-half">
      <Tabs>
        <TabsTitle>Contents</TabsTitle>
        <TabsList>
          <Tab href="#context-1" selected>Context 1</Tab>
          <Tab href="#context-2">Context 2</Tab>
        </TabsList>
        <TabPanel id="context-1">
          <p class="govuk-body">Context 1</p>
        </TabPanel>
        <TabPanel id="context-2" hidden>
          <p class="govuk-body">Context 2</p>
        </TabPanel>
      </Tabs>
    </div>
    <div class="govuk-grid-column-one-half">
      <p class="govuk-body">Action content</p>
      <Button>Click here</Button>
    </div>
  </div>
</div>

import {
  Tabs,
  TabsTitle,
  TabsList,
  Tab,
  TabPanel,
  Button,
} from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <div className="govuk-main-wrapper">
      <div className="govuk-grid-row">
        <div className="govuk-grid-column-one-half">
          <Tabs>
            <TabsTitle>Contents</TabsTitle>
            <TabsList>
              <Tab href="#context-1" selected>Context 1</Tab>
              <Tab href="#context-2">Context 2</Tab>
            </TabsList>
            <TabPanel id="context-1">
              <p className="govuk-body">Context 1</p>
            </TabPanel>
            <TabPanel id="context-2" hidden>
              <p className="govuk-body">Context 2</p>
            </TabPanel>
          </Tabs>
        </div>
        <div className="govuk-grid-column-one-half">
          <p className="govuk-body">Action content</p>
          <Button>Click here</Button>
        </div>
      </div>
    </div>
  );
}

<script>
  import {
    Tabs,
    TabsTitle,
    TabsList,
    Tab,
    TabPanel,
    Button,
  } from "@i-dot-ai-npm/component-library-svelte";
</script>

<div class="govuk-main-wrapper">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-one-half">
      <Tabs>
        <TabsTitle>Contents</TabsTitle>
        <TabsList>
          <Tab href="#context-1" selected>Context 1</Tab>
          <Tab href="#context-2">Context 2</Tab>
        </TabsList>
        <TabPanel id="context-1">
          <p class="govuk-body">Context 1</p>
        </TabPanel>
        <TabPanel id="context-2" hidden>
          <p class="govuk-body">Context 2</p>
        </TabPanel>
      </Tabs>
    </div>
    <div class="govuk-grid-column-one-half">
      <p class="govuk-body">Action content</p>
      <Button>Click here</Button>
    </div>
  </div>
</div>

import {
  Tabs,
  TabsTitle,
  TabsList,
  Tab,
  TabPanel,
  Button,
} from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <div class="govuk-main-wrapper">
      <div class="govuk-grid-row">
        <div class="govuk-grid-column-one-half">
          <Tabs>
            <TabsTitle>Contents</TabsTitle>
            <TabsList>
              <Tab href="#context-1" selected>Context 1</Tab>
              <Tab href="#context-2">Context 2</Tab>
            </TabsList>
            <TabPanel id="context-1">
              <p class="govuk-body">Context 1</p>
            </TabPanel>
            <TabPanel id="context-2" hidden>
              <p class="govuk-body">Context 2</p>
            </TabPanel>
          </Tabs>
        </div>
        <div class="govuk-grid-column-one-half">
          <p class="govuk-body">Action content</p>
          <Button>Click here</Button>
        </div>
      </div>
    </div>
  );
}