Creating a full viewport component
You can create a Frontend component that takes up the full viewport of a browser (also known as full-bleed). Let's look at an example of how to do this.
Below is an example of a hero Frontend component. The image can either be the full width of the grid or the full width of the viewport.
|Full width of grid (12-column layout element)||Full width of viewport (full-bleed)|
Building a full-width component
As always, we start with the schema. We'll create a text field and a toggle so users of the studio can turn our full-bleed image feature on and off.
Upload this schema to the studio.
Next, we need to create our
index.tsx file to receive the information from the schema.
Then, we create a wrapper component and add it to our layout folder. This simple React Component makes sure its contents (the children) fill up the whole horizontal viewport space. To accomplish this, we use a little CSS trick.
We can now use the wrapper to wrap the contents of our component if the users of the studio choose to do so using the toggle. We do this in the
index.tsx of the component.
And that's it. When this component is added to a page version in the studio, you can now select the image and if it's full-bleed or not:
If you add another Frontend component to the same layout element, it could cause your layout to break. Either keep it in a separate layout element or update your CSS to stop this from happening.