Design kit for appbaseio ecosystem
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
.vscode
src
static
.babelrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.prettierrc
LICENSE
README.md
package.json
yarn.lock

README.md

designkit

Design kit for appbaseio ecosystem

Components

Footer

Additional props can be passed to Footer and its child compound components Footer.Links, Footer.List and Footer.Brand.

import { Footer, Title } from '@appbaseio/designkit';

const AppFooter = ({ theme: { colors } }) => (
	<Footer css={{ backgroundColor: colors.footer }}>
		<Footer.Links>
			<Footer.List>
				<Title>Products</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Appbase.io
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://opensource.appbase.io/reactivemaps"
					>
						Reactive Maps
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://opensource.appbase.io/reactivesearch"
					>
						Reactive Search
					</a>
				</li>
			</Footer.List>
			<Footer.List>
				<Title>Docs</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://docs.appbase.io"
					>
						JS Quick Start
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://docs.appbase.io"
					>
						JS API Reference
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://rest.appbase.io"
					>
						REST Quick Start
					</a>
				</li>
			</Footer.List>
			<Footer.List>
				<Title>Use Cases</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Geolocation Queries
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Personalized Feeds
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Realtime Search
					</a>
				</li>
			</Footer.List>
			<Footer.List>
				<Title className="heading">Company</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://status.appbase.io/"
					>
						Status Page
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="http://tos.appbase.io/"
					>
						Terms
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://tos.appbase.io/"
					>
						Privacy
					</a>
				</li>
			</Footer.List>
		</Footer.Links>
		<Footer.Brand>
			<img
				width="100%"
				src="/static/svg/jellyfish.svg"
				alt="appbase.io"
			/>
		</Footer.Brand>
	</Footer>
);

News

<News>Build native mobile apps with appbase.io and ReactiveSearch</News>

Hero

A full width and full height section great for highlighting the landing section of new pages.

<Hero style={{ background: 'hotpink' }}>
	<H1>Build native mobile apps with appbase.io and ReactiveSearch</H1>
	<H2>Appbase Design System</H2>
</Hero>