Reactstrap Core Headers

-
Pro Component

For the first part of the website that one of your potential clients will see, we’ve made the bellow header examples.


Description

We’ve made the following header components using various reactstrap components, and Bootstrap classes and also some custom scss/css classes.

Examples

Since these components were created with the thought of expanding on a whole screen, you should also take a look at our live preview, to see it on full width here.

Header1

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Header1 from "components/headers/Header1.js";

function Example() {
  return (
    <>
      <Header1 />
    </>
  );
}

export default Example;

Header2

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Header2 from "components/headers/Header2.js";

function Example() {
  return (
    <>
      <Header2 />
    </>
  );
}

export default Example;

Header3

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Header3 from "components/headers/Header3.js";

function Example() {
  return (
    <>
      <Header3 />
    </>
  );
}

export default Example;

Header4

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Header5 from "components/headers/Header5.js";

function Example() {
  return (
    <>
      <Header5 />
    </>
  );
}

export default Example;

HeaderBlogPost

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import HeaderBlogPost from "components/headers/HeaderBlogPost.js";

function Example() {
  return (
    <>
      <HeaderBlogPost />
    </>
  );
}

export default Example;

HeaderBlogPosts

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import HeaderBlogPosts from "components/headers/HeaderBlogPosts.js";

function Example() {
  return (
    <>
      <HeaderBlogPosts />
    </>
  );
}

export default Example;

HeaderEcommerce

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import HeaderEcommerce from "components/headers/HeaderEcommerce.js";

function Example() {
  return (
    <>
      <HeaderEcommerce />
    </>
  );
}

export default Example;

HeaderIndex

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import HeaderIndex from "components/headers/HeaderIndex.js";

function Example() {
  return (
    <>
      <HeaderIndex />
    </>
  );
}

export default Example;

HeaderPresentation

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import HeaderPresentation from "components/headers/HeaderPresentation.js";

function Example() {
  return (
    <>
      <HeaderPresentation />
    </>
  );
}

export default Example;

HeaderProductPage

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import HeaderProductPage from "components/headers/HeaderProductPage.js";

function Example() {
  return (
    <>
      <HeaderProductPage />
    </>
  );
}

export default Example;

Note

You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.