Add a Logo and Description

The logo and description information are components located in the upper section of your app called “Header”. You can set up your own company logo image and a short description that goes under the title of your app.

<30 sec video on what it is and what it isn’t, how to use it>

Use Cases:

Typical use cases for this type of settings are when your business logic needs to brand your app with a specific logo image or when you want to define a short text that describes the functionality of your app.

• I require to brand this with my company logo.
• I require to describe the scope of the app in a short manner.

Example:

Placeholder for example

Usage:

First, the necessary HTML structure needs to be defined inside your code. You have multiple ways for structuring your header and you should implement it in the best way that conforms to the best practices of your company.

In this example we’re going to use the <header> tag and the <AppHeader/> component that you can import from the Corva UI components library:

import { AppHeader } from '@corva/ui/components'
import logo from './assets/logo.png'
…
// Inside your return function:
<header>
…
</header>

Note that we already have imported the logo asset. “logo” is now equivalent to the local src path of the image.

Second, we need to define our header React properties that are coming from the parent component

// Inside of your main component function
function App(props) {
  const { appHeaderProps } = props;
  return (
    <>
      <header>
        …
        <img src={logo} />…
      </header>
    </>
  );
}

Now, we can start to play with the header structure defining the logo, the description, and the AppHeader component.

One possible way of structuring and styling the header section can be as follow:

<header className="{classes.headerContainer}">
  <div>
    <img className="{classes.headerLogo}" src="{logo}" />
  </div>
  <div className="{classes.headerSplit}" />
  <div className="{classes.headerContent}">
    <AppHeader {...appHeaderProps} />
    <span className="{classes.headerSubtitle}"
      >Enhancing Whole-site Situational Awareness</span
    >
  </div>
</header>

The <span> located below the AppHeader component is the short description of the app. The styles for this example can be defined as follow:

headerContainer: {
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'row',
  padding: '1rem'
},
headerLogo: {
  objectFit: 'contain',
  width: '6.125rem'
},
headerSplit: {
  width: '1px',
  height: '1rem',
  backgroundColor: '#616161',
  margin: '0 1.25rem',
},
headerContent: {
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'column',
  width: '100%'
},
headerSubtitle: {
  color: '#BDBDBD',
  fontSize: '0.75rem'
}

What’s Next:

Link will be added soon

More Resources:

Links will be added soon