Components / Design System

v3.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

Primary Card

Default style - Use for widgets and content that needs to be put int he foreground

Secondary Card

Glass Background - Use on top of colored background to blend in

Tertiary Card

Transparent Background - Use for a more muted look

Base Card

Title for the card

Card with title prop

Some Custom Header

Card With Custom Header

Card With custom Body

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