How to use @commercetools-docs/ui-kit - 10 common examples
To help you get started, weāve selected a few @commercetools-docs/ui-kit examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
commercetools / merchant-center-application-kit / website / src / @commercetools-docs / gatsby-theme-docs / overrides / page-header-side.js View on Github 
const RepositoryLinks = () => {
const siteData = useSiteData();
return (
<div>
</div>const SecondaryExternalLink = props => (
);padding: 0;
@media screen and (${designSystem.dimensions.viewports
.largeTablet}) {
padding: 0;
}
`}
>
<div>
<div> * + * {
margin: ${designSystem.dimensions.spacings.xl} 0 0;
}
`}
></div></div>import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import {
LayoutHeader,
Footer,
useSiteData,
} from '@commercetools-docs/gatsby-theme-docs';
import { designSystem } from '@commercetools-docs/ui-kit';
import LandingPageBackground from '../images/landing-page-background.png';
const Container = styled.div`
height: 100vh;
display: grid;
grid:
[row1-start] 'header' ${designSystem.dimensions.heights.header} [row1-end]
[row2-start] 'main' 1fr [row2-end]
[row3-start] 'footer' auto [row3-end]
/ 1fr;
`;
const Main = styled.div`
grid-area: main;
display: flex;
flex-direction: column;
overflow: hidden auto;
`;
const Content = styled.div`
box-shadow: ${designSystem.tokens.shadow1};
background: url('${LandingPageBackground}');
background-repeat: repeat-x;
background-position-x: center;
background-position-y: -25rem;import ScreenDesignToolIcon from '../icons/screen-design-tool-icon.svg';
import ScreenBulbIcon from '../icons/screen-bulb-icon.svg';
const SectionTitle = styled.div`
color: ${designSystem.colors.light.primary};
font-size: ${designSystem.typography.fontSizes.h4};
letter-spacing: 4px;
`;
const SectionBody = styled.div`
color: ${designSystem.colors.light.textPrimary};
font-size: ${designSystem.typography.fontSizes.small};
line-height: 1.5;
`;
const PageContainer = styled.div`
width: 100%;
max-width: ${designSystem.dimensions.widths.marketingContent};
margin: 0 auto;
`;
const ButtonLink = styled(Link)`
display: inline-block;
padding: ${designSystem.dimensions.spacings.m}
${designSystem.dimensions.spacings.l};
text-decoration: none;
font-size: ${designSystem.typography.fontSizes.body};
color: ${designSystem.colors.light.textPrimary} !important;
background-color: ${designSystem.colors.light.surfacePrimary};
border: 1px solid ${designSystem.colors.light.surfacePrimary};
border-radius: ${designSystem.tokens.borderRadius6};
:hover {
background-color: ${designSystem.colors.light.surfaceQuote};
color: ${designSystem.colors.light.linkNavigation} !important;const RepositoryLinks = () => {
const siteData = useSiteData();
return (
<div>
</div>import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Link } from '@commercetools-docs/gatsby-theme-docs';
import { designSystem } from '@commercetools-docs/ui-kit';
import SpacingsStack from '@commercetools-uikit/spacings-stack';
const Container = styled.div`
background-color: ${designSystem.colors.light.surfacePrimary};
border: 1px solid ${designSystem.colors.light.borderPrimary};
border-radius: ${designSystem.tokens.borderRadius6};
padding: ${designSystem.dimensions.spacings.l};
`;
const GridContainer = styled.div`
display: grid;
grid-gap: ${designSystem.dimensions.spacings.l};
grid-auto-columns: 1fr;
grid-template-columns: repeat(
auto-fill,
${designSystem.dimensions.widths.pageNavigation}
);
`;
const LinksList = styled.ul`
list-style: none;
margin: 0;
padding: 0;
> * + * {
margin: ${designSystem.dimensions.spacings.xs} 0 0;[row3-start] 'footer' auto [row3-end]
/ 1fr;
`;
const Main = styled.div`
grid-area: main;
display: flex;
flex-direction: column;
overflow: hidden auto;
`;
const Content = styled.div`
box-shadow: ${designSystem.tokens.shadow1};
background: url('${LandingPageBackground}');
background-repeat: repeat-x;
background-position-x: center;
background-position-y: -25rem;
padding: ${designSystem.dimensions.spacings.xl} ${designSystem.dimensions.spacings.m};
flex: 1;
z-index: 1;
> * + * {
margin-top: ${designSystem.dimensions.spacings.xl} !important;
}
@media screen and (${designSystem.dimensions.viewports.largeTablet}) {
background-position-y: -40rem;
padding: ${designSystem.dimensions.spacings.xl};
}
`;
const LayoutFooter = styled.div`
grid-area: footer;
width: 100%;
background-color: ${designSystem.colors.light.surfaceSecondary2};flex: 1;
z-index: 1;
> * + * {
margin-top: ${designSystem.dimensions.spacings.xl} !important;
}
@media screen and (${designSystem.dimensions.viewports.largeTablet}) {
background-position-y: -40rem;
padding: ${designSystem.dimensions.spacings.xl};
}
`;
const LayoutFooter = styled.div`
grid-area: footer;
width: 100%;
background-color: ${designSystem.colors.light.surfaceSecondary2};
`;
const FooterConstraint = styled.div`
max-width: ${designSystem.dimensions.widths.marketingContent};
margin: 0 auto;
`;
const LayoutMarketing = props => {
const siteData = useSiteData();
return (
<main>
<content>{props.children}</content></main>import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Link } from '@commercetools-docs/gatsby-theme-docs';
import { designSystem } from '@commercetools-docs/ui-kit';
import SpacingsStack from '@commercetools-uikit/spacings-stack';
const Container = styled.div`
background-color: ${designSystem.colors.light.surfacePrimary};
border: 1px solid ${designSystem.colors.light.borderPrimary};
border-radius: ${designSystem.tokens.borderRadius6};
padding: ${designSystem.dimensions.spacings.l};
`;
const GridContainer = styled.div`
display: grid;
grid-gap: ${designSystem.dimensions.spacings.l};
grid-auto-columns: 1fr;
grid-template-columns: repeat(
auto-fill,
${designSystem.dimensions.widths.pageNavigation}
);
`;
const LinksList = styled.ul`
list-style: none;
margin: 0;
padding: 0;@commercetools-docs/ui-kit
UI component library for building commercetools documentation websites
