Components / Design System

Work In Progressv1.0

Logo

Colors

Brand:

Background:

Foreground:

Typeface:

Palette

Lists

First
Second
Third

First
Second
Third

1. First
2. Second
3. Third

- First
- Second
- Third

Buttons

Anchor

Form Components

Name

Example Text

Checkbox

Switch

Range

Card

Base Card

Title for the card

Card with title prop

Some Custom Header

Card With Custom Header

Card With custom Body

Card depth=0

Card depth=1

Card depth=2

Card depth=3

Tooltip

Hover Me!

Pill

Info Pill

Success Pill

Warning Pill

Danger Pill

Callout

Almost before we knew it, we had left the ground.

Inline Code

const foo = () => 'bar'

Code Block

Basic

1
console.log("hello world")
2

3
/**
4
 * Some comments
5
 */
6
function sayHi(name) {
7
    var message = `hi ${name}`
8
    return message;
9
}

With title and highlighting

Code snippet title

1
console.log("hello world")
2

3
/**
4
 * Some comments
5
 */
6
function sayHi(name) {
7
    var message = `hi ${name}`
8
    return message;
9
}

Sandpack Code Block

import { motion } from 'framer-motion';
import './scene.css';

const WavingHand = () => {
  console.log('hello world');

  return (
    <motion.div
      style={{
        marginBottom: '-20px',
        marginRight: '-45px',
        paddingBottom: '20px',
        paddingRight: '45px',
        display: 'inline-block',
      }}
      animate={{ rotate: 20 }}
      transition={{
        yoyo: Infinity,
        from: 0,
        duration: 0.2,
        ease: 'easeInOut',
        type: 'tween',
      }}
    >
      👋
    </motion.div>
  );
};

const Hi = () => (
  <h1>
    Hi <WavingHand /> !
  </h1>
);

export default Hi;

Details/Summary

Summary: Some short text

Command Center / Search

Tweet

Thomas Pesquet@Thom_astro

24h dans le volume d'une Fiat 500 avec trois amis et pourtant on se sent comme chez soi... à 400 km d'altitude ! Superbe performance technique et opérationelle de toutes les équipes qui nous ont entrainés et encadrés pour ce voyage 👏 https://t.co/kreeGnnLUM

5:45 PM - Apr 24, 2021

846 94729

Components / Design System

Logo

Colors

Palette

Typography

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Almost before we knew it, we had left the ground.

Icons

Shadows

Lists

Buttons

Anchor

@MaximeHeckel

Github

Back

Twitter

Design System

Form Components

Card

Tooltip

Pill

Callout

Inline Code

Code Block

Details/Summary

Command Center / Search

Tweet

Before / After Image