Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

Content tiles

This component is no longer in use. Use the content card component instead.

Normal

General

Major Roadworks and events

See all major roadworks and events. These could affect your journey, plan ahead.

HTML markup
<div class="wmnds-content-tile">
  <h2>Major Roadworks and events</h2>
  <div class="wmnds-content-tile__copy">
    <p>See all major roadworks and events. These could affect your journey, plan ahead.</p>
  </div>
</div>

General with one link

Major Roadworks and events

See all major roadworks and events. These could affect your journey, plan ahead.

Read more
HTML markup
<div class="wmnds-content-tile wmnds-content-tile--with-one-link">
  <h2>Major Roadworks and events</h2>
  <div class="wmnds-content-tile__copy">
    <p>See all major roadworks and events. These could affect your journey, plan ahead.</p>
    <a href="#" title="link title" target="_self" class="wmnds-link wmnds-float-right">
      Read more
    </a>
  </div>
</div>

Yellow modifier

Major Roadworks and events

See all major roadworks and events. These could affect your journey, plan ahead.

Read more
HTML markup
<div class="wmnds-content-tile wmnds-content-tile--yellow wmnds-content-tile--with-one-link">
  <h2>Major Roadworks and events</h2>
  <div class="wmnds-content-tile__copy">
    <p>See all major roadworks and events. These could affect your journey, plan ahead.</p>
    <a href="#" title="link title" target="_self" class="wmnds-link wmnds-float-right">
      Read more
    </a>
  </div>
</div>

Major Works

Major Roadworks and events

  • Location: Birmingham city centre
  • Lasts until: December 2019
Read more
HTML markup
<div class="wmnds-content-tile wmnds-content-tile--with-one-link">
  <h2>Major Roadworks and events</h2>
  <div class="wmnds-content-tile__copy">
    <ul class="wmnds-content-tile__list">
      <li><strong>Location:</strong> Birmingham city centre</li>
      <li><strong>Lasts until:</strong> December 2019</li>
    </ul>
    <a href="#" title="link title" target="_self" class="wmnds-link wmnds-float-right">
      Read more
    </a>
  </div>
</div>

Iframe (map)

Major Roadworks and events

Consider using City Road and Dudley Road, past City Hospital to head into Birmingham city centre or connect with the ring road.

HTML markup
<div class="wmnds-content-tile">
  <h2>Major Roadworks and events</h2>
  <div class="wmnds-content-tile__copy">
    <p>Consider using City Road and Dudley Road, past City Hospital to head into Birmingham city centre or connect with the ring road.</p>
    <iframe width="100%" height="500" src="https://www.arcgis.com/apps/View/index.html?appid=1b6f79c50c81421d92da2bd1ccee27e8" frameborder="0" scrolling="no"></iframe>
  </div>
</div>

Nav

Related content

HTML markup
<div class="wmnds-content-tile wmnds-content-tile--nav">
  <h3>Related content</h3>
  <ul class="wmnds-content-tile__list">
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for drivers
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for bus passengers
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for tram passengers
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for pedestrians
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Getting to venues and attractions
      </a>
    </li>
  </ul>
</div>

Nav with legend

Related content

Overview
HTML markup
<div class="wmnds-content-tile wmnds-content-tile--nav">
  <h3>Related content</h3>
  <span class="wmnds-content-tile__legend">
    Overview
  </span>
  <ul class="wmnds-content-tile__list">
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for drivers
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for bus passengers
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for tram passengers
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Information for pedestrians
      </a>
    </li>
    <li class="wmnds-content-tile__list-item">
      <a href="#" title="link title" target="_self" class="wmnds-link">
        Getting to venues and attractions
      </a>
    </li>
  </ul>
</div>

Content tile travel tips

When to use it?

  • Use it for travel tips only.
  • Keep your sentences short, max 40 words.
  • You can add and remove travel tips, but do notcreate more than 6 tips in order to make sure that content is accessible and easy to read.

Travel tips

You will still be able to get to where you need to go, but consider the following:

Plan ahead and leave more time for your journey: If you travel in the Five Ways area you’ll need more time for your journey to take account of the closure of Five Ways underpass and changes along Broad Street.
Use public transport wherever possible: This is to reduce congestion on key roads in and out of the city centre.
Travel off-peak: Roads will be quieter if you are able to travel off-peak. The busiest time to travel during weekdays is usually before 09:30 and after 15:30.
Consider car sharing: In recent months the number of people car-sharing along Hagley Road has increased by almost 10%. Have you considered joining them? Sharing your journey with friends, family or colleagues to reduce the amount of cars on the road.
Think about your options: There will be changes to bus stops and routes travelling in and out of Birmingham city centre and along Broad Street.
If you work, speak to your employer about whether there is any flexibility in your hours or if there are any times when you could avoid travelling altogether, such as working from home.
HTML markup
<div class="wmnds-content-tile">
  <h2 class="wmnds-content-tile__title">Travel tips</h2>
  <div class="wmnds-content-tile__copy">
    <p>You will still be able to get to where you need to go, but consider the following:</p>
  </div>
  <div class="wmnds-content-tile__block">
    <span>Plan ahead and leave more time for your journey:</span>
    If you travel in the Five Ways area you’ll need more time for your journey to take account of the closure of Five
    Ways underpass and changes along Broad Street.
  </div>
  <div class="wmnds-content-tile__block">
    <span>Use public transport wherever possible:</span> This is to reduce congestion on key roads in and out of the
    city centre.
  </div>
  <div class="wmnds-content-tile__block">
    <span>Travel off-peak:</span> Roads will be quieter if you are able to travel off-peak. The busiest time to travel
    during weekdays is usually before 09:30 and after 15:30.
  </div>
  <div class="wmnds-content-tile__block">
    <span>Consider car sharing:</span> In recent months the number of people car-sharing along Hagley Road has increased
    by almost 10%. Have you considered joining them? Sharing your journey with friends, family or colleagues to reduce
    the amount of cars on the road.
  </div>
  <div class="wmnds-content-tile__block">
    <span>Think about your options:</span> There will be
    <span class="wmnds-content-tile__underline"> changes to bus stops and routes</span> travelling in and out of
    Birmingham city centre and along Broad Street.
  </div>
  <div class="wmnds-content-tile__block">
    <span>If you work, speak to your employer</span> about whether there is any flexibility in your hours or if there
    are any times when you could avoid travelling altogether, such as working from home.
  </div>
</div>

Content tile travel updates

Travel updates

All routes through this disruption.

Roads


bus Hagley Road
Usual traffic

bus Ring Road
Usual traffic

Bus Routes

9
12
13
126
X10
10
12A
13A
X8
23
Save bus routes to your homepage by pressing the star icon
HTML markup
<div class="wmnds-content-tile wmnds-content-tile__container">
  <h2 class="wmnds-content-tile__title">Travel updates</h2>
  <div class="wmnds-content-tile__copy">
    <p>All routes through this disruption.</p>
  </div>
  <h3>Roads</h3>
  <div class="wmnds-content-tile__container-wrapper">
    <div class="wmnds-disruption-indicator-large">
      <div class="wmnds-disruption-indicator-large__left-wrapper">
        <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
          <svg class="wmnds-disruption-indicator-large__icon">
            <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
          </svg>
          <br>bus
        </span>
        <span class="wmnds-disruption-indicator-large__text">
          <strong>Hagley Road</strong><br>
          Usual traffic
        </span>
      </div>
      <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
        <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
      </svg>
    </div>
  </div>
  <div class="wmnds-content-tile__container-wrapper">
    <div class="wmnds-disruption-indicator-large wmnds-disruption-indicator-large--warning">
      <div class="wmnds-disruption-indicator-large__left-wrapper">
        <span class="wmnds-disruption-indicator-large__left-icon-wrapper">
          <svg class="wmnds-disruption-indicator-large__icon">
            <use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
          </svg>
          <br>bus
        </span>
        <span class="wmnds-disruption-indicator-large__text">
          <strong>Ring Road</strong><br>
          Usual traffic
        </span>
      </div>
      <svg class="wmnds-disruption-indicator-large__icon wmnds-disruption-indicator-large__icon--right">
        <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
      </svg>
    </div>
  </div>
  <h3>Bus Routes</h3>
  <div class="wmnds-col-1-3 wmnds-col-md-auto">
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">9</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">12</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">13</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">126</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--severe wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">X10</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
  </div>
  <div class="wmnds-col-1-3 wmnds-col-md-auto">
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">10</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">12A</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">13A</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">X8</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
    <div class="wmnds-content-tile__container-bus">
      <div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--severe wmnds-disruption-indicator-medium--narrow-travel-updates wmnds-disruption-indicator-medium--narrow-travel-updates-bus">
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
          <use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
        </svg>
        <span class="wmnds-disruption-indicator-medium__service">23</span>
        <svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
          <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
        </svg>
      </div>
      <svg class="wmnds-content-tile__container-star">
        <use xlink:href="/img/wmnds-icons.min.svg#wmnds-general-star-empty" href="/img/wmnds-icons.min.svg#wmnds-general-star-empty"></use>
      </svg>
    </div>
  </div>
  <div class="wmnds-msg-help">
    <button class="wmnds-msg-help__close-btn" aria-label="Close help message">
      <svg class="wmnds-msg-help__close-icon">
        <use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
      </svg>
    </button>
    Save bus routes to your homepage by pressing the star icon
  </div>
</div>

Content tile advice to keep moving

Advice to keep moving

I drive I use the bus I use the train I use the tram I walk or cycle I want to visit an attraction or venue
HTML markup
<div class="wmnds-content-tile">
  <h2 class="wmnds-content-tile__title">Advice to keep moving</h2>
  <div class="wmnds-content-tile__buttons">
    <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-tile__button wmnds-btn--primary">
      I drive
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
      </svg>
    </a>
    <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-tile__button wmnds-btn--primary">
      I use the bus
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
      </svg>
    </a>
    <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-tile__button wmnds-btn--primary">
      I use the train
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
      </svg>
    </a>
    <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-tile__button wmnds-btn--primary">
      I use the tram
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
      </svg>
    </a>
    <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-tile__button wmnds-btn--primary">
      I walk or cycle
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
      </svg>
    </a>
    <a href="#" title="link title" target="_self" class="wmnds-btn wmnds-content-tile__button wmnds-btn--primary">
      I want to visit an attraction or venue
      <svg class="wmnds-btn__icon wmnds-btn__icon--right">
        <use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
      </svg>
    </a>
  </div>
</div>