NavigationContentFooter
Jump toSuggest an edit

Editor Components listing - Docs

ButtonsLink to this anchor

🧩  This component uses a Tag style.

Code example:

<Navigation>
  <PreviousButton to="/">Previous</PreviousButton>
  <NextButton to="/">Next</NextButton>
</Navigation>

Render:

See also
PreviousNext

Navigation with title

See also
PreviousNext

Navigation with one button

See also
Previous
See also
Lorem ipsum dolor sit amet

Steps & StepButtonLink to this anchor

🧩  This component uses a Tag style.

Code example:

<Steps>
  <StepButton to="/">How-to create an Instance</StepButton>
  <StepButton to="/">How-to create an account</StepButton>
</Steps>

Render:

How-to create an account

Two stepsLink to this anchor

How-to create an InstanceHow-to create an account

ClickableBannerLink to this anchor

🧩  This component uses a Tag style.

Code example:

<ClickableBanner
  productLogo="cli"
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/foo/dd"
  label="Link"
/>

Render:

CLI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

Code example:

<ClickableBanner
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/foo/dd"
  label="Link"
/>

Render:

CLI

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Link

DefaultCardLink to this anchor

🧩  This component uses a Tag style.

Props:

  • title (mandatory!)
  • tags (use OBJECT array)
  • description
  • url (for link)
  • label (for link)

Code example:

<DefaultCard 
  title="Lorem Ipsum"
  tags={['one', 'two', 'three']}
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#"
  label="Link label" />

Render:

Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label

MinimalLink to this anchor

Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.

LinkedLink to this anchor

Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label

Linked, no description & default labelLink to this anchor

Lorem IpsumSee more about: Lorem Ipsum

Linked & tags, without descriptionLink to this anchor

Lorem Ipsum
onetwothree
Link label

⚙️  This component is a “system codebase” component.

General links

  • Slack Community
  • Service Status
  • Scaleway Ideas
  • Report Abuse
  • Technical Assistance

GridLink to this anchor

🧩  This component uses a Tag style.

Code example:

<Grid>
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
</Grid>

Render:

Example using DefaultCard in Grid wrapper.

Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label
Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label
Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label
Lorem Ipsum
onetwothree
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
Link label

HelpBannerLink to this anchor

🧩  This component uses a Tag style.

Code example:

<HelpBanner 
  url="https://console.scaleway.com/support/tickets"
  title = 'Still need help?'
/>

Render

Log (Changelog)Link to this anchor

🧩  This functionnality uses MDX files.

⚙️  This is a “system codebase” feature.

See Changelog page.

Each “Log” is MDX file:

  • Go to changelog/ folder
  • Add or choose a directory relative to the log you want to add
  • Create a .mdx file in it

NOTES:

  • Organize changelog/ folder structure as you want
  • The .mdx filename does not matter
  • Assets should be in a asset directory, sibling of your .mdx file

Log file frontmatterLink to this anchor

At top of .mdx file, you MUST add data in frontmatter:

---
title: Migration to the new Object Storage backend (HIVE) for all regions
status: changed
author:
    fullname: 'Join the #container-registry channel on Slack.'
    url: 'https://slack.scaleway.com/'
date: 2022-01-02
category: compute
product: container-registry
---
  • title (mandatory)
  • status (mandatory)
    • added
    • security
    • changed
    • deprecated
    • removed
    • fixed
  • author
    • fullname (optional / mandatory IF url is set) It could be a name or a sentence if you please.
    • url (optionnal)
  • date (mandatory) YYYY-MM-DD
  • category (mandatory) kebab-case
  • product (mandatory) kebab-case

Log file contentsLink to this anchor

The content section works as any documentation .mdx file. It accept markdown and Components as well. Be concise !

ChangelogListLink to this anchor

🧩  This component uses a Tag style.

The ChangelogList component is used to display the latest entries of the changelog, in a particular page.

Display all productsLink to this anchor

If there is no product name passed to the component, the list will display the X latest changes from the changelog:

Code example:

<ChangelogList numberOfChanges={4} />

Render:

  • Environmental Footprint

    Added

    Environmental footprint calculator is now in Public Beta allowing you to track and understand the environmental impact of your cloud resources

    The Environmental Footprint calculator is currently available for Elastic Metal offers. The calculator will progressively integrate all Scaleway products. Refer to the Environmental Footprint documentation  for more information.

  • Transactional Email

    Added

    Automatic blocklist for better deliverability

    Optimize your deliverability and improve your reputation score with our new automatic blocklist feature. Addresses that consistently generate hard bounces (mailbox not found, mailbox full) are automatically blocked to prevent them from affecting your email performance.

    Refer to the How to manage blocklists documentation page for more information.

  • Transactional Email

    Fixed

    Periodic report duplication

    We have resolved an issue where some clients received multiple reports per Project. The periodic report is now being sent correctly, as expected.

  • Transactional Email

    Security

    DKIM Enhancement - Stronger Signature

    We have enhanced the security of DKIM (DomainKeys Identified Mail) signatures by including additional headers. This improvement strengthens email authentication, reduces the risk of spoofing, and enhances deliverability across various email providers. The following headers are now included in the DKIM signature:
    The following headers are now included in the DKIM signature:

    • List-ID
    • List-Help
    • List-Owner
    • List-Post
    • List-Subscribe
    • List-Unsubscribe
    • List-Unsubscribe-Post
    • Message-ID
View the full changelog

Display only the changes for a specific productLink to this anchor

By adding a product name to the component, the list will display the X latest changes from the changelog for this product:

Code example:

<ChangelogList productName="instances" numberOfChanges={2} />

Render:

  • Load Balancers

    Removed

    Static attachment is no longer available

    The feature to statically attach a Private Network to a Load Balancer (deprecated in September 2023) will be removed from the API in January 2025. To achieve similar functionality, use the ipam_ids parameter with the Private Network attachment endpoint.

  • Load Balancers

    Changed

    Static private network attachment change

    Following the deprecation of static Private Network attachment, the Load Balancer API will no longer accept static Private Network attachement with an IP address outside of the Private Network subnet.

    Please update to DHCP attachment type (recommended) or use an IP address which belongs to the Private Network subnet.

    If you already use DHCP attachment mode or static attachement mode with an IP address belonging to the Private Network subnet, you're not affected by this change.

View the full changelog

About Download link in content

🧩  This feature uses a native-extended Markdown style.

  • Use [Download](document-pdf-name.pdf) the document as PDF file.
  • Place the PDF file at a sibling assets directory
    • This is usefull to automatically get the filesize data
  • Then it should appear like this (with PDF icon):

    • 📄 Download (PDF, 2.26MB) the document as PDF file.

ProductCardLink to this anchor

🧩  This component uses a Tag style.

Props:

  • productIcon (mandatory!) - Icon name from Ultraviolet lib
  • title (mandatory!)
  • description
  • url (for link, mandatory!)

Code example:

<ProductCard 
  productIcon="AccountExperienceProductIcon"
  title="Lorem Ipsum"
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#" />

Render:

Full exampleLink to this anchor

Lorem Ipsum
Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad.
See more

ProductHeaderLink to this anchor

Props:

  • productName (mandatory!)
  • description
  • productLogo
  • url (for link)
  • label (for link)

Code example:

<ProductHeader
  productName="Instances"
  productLogo="instances"
  description="Lorem ipsum..."
  url="/instances/quickstart"
  label="Instances quickstart"
/>

Render:

ProductHeader

ProductName quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instances quickstart

ProductHeader

ProductName quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Instances quickstart

SummaryCardLink to this anchor

There is 4 SummaryCard using props mentionned below.

The icon names are not random ones they come from Ultraviolet lib.

Code example:

<SummaryCard
  title="Quickstart"
  icon="rocket"
  description="lorem ipsum dolor sit amet, consectetur adipiscing elit in in part of the description"
  label="Read More"
  url="/hello/foo/"
/>

Render:

Quickstart

Learn how to create, manage and delete a Kubernetes cluster in a few steps.

Read More

Concepts

Core concepts that give you a better understanding of Kubernetes Kapsule and Kosmos.

Read More

How-tos

Check our guides to creating and managing Kubernetes clusters and their features.

Read More

Reference content

Guides to help you configuring your cluster and its advanced configuration.

Read More

Ultraviolet illustrationsLink to this anchor

Here is a list of current Ultraviolet illustrations available

accountExperience
apiGateway
appleSilicon
blockStorage
cli
cockpit
containerRegistry
containers
costManager
dedibox
dediboxVps
distributedDataLab
domainsAndDns
edgeServices
elasticMetal
environmentalFootprintCalculator
functions
generativeApi
iam
inference
instance
interlink
iotHub
ipam
ipfsNaming
ipfsPinning
jero
k8sKapsule
k8sKosmos
kms
loadBalancers
managedDatabase
managedSearchDatabase
mongoDB
nabu
nats
objectStorage
publicGateway
quantum
quantumApplication
redis
savingsPlan
secretManager
serverlessDB
serverlessJob
sns
sqs
terraform
transactionalEmail
vpc
webHosting
webPlatform
accountBilling
generic
learning
writeCommunity
Was this page helpful?
API DocsScaleway consoleDedibox consoleScaleway LearningScaleway.comPricingBlogCareers
© 2023-2025 – Scaleway