Form modules


Content

  1. Related content
  2. Header
  3. Page footer
  4. Content blocks
  5. Featured panel
 

1. Related content

For displaying and linking to related information.



Code
<p> <div class="xrm-editable-html&#32;xrm-attribute" data-languageContext="English">
<div class="xrm-attribute-value">
<aside class="col-md-4 more-info">
<div class="text">
<h4 class="title">More on ionising radiation</h4><ul>
<li> <a target="_blank" href="http://www.hse.gov.uk/radiation/ionising/index.htm">About ionising radiation</a> </li>
<li> <a target="_blank" href="http://www.hse.gov.uk/pubns/books/l121.htm">Work with ionising radiation: Approved Code of Practice and guidance </a> </li>
<li> <a target="_blank" href="http://www.hse.gov.uk/radiation/rpnews/rpa.htm">Radiation protection advisers (RPAs)</a> </li>
</ul> </div><!-- text --> </aside> </div> </div> </p>

When to use it

Use this when you need to signpost users to additional content.



2. Header

Use this as the header for your form.


Code

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="visible-xs-block">
<div class="xrm-attribute-value">
<div><a class="navbar-brand" href="~/" tabindex="-1"><span style="color:#FFFFFF;">Health and Safety Executive</span></a></div>
</div> </div> <div class="visible-sm-block visible-md-block visible-lg-block navbar-brand">
<div class="xrm-attribute-value">
<div class="xrm-editable-html xrm-attribute" data-languagecontext="English">
<div class="xrm-attribute-value">
<p class="logo">&nbsp;</p>
</div> </div> </div> </div> <div class="navbar-brand">
<div class="xrm-attribute-value">
<a target="_blank" href="http://hse.gov.uk"></a><p class="logo">
<img onerror="this.src='/img/hse.png';this.onerror=null;" alt="Health and Safety Executive." src="content/img/HealthSmall.png">Digital Services - Design guide </p>
</div> </div> </div> </div> </div>

When to use this

You will need this as part of your web page.

How to use this

Ensure that the header says ‘Digital Services’.




3. Page footer

Use this as the footer for your web page.

Contact us

Find us on


Code
<!--FOOTER example start-->
<div class="footer-bottom hidden-print">
<div class="container">
<div class="row">
<div class="col-xs-1 col-sm-6">
</div> <div class="col-xs-11 col-sm-6 text-right">
<p>
<a href="/contact-us-general/">Contact us</a></p>
<dl>
<dt>Find us on</dt>
<dd>
<a target="_blank" href="https://www.linkedin.com/company/health-and-safety-executive?trk=biz-companies-cym"><i class="fa fa-linkedin" aria-hidden="true"></i></a></dd>
<dd><a target="_blank" href="https://twitter.com/H_S_E"><i class="fa fa-twitter" aria-hidden="true"></i></a></dd>
<dd><a target="_blank" href="https://www.facebook.com/hsegovuk/"><i class="fa fa-facebook" aria-hidden="true"></i></a></dd>
</dl>
</div>
</div>
</div>
</div>
<!--FOOTER example END-->



4. Content Blocks

Use this to display body copy on your page. 

1. Who must apply

Overview

From 1 January 2018, under the Ionising Radiation Regulations 2017, employers must apply to the Health and Safety Executive (HSE) for certain work they do with ionising radiation.

This is known as the ‘graded approach’ as what you apply for depends on the size and likelihood of exposure.

Depending on the level of risk of the ionising radiation work you do you may need to apply to:

  • notify
  • register
  • get consent

The application can be submitted by an authorised employee. It can’t be submitted by a third party but they can advise you on your application.



Code

<div class="xrm-editable-html&#32;xrm-attribute" data-languageContext="English">
<div class="xrm-attribute-value">
<div class="col-md-8 text-block">
<h3>1. Who must apply</h3>
<h4>Overview</h4>
<p>From 1 January 2018, under the <a target="_blank" href="http://www.legislation.gov.uk/uksi/2017/1075/contents/made">Ionising Radiation Regulations 2017</a>, employers must apply to the Health and Safety Executive (HSE) for certain work they do with ionising radiation.</p>
<p>This is known as the ‘graded approach’ as what you apply for depends on the size and likelihood of exposure.</p>
<p>Depending on the level of risk of the ionising radiation work you do you may need to apply to:</p>
<ul><li>notify</li><li>register</li><li>get consent</li></ul>
<p>The application can be submitted by an authorised employee. It can’t be submitted by a third party but they can advise you on your application.</p>
</div>
</div>
</div>

 

When to use this

This should always be used for any body copy on the page.  Text should never go full-width on a page because it makes it harder to read. Line length should be approximately XX characters.





5. Featured panel

This is a block that lets you display a number of different services or options.

New application

Apply to notify, register or request consent for work with ionising radiation.

Apply now

Resume application

Continue an existing application.

Resume



Code

<div class="row services-list mobile-concertina">
<div class="col-md-3 service">
<h2 class="title" style="height: 75px;">New application</h2>
<div class="text">
<dl class="what">
<dd style="height: 200px;">Apply to notify, register or request consent for work with ionising radiation.</dd>
</dl>
<p class="apply"><a class="btn btn-primary btn-apply" href="/bssd/bssd-select-action/bssd-getting-started/">Apply now</a></p>
</div>
</div>
<div class="col-md-3 service">
<h2 class="title" style="height: 75px;">Resume application</h2>
<div class="text">
<dl class="what">
<dd style="height: 200px;">Continue an existing application.</dd>
</dl>
<p class="apply"><a class="btn btn-primary btn-apply" href="">Resume</a></p>
</div>
</div>
</div>

 

When to use this

Use this when you have a single screen that offers the user many different action points.

How to use this

The heading should summarise what this relates to

The copy can give more explicit information.

The button should have an explicit call to action that is specific to that action/content being linked to.





Find us on