Description

This component may often include a variation of the text block or a quote combined with a logo image or a Trustpilot widget. It's responsible for setting up the layout while being flexible in terms of content.

When living beside other components in a 1:1 grid (equal columns) the section housing the copy stacks above the section housing the logo or Trustpilot widget across all screen sizes.

When living by itself, the trust block will spread across the full width of the screen. In this case, the section housing the logo or the Trustpilot widget will live on the left side of the container being followed by the section housing the copy (on the right side). For generating more complex layouts between custom breakpoints the component makes use of the get-columns-width function (which is part of the rs-golden-ratio-grid project imported in Radius as node module dependency). In this user case, the component will require the usage of the modifier class: .trust-block--full-width to ensure the layout is applied.

The HTML markup should follow the order in which elements will appear on the page for each case which will result in a natural flow of the elements on the page.