Jump toSuggest an edit

Components listing - Docs

Feel free to explore this page in your markdown editor (/docs/components/docs.mdx) to see how the components were used, or in MDX content files that already use MDX components.

MDX components are useful for adding rich content and interactions within your contributions.

There are two types of components:

Native (or native-extended) markdown style
Tag style (some kind of html tag)

Code

🧩 This component uses a native-extended Markdown style.

Use a triple backquote character ``` to enclose text

You can specify the language of the code. A list of languages can be found here.

Component examples

this is a block of code

The following example uses the JSX language, i.e. ```jsx:

import React, { useState } from 'react'
function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

With bash script, i.e ```bash

WEEK=`date '+%W'`    	# The week of the year (0..53).
WEEK=${WEEK#0}       	# Remove possible leading zero.
let "INDEX = $WEEK % $COUNT"   # week modulo count = the lucky person
COMPAGNON=${COMPAGNONS_LIST[INDEX]}     # Get the lucky person's e-mail address.

With no language, i.e. ```

server {
  listen 212.d.e.f:80n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8;
  server_name site2.tld;
  root /var/www/site2;
  index index.html;
  location / {
    try_files $uri $uri/ =404;
  }
}

Concept

🧩 This component uses a Tag style.

Component example #1

The first child has to be an h2

Concept with string

Content string

Component example #2

Concept with MDX

server {
  root /var/www/site2;
  index index.html;
  location / {
    try_files $uri $uri/ =404;
  }
}

Note

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

Code example

<Concept>
  ## The first child has to be an `h2`
  You can use simple text and even MDX components here like Message, Lightbox, Code, etc
</Concept>

Definition list

🧩 This component uses a native-extended Markdown style.

List items should be separated with a line break.
If you want to include two separate definition lists, there must be a line of text separating them. Otherwise, the lists will be stuck together.

Description: Root-level tag for the ObjectLockConfiguration parameters.

Random text to separate the lists. It can be a title or inline code.

Description: Indicates whether this bucket has an Object Lock configuration enabled
Type: String
Valid Values: Enabled
Required: Yes

Code example

Description
: Indicates whether this bucket has an Object Lock configuration enabled
Type
: String
Valid Values
: `Enabled`
Required
: Yes

Headings

🧩 This component uses a Native Markdown style.

H1 title

Voluptate commodo eu consectetur sint proident et Lorem amet officia mollit cupidatat. Proident in ullamco eiusmod veniam quis non qui minim elit veniam ullamco eu. Ea duis enim sint incididunt exercitation tempor irure veniam. Fugiat labore veniam magna dolor anim deserunt deserunt laboris.

H2 title

Eu minim consectetur pariatur deserunt est esse anim ullamco do deserunt consequat sit irure. Esse aute adipisicing ullamco non eu ex ut dolore incididunt veniam aliqua est. Ea ex laboris eiusmod eiusmod ut. Ipsum veniam officia elit nisi est consequat Lorem ut magna anim duis. Occaecat commodo sint ipsum reprehenderit deserunt elit duis.

H3 title

Do enim nisi laborum aliqua magna anim magna officia velit. Excepteur minim nostrud in laboris incididunt cillum consectetur laborum sit. Eu cillum sit irure excepteur. Voluptate aute fugiat ullamco sint ullamco laborum voluptate deserunt incididunt in mollit enim. Quis nisi laborum id nulla nisi amet est.

H4 title

Deserunt id culpa aliqua exercitation exercitation officia amet ea ea. Sit aliqua tempor Lorem incididunt amet elit dolor. Ullamco commodo nisi ullamco adipisicing officia nisi. Nulla amet nostrud minim cupidatat aute labore.

H5 title

Cillum cupidatat aute Lorem amet laborum cillum occaecat adipisicing excepteur. Nisi proident reprehenderit proident veniam nisi sit eu anim deserunt Lorem irure pariatur ad incididunt. Esse commodo officia elit id aliquip dolore commodo. Lorem amet labore in consectetur laborum cillum tempor mollit anim laboris velit aute do. Ex sunt elit irure deserunt laboris ullamco amet Lorem amet tempor deserunt qui.

H6 title

Nulla labore qui aliqua minim adipisicing. Ut irure Lorem consectetur incididunt reprehenderit veniam id duis mollit. Consectetur ullamco Lorem excepteur magna sit excepteur duis nisi aliqua veniam cupidatat enim. Aute eiusmod duis enim non adipisicing incididunt enim aute laborum proident. Ea nulla sit laborum consectetur laborum minim tempor cillum do sunt deserunt laborum. Velit laborum deserunt laborum eiusmod qui dolore enim irure laborum deserunt enim nostrud cillum Lorem.

Code example

## Heading title level 2
Lorem ipsum
### Heading title level 3
Lorem ipsum
#### Heading title level 4
Lorem ipsum
##### Heading title level 5
Lorem ipsum
###### Heading title level 6
Lorem ipsum

Inline Code

🧩 This component uses a Native Markdown style.

To use code style in the middle of text lines, enclose the text with a single backquote (`) character

Hello, I'm inline code. Call the function getMoreLove(). This is my IP address: 192.168.1.1.

Code example

…this is a normal inline text using single quotes `192.168.0.1` for IP.

…this is a normal inline text using single quotes 192.168.0.1 for IP.

Inline Console icons

🧩 This component uses a Tag style.

Inline Console icons are used in the text. They are the same as the Scaleway Console icons.

The MDX is a TAG named Icon
Mandatory ‘name’ attribute is used with keys

Keys are:

assistance,
delete,
download,
cancel,
edit,
glacier,
more,
plus,
toggle,
unlink,
validate,

Voluptate commodo eu consectetur sint proident et Lorem amet officia mollit cupidatat «Validate Icon». Proident in ullamco eiusmod «Edit Icon» veniam quis non qui minim elit veniam ullamco eu «Download Icon». Ea duis enim sint incididunt exercitation tempor irure veniam. Fugiat labore veniam magna dolor «Cancel Icon» anim deserunt deserunt laboris.

Eu minim consectetur «See more Icon» pariatur deserunt est esse anim ullamco do deserunt consequat sit irure «Assistance Icon». Esse aute adipisicing «Delete Icon» ullamco non eu ex ut dolore incididunt veniam «Plus Icon» aliqua est. Ea ex laboris eiusmod «Toogle Icon» eiusmod ut. Ipsum veniam «Object to Glacier Icon» officia elit nisi est consequat Lorem ut magna anim duis. Occaecat commodo sint ipsum reprehenderit «Unlink Icon» deserunt elit duis.

Code example

…this is a normal inline text <Icon name="toggle" /> with an icon.

Images

🧩 This component uses a Native Markdown OR a Tag style.

Code example

// Native Markdown
![MD basic image maker](https://placekitten.com/300/200)
// HTML Tag
<img src="https://placekitten.com/800/500" />

🧩 This component uses a Tag style.

Props: src (mandatory):

<Lightbox src="icon.webp" />

Different size (by default medium):

Props: size="[small|medium|large]"

Small:

Medium:

Large:

Can be grouped

With 2 small images:

<Lightbox src={["icon.webp","miam.webp"]} size={"small"}  alt={["icon","Cupcake Scaleway"]} />

With 2 medium images:

<Lightbox src={["icon.webp","miam.webp"]} size={"medium"}  alt={["icon","Cupcake Scaleway"]} />

With 3 small images:

<Lightbox src={["icon.webp","miam.webp","first-scaleway-chip.webp"]} size={"small"}  alt={["icon","Cupcake Scaleway","chips"]} />

Can handle .gif

<Lightbox src="scaleway-flex-drag.gif" alt="" />
<Lightbox src={["icon.webp", "scaleway-flex-drag.gif"]} alt="" />

About accessibility

With Prop `alt` (optional):

<Lightbox src="miam.webp" alt="Cupcake Scaleway" />

With prop `longdesc` (optional):

<Lightbox src="elements-create-account.webp" alt="Create Account form" longdesc="Log-in panel for Elements product console. The form contain a toggle to choose if it is a personal or corporate account. Then firstname and lastname inputs, then an email input. Below there is a checkbox to receive marketing emails. Finally a Captcha and a submit button." />

Link

🧩 This component uses a Native Markdown OR a Tag style.

Internal
- <Link /> Tag component: Tutorials
```
  <Link to="/tutorials">Tutorials</Link>
```
- []() Native syntax: Tutorials
```
  [Tutorials](/tutorials)
```
- []() PDF: Latest changes of the week (PDF, 75.65KB)
```
  
  [Latest changes of the week](new-changes.pdf)
```
External
- <Link /> Tag component: Console Scaleway
```
  <Link to="https://console.scaleway.com">Console Scaleway</Link>
```
- []() Native syntax: Tutorials
```
  [Tutorials](https://console.scaleway.com)
```

Lists

🧩 This component uses a Native Markdown style.

Ordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

First
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Third
fourth

fifth

1. First
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <Lightbox src="miam.webp" />
3. Third
4. fourth
    ![simple image in list](https://placekitten.com/1000/460)
5. fifth

Unordered list

First
- First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- First
Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
Third

- First
  - First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  - First
- Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- Third

Ordered list with a new line

List number 1

New line, still in number 1

List number 2 with code block inside

  server {
    listen 212.d.e.f:80n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8n 212.d.e.f:8;
    server_name site2.tld;
    root /var/www/site2;
    index index.html;
    location / {
      try_files $uri $uri/ =404;
    }
  }

I don’t know mnI don’t know mnI don’t know mnI don’t know mn

List number 3 here

Nested lists

Click Instances in the Compute section of the side menu. The Instance creation page displays.
Click the Create an Instance button. The Instance creation wizard displays:
You can now make those steps
- Choose an Availability Zone, which is the geographical region where your instance will be deployed
  - under
  - line
- Choose an Image to run on your instance. This can be an operating system, an InstantApp or a custom image.
- Choose an Instance type. Different instance types have different prices, processing power, memory, SSD disks and bandwidth.
- Add Volumes. This is an optional step. You can leave the default settings for storage, or choose to add more block or local storage to your instance.
- Enter a Name for your instance, or leave the randomly-generated name in place. Optionally, you can also add tags to help you organize your instances.
- Click Advanced Options if you wish to configure a flexible IP, a local bootscript or a cloud-init configuration.
- Verify the SSH Keys that will be give you access to your Instance
- Verify the Estimated Cost of your instance, based on the specifications you chose.
Click Create a new instance to finish. The creation of your instance is started, and you are informed when the instance is ready.
Complete the following information:
- Frontend rules include:
  - Frontend rule name
  - Port
  - SSL Certificate
- Backend rules include:
  - Backend rule name
  - Protocol: TCP or HTTP
  - Port
  - Proxy
  - Health check type
  - Sticky session
  - Server IP
    Note
    You can also use an existing backend. To do so, click Use an existing Backend and select the backend of your choice from the dropdown list.

Click Create Frontend Code example

1. Click **Instances** in the **Compute** section of the side menu. The Instance creation page displays.
2. Click the **Create an Instance** button. The Instance creation wizard displays:
3. You can now make those steps
    - Choose an **Availability Zone**, which is the geographical region where your instance will be deployed
      - under
      - line
    - Choose an **Image** to run on your instance. This can be an operating system, an InstantApp or a custom image.
    - Choose an **Instance type**. Different instance types have different prices, processing power, memory, SSD disks and bandwidth.
    - Add **Volumes**. This is an optional step. You can leave the default settings for storage, or choose to add more [block](link) or [local](link) storage to your instance.
    - Enter a **Name** for your instance, or leave the randomly-generated name in place. Optionally, you can also add tags to help you organize your instances.
    - Click **Advanced Options** if you wish to configure a flexible IP, a local bootscript or a cloud-init configuration.
    - Verify the **SSH Keys** that will be give you access to your Instance
    - Verify the **Estimated Cost** of your instance, based on the specifications you chose.
4. Click **Create a new instance** to finish. The creation of your instance is started, and you are informed when the instance is ready.
5. Complete the following information:
    - Frontend rules include:
      - Frontend rule name
      - Port
      - SSL Certificate
    - Backend rules include:
      - Backend rule name
      - Protocol: TCP or HTTP
      - Port
      - Proxy
      - Health check type
      - Sticky session
      - Server IP
        <Message type="note">
          You can also use an existing backend.
          To do so, click **Use an existing Backend** and select the backend of your choice from the dropdown list.
        </Message>
6. Click **Create Frontend**

Macro

🧩 This component uses a Tag style.

A macro is a piece of content written in MDX which can be re-used anywhere.

Public IP addresses are routed on the internet. You can enter the public IP address of your Instance into any browser connected to the Internet, and access content being served from that instance. You can think of public IP addresses like postal addresses for buildings - they are unique, and tell the routers directing

Components listing - Docs

Concept with stringConcept with string

Concept with MDXConcept with MDX

H1 title

H4 title

H5 title

H6 title

Small:

Medium:

Large:

With 2 small images:

With 2 medium images:

With 3 small images:

With Prop alt (optional):

With prop longdesc (optional):

Concept with string

Concept with MDX

With Prop `alt` (optional):

With prop `longdesc` (optional):