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

Trello lets you work

As a result of growing greenhouse gas emissions, climate models predict that our planet will get significantly warmer, that ecosystems will be changed or destroyed, and that enormous human and economic costs will be incurred. These scenarios aren’t guaranteed, but avoiding them will be very hard. We’re trying to take small steps to mitigate our impact.

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

Build stunning websites and apps

Connect with founders

As we live, our hearts turn colder. Cause pain is what we go through as we become older and we get insulted

Learn from experts

We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love.

Get practical advice

When we lose family over time. What else could rust the heart more over time? Blackgold. It becomes harder...

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

Check our latest post!

posted 13 Sept 2019

Someone famous in Source Title

As a result of growing greenhouse gas emissions, climate models predict that our planet will get significantly warmer, that ecosystems will be changed or destroyed, and that enormous human and economic costs will be incurred. These scenarios aren’t guaranteed, but avoiding them will be very hard. We’re trying to take small steps to mitigate our impact.

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.