1. Component Guide
  2. Step by step navigation
  3. Small
Step by step navigation example

Small

Designed to fit in the sidebar of a page. Note that the small version of the component should not become smaller on mobile, and the large version on mobile should be the same size as the small version. This example is a copy of the one above for comparison.

How it looks (preview)

  1. Step 1 Get the TV ready (small)

    Configure the television so it is ready for the standup. You will also need a laptop.

    1. Remove the Chromebit from HDMI 1 on the TV
  2. and Plug everything in (small)

  3. Step 2 Configure the catchbox (small)

  4. Step 3 Join and configure the standup (small)

  5. Step 4 Clear up (small)

    Disconnect from the hangout and disconnect any cables.

    Most importantly, remember to switch off the catchbox to save the battery.

  6. or Get someone else to clear up (small)

    Schedule another meeting for right after the standup and force someone else to sort everything out.

How to call this example

<%= render "govuk_publishing_components/components/step_by_step_nav", {
  small: true,
  remember_last_step: true,
  step_nav_url: "/learn-to-setup-standup",
  highlight_step: 3,
  steps: [
    {
      title: "Get the TV ready (small)",
      contents: [
        {
          type: "paragraph",
          text: "Configure the television so it is ready for the standup. You will also need a laptop."
        },
        {
          type: "list",
          contents: [
            {
              href: "https://en.wikipedia.org/wiki/HDMI",
              text: "Remove the Chromebit from HDMI 1 on the TV"
            }
          ]
        }
      ]
    },
    {
      title: "Plug everything in (small)",
      logic: "and",
      contents: [
        {
          type: "paragraph",
          text: "Connect the relevant cables between the various devices."
        },
        {
          type: "list",
          contents: [
            {
              href: "https://www.google.co.uk/",
              text: "Run the HDMI - MINI DVI cable from the TV to the facilitators laptop"
            },
            {
              href: "https://www.jabra.co.uk/",
              text: "Plug the Jabra into the facilitators laptop"
            }
          ]
        }
      ]
    },
    {
      title: "Configure the catchbox (small)",
      contents: [
        {
          type: "paragraph",
          text: "These steps are required."
        },
        {
          type: "list",
          contents: [
            {
              href: "http://www.google.com",
              text: "Ensure the catchbox transmitter is plugged in at the mains wall"
            },
            {
              href: "http://www.google.com",
              text: "Turn on the transmitter and wait for the switch to blink green"
            },
            {
              href: "http://www.google.com",
              text: "Plug the transmitter USB cable into the facilitators laptop",
              active: true
            },
            {
              href: "http://www.google.com",
              text: "Twist and pull the black piece of foam out of the catchbox"
            },
            {
              href: "http://www.google.com",
              text: "Turn on the catchbox and wait for the LED to turn green"
            },
            {
              href: "http://www.google.com",
              text: "Wait for the transmitter light to turn solid green"
            }
          ]
        },
        {
          type: "substep",
          optional: true,
          contents: [
            {
              type: "heading",
              text: "Optional steps"
            },
            {
              type: "paragraph",
              text: "These steps are not required."
            },
            {
              type: "list",
              style: "choice",
              contents: [
                {
                  href: "https://www.google.co.uk/",
                  text: "Get annoyed when it doesn't work"
                },
                {
                  href: "http://www.google.com",
                  text: "Try to find someone else who knows how to do it",
                  context: "1 to 10 minutes"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      title: "Join and configure the standup (small)",
      show_help_link: true,
      contents: [
        {
          type: "paragraph",
          text: "Join the hangout and present to those on it."
        },
        {
          type: "list",
          contents: [
            {
              href: "http://www.google.com",
              text: "Connect to standup hangout via the calendar invite"
            },
            {
              text: "or"
            },
            {
              href: "http://www.google.com",
              text: "Connect to standup hangout via the link in the team slack"
            }
          ]
        },
        {
          type: "paragraph",
          text: "then"
        },
        {
          type: "list",
          contents: [
            {
              href: "http://www.google.com",
              text: "Click the three dots in the bottom hand corner to open settings"
            },
            {
              href: "http://www.google.com",
              text: "Set speaker to \"Jabra\""
            },
            {
              href: "http://www.google.com",
              text: "Set microphone to \"C Media USB\""
            },
            {
              href: "http://www.google.com",
              text: "Click \"present to meeting\""
            }
          ]
        }
      ]
    },
    {
      title: "Clear up (small)",
      contents: [
        {
          type: "paragraph",
          text: "Disconnect from the hangout and disconnect any cables."
        },
        {
          type: "paragraph",
          text: "Most importantly, remember to switch off the catchbox to save the battery."
        }
      ]
    },
    {
      title: "Get someone else to clear up (small)",
      logic: "or",
      optional: true,
      contents: [
        {
          type: "paragraph",
          text: "Schedule another meeting for right after the standup and force someone else to sort everything out."
        }
      ]
    }
  ]
} %>