Reactstrap Core Headers
-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
Argon Design System
The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color.
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
Design with us,Develop Anything.
We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.
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
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
See our latest collection!
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
Our products
This is the best way to find your favorite stuff
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.