Blocks are designed to organise content into distinct sections, making it easier for users to navigate and focus on specific information.
Block components make it easy to organise and display content in distinct sections, allowing users to focus on specific information without feeling overwhelmed. These components can be customised to suit the layout, providing clear separation between different content areas for better readability and navigation.
When to use this component
Block components are great for organising content into clear sections, helping users easily navigate and absorb information. They're perfect for displaying larger chunks of content, like text, images, or forms, in a way that feels structured and manageable. By breaking up the page into smaller parts, they make everything easier to read and help users focus on what matters most without feeling overwhelmed.
Examples in GOSS products
- My Account template for each section of the account settings
- Self Service template to show the assigned, claimable and completed cases in different sections
- Cookie banner for the Cookie Policy template
- Find My Nearest template to highlight the search sections
Accessibility considerations
The block component should be clearly structured with appropriate ARIA roles to ensure screen readers can identify and navigate its content effectively.
Additionally, ensure that each section of the block has sufficient contrast and that the content is logically arranged for easy navigation by keyboard users and those relying on assistive technologies.
Basic block
A block component with no additional configuration options provides a simple way to organise content into distinct sections.
By default, the block displays content such as text or images, clearly separated from other sections, making it easy for users to focus on specific information
The element can be changed to be a heading element e.g. H2/H3 based on your structural needs.
Block heading
<div class="block">
<h3 class="block__heading">
Block heading
</h3>
<div class="block__summary">
Block summary
</div>
</div><comp:block>
<h3 class="block__heading">
Block heading
</h3>
<div class="block__summary">
Block summary
</div>
</comp:block>using (Html.Block(new string[] {}))
{
<h3 class="block__heading">Block heading</h3>
<div class="block__summary">
Block summary
</div>
}Muted block
A block with an muted style applied.
block--muted
By setting the block--muted class on the block component, you can style all your muted blocks the same, ensuring consistency across your layout. By using a muted style, these blocks can be visually de-emphasised without completely hiding them, allowing users to access additional details when needed while keeping the focus on primary content.
Block heading with muted modifier
<div class="block block--muted">
<h3 class="block__heading">
Block heading with muted modifier
</h3>
<div class="block__summary">
Block summary
</div>
</div><comp:block modifiers="muted">
<h3 class="block__heading">
Block heading with muted modifier
</h3>
<div class="block__summary">
Block summary
</div>
</comp:block>@{
var modifiers = new string[] { "muted" };
using (Html.Block(modifiers))
{
<h3 class="block__heading">Block heading with muted modifier</h3>
<div class="block__summary">
Block summary
</div>
}
}Contrast block
A block with a contrast style applied.
block--contrast
By setting the block--contrast class on the block component, you can style all your contrast blocks the same, ensuring consistency across your layout. By using a high-contrast style, these blocks can stand out visually, drawing attention to key content and improving readability for users with visual impairments while maintaining a balanced layout.
Block heading with contrast modifier
<div class="block block--contrast">
<h3 class="block__heading">
Block heading with contrast modifier
</h3>
<div class="block__summary">
Block summary
</div>
</div><comp:block modifiers="contrast">
<h3 class="block__heading">
Block heading with contrast modifier
</h3>
<div class="block__summary">
Block summary
</div>
</comp:block>@{
var modifiers = new string[] { "contrast" };
using (Html.Block(modifiers))
{
<h3 class="block__heading">Block heading with contrast modifier</h3>
<div class="block__summary">
Block summary
</div>
}
}My Account block
A block with My Account features including lists, actions and form data.
Block heading
Block summary with additional elements
Block form data
Email: firstname.lastname@gossinteractive.com
Name: Firstname Lastname
Phone number: 01234567890
Block list
<div class="block block--muted">
<div data-grid-mincolwidth="250" data-grid-maxcols="3" data-grid-step="3" class="grid grid--block grid--3col">
<div class="grid__cell grid__cell--cols1" data-grid-colspan="1">
<div class="grid__cellwrap">
<h2 class="block__heading">Block heading</h2>
<p class="block__summary">Block summary with additional elements</p>
<div class="block__actions">
<a href="#" class="cta-link cta-link--contrast">
CTA with contrast modifier
</a>
<a href="#" class="cta-link cta-link--contrast">
CTA with contrast modifier
</a>
</div>
</div>
</div>
<div class="grid__cell grid__cell--block grid__cell--cols2" data-grid-colspan="2">
<div class="grid__cellwrap">
<h3>Block form data</h3>
<div class="icmformdata">
<p><strong>Email: </strong>firstname.lastname@gossinteractive.com</p>
<p><strong>Name: </strong>Firstname Lastname</p>
<p><strong>Phone number: </strong>01234567890</p>
</div>
<h3>Block list</h3>
<ul class="block__list">
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
</ul>
</div>
</div>
</div>
</div><comp:block modifiers="muted">
<comp:grid minColWidth="250" cols="3" step="3" modifiers="block">
<comp:gridCell>
<h2 class="block__heading">Block heading</h2>
<p class="block__summary">Block summary with additional elements</p>
<div class="block__actions">
<a href="#" class="cta-link cta-link--contrast">
CTA with contrast modifier
</a>
<a href="#" class="cta-link cta-link--contrast">
CTA with contrast modifier
</a>
</div>
</comp:gridCell>
<comp:gridCell colspan="2">
<h3>Block form data</h3>
<div class="icmformdata">
<p><strong>Email: </strong>firstname.lastname@gossinteractive.com</p>
<p><strong>Name: </strong>Firstname Lastname</p>
<p><strong>Phone number: </strong>01234567890</p>
</div>
<h3>Block list</h3>
<ul class="block__list">
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
</ul>
</comp:gridCell>
</comp:grid>
</comp:block>@{
var blockModifiers = new string[] { "muted" };
var gridModifiers = new string[] { "block" };
using (Html.Block(blockModifiers))
{
using (Html.Grid(3, 250, 3, gridModifiers))
{
using (Html.GridCell())
{
<h2 class="block__heading">Block heading</h2>
<p class="block__summary">Block summary with additional elements</p>
<div class="block__actions">
<a href="#" class="cta-link cta-link--contrast">
CTA with contrast modifier
</a>
<a href="#" class="cta-link cta-link--contrast">
CTA with contrast modifier
</a>
</div>
}
using (Html.GridCell(2))
{
<h3>Block form data</h3>
<div class="icmformdata">
<p><strong>Email: </strong>firstname.lastname@gossinteractive.com</p>
<p><strong>Name: </strong>Firstname Lastname</p>
<p><strong>Phone number: </strong>01234567890</p>
</div>
<h3>Block list</h3>
<ul class="block__list">
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
<li class="block__item">
<a href="#" class="block__link block__link--list">
Link to another page
</a>
</li>
</ul>
}
}
}
}Share this page
