yarn add @lote-design-system/marketing-blocks
or
npm install @lote-design-system/marketing-blocks
You can use the whole design system without installing all other packages. But remember the whole design-system is written with the Css-In-Js approach. It is necessary to import ThemeProvider and theme, if you want to consume blocks inside your website.
Either you can take ThemeProvider from external Css-In-Js library like styled-components or you can import this from our core package which also comes with the predefined theme.
To use these blocks with an enhanced experience, I highly recommend using browser defaults and typography from the core package and If we want to use marketing blocks on our website, we need to import special theme.
marketing blocks are dependent upon the special theme which is crafted only for marketing blocks. To use marketing-blocks properly please take this example seriously.
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { reset, typography, ThemeProvider } from '@lote-design-system/core';
import { theme, Feature1 } from '@lote-design-system/marketing-blocks';
const GlobalStyle = createGlobalStyle`
${reset};
${typography};
`;
export default function App() {
const featureSchema = React.useMemo(
() => [
{
id: 1,
icon: <Icon name="rss" />,
title: 'Faster Growth',
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
link: {
icon: <Icon name="arrow-right" />,
href: '/',
variation: 'fill'
}
},
{
id: 2,
icon: <Icon name="bar-chart" />,
title: 'Linear Growth',
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
link: {
icon: <Icon name="arrow-right" />,
href: '/',
variation: 'fill'
}
},
{
id: 3,
icon: <Icon name="activity" />,
title: 'J-Curve Growth',
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
link: {
icon: <Icon name="arrow-right" />,
href: '/',
variation: 'fill'
}
}
],
[]
);
return (
<>
<GlobalStyle />
<ThemeProvider theme={theme}>
<Feature1
majorWords="Hello World"
minorWords="No, You're missing something!"
subText="I don't like typing!"
features={featureSchema}
/>
</ThemeProvider>
</>
);
}
Initially, the purpose of this design system is to create any kind of website that we see in our normal life, such as. (Marketing / Agency Website), (Ecommerce Website) and Admin Dashboard. Therefore, the main purpose is to save the developer’s time and create a complete set of components so that the developer does not have any difficulty in creating such a website.
The core goals of this project are to:
We hope to accomplish these goals by:
MIT