RNLI website components

Components are a simple, reusable solution to a design problem.

  • Example of "Accordion".
    Accordion
    A vertically stacked list of items. Each item can be expanded to reveal the content within.
    More details
  • Example of "Side address".
    Side Content Address
    Grey box containing an address.
    More details
  • Example of "Utility bar".
    Utility Bar
    Contextual navigation to link visitor to previous page.
    More details
  • Example of "Body".
    Body
    The main body of text.
    More details
  • Example of "Campaign info panel".
    Campaign Info Panel
    A component that showcases key content in a number of ways.
    More details
  • Example of "Campaign map".
    Campaign Map
    A Google Map with a number of marker pins.
    More details
  • Example of "Campaign navigation".
    Campaign Navigation
    The main campaign navigation that allows a user to navigate through the site.
    More details
  • Example of "Side facts".
    Side Content Facts
    A blue right-hand side panel that displays statistics with icons. You can also add a call-to-action button to the bottom of the panel. This button links to another page.
    More details
  • Example of "Side promo".
    Side Content Promo
    A panel on the right-hand side that has an image and title. It also has an optional link and summary.
    More details
  • Example of "Download link".
    Side Content Download Link
    An orange button in the side panel that downloads a document.
    More details
  • Example of "Related content".
    Related Content
    A component that shows related content.
    More details
  • Example of "Side navigation map".
    Side Content Location Map
    A Google Map in the side panel with a single marker.
    More details

Need a little extra help?

Contact Us
Back to top