MDX examples

Examples of our components shared across MDX docs files.

This page includes examples of all components shared across our docs files. See them all in action in the built page or view the source to see how use them.

h2 Heading

Text under a second-level heading.

h3 Heading

Text under a third-level heading.

h4 Heading

Text under a fourth-level heading.

h5 Heading

Text under a fifth-level heading.

h6 Heading

Text under a sixth-level heading.

Horizontal Rules


Typographic replacements

© ® § ±

Ellipses: test.. test… test… test?… test!…

Dashes: – —

Quotes: “Smartypants, double quotes” and ‘single quotes’

Emphasis

This is bold text

This is italic text

Strike through

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 the top-level list

  2. The second item in the top-level list

    1. The first item in a nested list
    2. The second item in a nested list
  3. The third item in the top-level list

Items with multiple paragraphs

  • The first paragraph.

    The second paragraph.

  • Another item.

Code

Inline code

Code blocks

Sample text here...

Syntax highlighting

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

Callouts

You can use various callouts using properties from our Alert component.

This is an informational callout.

It should present additional useful information.

This is a success callout.

You can present tips for additional success or mark progress through a guide.

This is a warning callout.

It can warn about potential dangers that might come with specific choices.

This is a critical callout.

It should only present information that could end up destroying previous progress/data.

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

In addition to the default of left alignment, columns can also be right or center aligned. Set alignment with colons in the header row.

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

External links

link text

Internal links

link text

Automatically converted link https://github.com/kiwicom/orbit

Images

Plain Images

Orbit rocket

Image with caption

Orbit rocket

Blast into Orbit

Images by reference

You can also add images with a footnote-style syntax.

Alt text

Blast into Orbit

Use a reference at the end of the document to define the URL location.

Figma image

TODO.

Image container

Alignment

Orbit rocket

Orbit rocket

Orbit rocket

Size

Small

Orbit rocket

Medium

Orbit rocket

Large

Orbit rocket

Border

Orbit rocket

Definition Lists

Orbit

An open source design system for your next travel project.

Design system

Components, styles, and patterns to create beautiful consistent designs at scale.

Fancy links

Tiles that span the text area and show icons the links.

Choose from the existing icons or import your own.

Guidelines

Guideline do

Use secondary small buttons for additional actions on the page

The secondary small button is great for actions in cards as it stands out from the interface but doesn’t take so much attention.

Guideline don’t

Don’t use Product colors to highlight information

Because Product colors are used for actions, it may cause confusion when they’re used to highlight some information or text.

Guideline with one image

Have one primary action

Every screen should have only one button that represents the most important action: leading the user to the next step.

One primary button on a screen stands out.

Guideline with only image and title

Guideline with two images

Have one primary action

Every screen should have only one button that represents the most important action: leading the user to the next step.

Do

One primary button on a screen stands out.

Don't

Too many primary buttons confuse users.

Guideline images with separate descriptions

Do

Ensure there’s only one primary action on each screen.

One primary button on a screen stands out.

Don't

Don’t fill up the screen with primary actions.

Too many primary buttons confuse users.

Do

Ensure there’s only one primary action on each screen.

One primary button on a screen stands out.

Don't

Don’t fill up the screen with primary actions.

Too many primary buttons confuse users.

Guidelines side by side

Do

My profile, My trips, Preferences
My trips, Upcoming, Completed
Guidelines, React, iOS, Android

Don't

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

Do

As the 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.

Don't

  • 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

TODO.

Color palette

Plain palette

Product Light
#ECF8F7
rgba(236, 248, 247, 1)
paletteProductLight
Product Normal
#00A991
rgba(0, 169, 145, 1)
paletteProductNormal
Product Dark
#007F6D
rgba(0, 127, 109, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

Palette with additional shades

Product Light
#ECF8F7
rgba(236, 248, 247, 1)
paletteProductLight
Product Normal
#00A991
rgba(0, 169, 145, 1)
paletteProductNormal
Product Dark
#007F6D
rgba(0, 127, 109, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

React examples