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.
Text under a second-level heading.
Text under a third-level heading.
Text under a fourth-level heading.
Text under a fifth-level heading.
Text under a sixth-level heading.
© ® ™ ¶ § ±
→ ←
Ellipses: test.. test... test..... test?..... test!....
Dashes: -- ---
Quotes: "Smartypants, double quotes" and 'single quotes'
This is bold text
This is italic text
Strike through
- 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
- Keep going, just with the indentation the same for each list:
- Very easy!
-
The first item in the top-level list
-
The second item in the top-level list
- The first item in a nested list
- The second item in a nested list
-
The third item in the top-level list
-
The first paragraph.
The second paragraph.
-
Another item.
Inline code
Code blocks
Sample text here...
Syntax highlighting
const foo = bar => ++bar;
console.log(foo(5));
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={} />
Package | Description |
---|---|
orbit-components | All our React components along with API documentation. |
orbit-design-tokens | All visual UI attributes available as tokens. |
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. |
External links
Internal links
Automatically converted link https://github.com/kiwicom/orbit
You can also add images with a footnote-style syntax.
Use a reference at the end of the document to define the URL location.
TODO.
Orbit : An open source design system for your next travel project.
Design system : Components, styles, and patterns to create beautiful consistent designs at scale.
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={} />
The secondary small button is great for actions in cards as it stands out from the interface but doesn't take so much attention.
Because Product colors are used for actions, it may cause confusion when they're used to highlight some information or text.
If you'd like to have an action, consider an alert or a button instead.
Every screen should have only one button that represents the most important action: leading the user to the next step.
If you'd like to have an action, consider an alert or a button instead.
Every screen should have only one button that represents the most important action: leading the user to the next step.
Ensure there's only one primary action on each screen.
Don't fill up the screen with primary actions.
Ensure there's only one primary action on each screen.
Don't fill up the screen with primary actions.
- 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.
TODO.
<Palette colors={[ "paletteProductLight", "paletteProductNormal", "paletteProductDark", "paletteProductDarker", ]} />
<Palette allowAdditional colors={[ "paletteProductLight", "paletteProductNormal", "paletteProductDark", "paletteProductDarker", ]} />