The Hero

A common landing page feature is the "Hero" layout. A Hero tends to be the first thing a user sees on a page, and is the most important thing to focus on. It is usually has a large image and/or heading, a short description of the page, and one or more call to actions.

The Hero layout is easily achieved using the Cover component.

Building a Hero

Let's start by stubbing out the markup we'll need. In our App.js file, let's make the following changes:

import { Stack } from "@bedrock-layout/stack";
import { Inline } from "@bedrock-layout/inline";

import { Subscribe } from "./Subscribe";
import { Menu } from "./Menu";

function App() {
  return (
    <Stack gutter='size3'>
      <Menu />
      <Stack as="header" gutter='size3'>
        <h1>Coco Le Belle</h1>
        <p>Elegant Feminine Fashion</p>
        <Inline gutter='size3'>
          <button>New Arrivals</button>
        </Inline>
      </Stack>
      <Subscribe />
    </Stack>
  );
}

export default App;
Copy

Your browser should now show something like this:

The Cover component is a wrapper component that will vertically center it's content. It also let's you optionally render an item on above and/or below the content.

So let's start by downloading the Cover component:

yarn add @bedrock-layout/cover
Copy

And then we'll update our App.js file to look like this:

import { Stack } from "@bedrock-layout/stack";
import { Inline } from "@bedrock-layout/inline";
import { Cover } from "@bedrock-layout/cover";

import { Subscribe } from "./Subscribe";
import { Menu } from "./Menu";

function App() {
  return (
    <Stack gutter='size3'>
      <Cover minHeight="50vh" gutter='size3' top={<Menu />}>
        <Stack as="header" gutter='size3'>
          <h1>Coco Le Belle</h1>
          <p>Elegant Feminine Fashion</p>
          <Inline gutter='size3'>
            <button>New Arrivals</button>
          </Inline>
        </Stack>
      </Cover>
      <Subscribe />
    </Stack>
  );
}

export default App;
Copy

Your browser should now show the following:

Adding the Center component

Let's address so width problems our website is having. Both our Subscribe component and header take up the entire width of their containers. This isn't ideal. Optimally, we want them to be stop growing after a certain width and then remain centered in their parent container. To do this, let's add the Center component to our App.js file. First, we need to install it:

yarn add @bedrock-layout/center
Copy

Then we can add it to our App.js file:

import { Stack } from "@bedrock-layout/stack";
import { Inline } from "@bedrock-layout/inline";
import { Cover } from "@bedrock-layout/cover";
import { Center } from "@bedrock-layout/center";

import { Subscribe } from "./Subscribe";
import { Menu } from "./Menu";

function App() {
  return (
    <Stack gutter='size3'>
      <Cover minHeight="50vh" gutter='size3' top={<Menu />}>
        <Center maxWidth="40rem">
          <Stack as="header" gutter='size3'>
            <h1>Coco Le Belle</h1>
            <p>Elegant Feminine Fashion</p>
            <Inline gutter='size3'>
              <button>New Arrivals</button>
            </Inline>
          </Stack>
        </Center>
      </Cover>
      <Center centerText>
        <Subscribe />
      </Center>
    </Stack>
  );
}

export default App;
Copy

Your browser should now show the following:

AppBoundary

When we think of responsive design, we typically think of phones and tablets. However, screen resolutions are getting larger and larger. Allowing our page to grow to the same width as a 4K monitor is irresponsible. A website typically will want to clamp at an outer limit and stay centered on the screen.

The AppBoundary is built on the Center component and is designed to wrap your entire app. By default, it will clamp the width at the 1920px, which is the xxlarge size option. This can also be set via the boundarySize prop to any of the valid size options.

Let's start by installing the AppBoundary primitive:

yarn add @bedrock-layout/appboundary
Copy

Then we can update our index.js file to use the AppBoundary primitive:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { AppBoundary } from "@bedrock-layout/appboundary";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <AppBoundary boundarySize="xlarge">
      <App />
    </AppBoundary>
  </React.StrictMode>,
  document.getElementById("root")
);
Copy

Now the AppBoundary will clamp the width of your app to the xlarge size option, or 1439px.

Our landing page is coming along. In the next section, we'll be building cards and add them to a responsive grid layout.