Skip to content

Latest commit

 

History

History
467 lines (268 loc) · 9.83 KB

mdx-examples.mdx

File metadata and controls

467 lines (268 loc) · 9.83 KB

import { Meal } from "@kiwicom/orbit-components/icons";

import DocLayout from "../components/DocLayout"; import Palette from "../components/Palette";

export default ({ children, location }) => { return ( {children} ); };

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.

It should present additional useful information.

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

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

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

<Callout title="This is a callout with only a title and a custom icon" icon={} />

Tables

Package Description
orbit-components All our React components along with API documentation.
orbit-design-tokens All visual UI attributes available as tokens.

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.

Option Description
orbit-components All our React components along with API documentation.
orbit-design-tokens All visual UI attributes available as tokens.

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

Images by reference

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

Alt text

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.

<FancyLink title="Eat at Orbit" href="https://orbit.kiwi/" icon={} />

Guidelines

Guideline do

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

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

If you'd like to have an action, consider an alert or a button instead.

An alert with the message "your booking failed" and a button labeled "get details".

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

An alert with the message "your booking failed" and a button labeled "get details".

Guideline with two images

If you'd like to have an action, consider an alert or a button instead.

An alert with the message "your booking failed" and a button labeled "get details".

A badge with the text: "Booking failed. Get details."" The second sentence is a link.

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.

Too many primary buttons confuse users.

Guideline images with separate descriptions

One primary button on a screen stands out.

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

Too many primary buttons confuse users.

Don't fill up the screen with primary actions.

One primary button on a screen stands out.

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

Too many primary buttons confuse users.

Don't fill up the screen with primary actions.

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

    • 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

<Palette colors={[ "paletteProductLight", "paletteProductNormal", "paletteProductDark", "paletteProductDarker", ]} />

Palette with additional shades

<Palette allowAdditional colors={[ "paletteProductLight", "paletteProductNormal", "paletteProductDark", "paletteProductDarker", ]} />

React examples