MDX examples

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

Horizontal Rules

Typographic replacements

Emphasis

Lists

Unordered

  • Create a list by starting a line with -.
  • Sub-lists are made by indenting 2 spaces:
    • Keep going, just with the indentation the same for each list:
      • Next item
      • And another
      • And another
  • Very easy!

Ordered

    1. The first item in a nested list
    2. The second item in a nested list

Items with multiple paragraphs

Code

Sample text here...
const foo = bar => ++bar;
console.log(foo(5));

Callouts

This is an informational callout.
This is a success callout.
This is a warning callout.
This is a critical callout.
This is a callout with only a title
This is a callout with only a title and a custom icon

Tables

PackageDescription
orbit-componentsAll our React components along with API documentation.
orbit-design-tokensAll visual UI attributes available as tokens.
eslint-plugin-orbit-componentsESLint rules to enforce best practices for our components.

Aligned columns

OptionDescription
orbit-componentsAll our React components along with API documentation.
orbit-design-tokensAll visual UI attributes available as tokens.
eslint-plugin-orbit-componentsESLint rules to enforce best practices for our components.

Links

Images

Plain Images

Image with caption

Images by reference

Figma image

Image container

Alignment

Size

Small
Medium
Large

Border

Definition Lists

Orbit

Design system

Fancy links

Guidelines

Guideline do

Guideline don’t

Guideline with one image

Guideline with only image and title

Guideline with two images

Guideline images with separate descriptions

Guidelines side by side

My profile, My trips, Preferences
My trips, Upcoming, Completed
Guidelines, React, iOS, Android
Your user profile, Trips, Settings for your account
My trips, Trips you have planned, Trips you have taken
Some general thoughts, Specifics for React, iOS implementation, How it’s done in Android
  • As a passenger, it’s your responsibility to ensure you have the correct visas and travel documents for your trip.
  • You should carefully check which countries you’re transiting through before making your booking.
  • A visa is generally required even for transit or rechecking your baggage.

Inline token

Color palette

Plain palette

Product Light
#E1F4F3
rgba(225, 244, 243, 1)
paletteProductLight
Product Normal
#00A58E
rgba(0, 165, 142, 1)
paletteProductNormal
Product Dark
#007A69
rgba(0, 122, 105, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

Palette with additional shades

Product Light
#E1F4F3
rgba(225, 244, 243, 1)
paletteProductLight
Product Normal
#00A58E
rgba(0, 165, 142, 1)
paletteProductNormal
Product Dark
#007A69
rgba(0, 122, 105, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

React examples