The LB Redbridge design system.
-
- An introduction
- A starter template
- Accordion
- Back link
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Confirmation
- Date input
- Details
- Declarations
- Error message and summary
- File upload
- Footer
- Header
- Hyperlink
- Inset text
- Layouts
- Mapping
- Phase banner
- Phone numbers
- Print button
- Radio buttons
- Select
- Spacing
- Table ( responsive )
- Text input
- Textarea
- Typography
- Warning text
- Well
Typography
GDS covers this in more detail but the core elements used across LB Rebridge are outlined here.
GDS guidelines on using this component (opens in a new window)
heading xlarge [h1]
heading large [h1]
heading medium [h2]
heading small [h3]
Lead paragraph [large]
standard paragraph [medium]
standard paragraph [small]
font weight [regular]
font weight [bold]
Example of a link embedded inside a paragraph.
Bullet list example:
- HTML
- CSS
- Javascript
<h1 class="govuk-heading-xl">heading xlarge [h1]</h1>
<h1 class="govuk-heading-l">heading large [h1]</h1>
<h2 class="govuk-heading-m">heading medium [h2]</h2>
<h3 class="govuk-heading-s">heading small [h3]</h3>
<p class="govuk-body-l">Lead paragraph [large]</p>
<p class="govuk-body">standard paragraph [medium]</p>
<p class="govuk-body-s">standard paragraph [small]</p>
<p class="govuk-body govuk-!-font-weight-regular">font weight [regular]</p>
<p class="govuk-body govuk-!-font-weight-bold">font weight [bold]</p>
<p class="govuk-body">Example of a <a href="#" class="redbridge-link">link embedded</a> inside a paragraph.</p>
<p class="govuk-body">Bullet list example:</p>
<ul class="govuk-list govuk-list--bullet">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
