Skip to content
cTrader
Get started

Reference

Block catalog

Layer 1 layout utilities, then all 23 blocks. Change Layer 1 and check it here.

Layer 1 — layout utilities

The grid vocabulary every block is composed from. Each value below is a literal key in a static lookup map: Tailwind cannot generate a class from an interpolated string, so a value absent from the map does not exist.

Grid — column count

A scalar ramps responsively and is what an MDX author writes ~90% of the time. Resize the window: every one of these collapses to a single column on a phone.

Two columnscols={2}
1
2
Three columns — the defaultcols={3}
1
2
3
Four columnscols={4}
1
2
3
4
Six columnscols={6}
1
2
3
4
5
6
Explicit per breakpoint — the escape hatchcols={{ base: 2, md: 3, lg: 6 }}
1
2
3
4
5
6
Auto-fit — no breakpoints at allmin="16rem"
auto
auto
auto
auto
auto

Grid — gap, alignment and flow

Gap draws from the same closed scale as Stack, Row and Split, so vertical and horizontal rhythm cannot drift apart.

Tightgap={2}
1
2
3
4
Loosegap={12}
1
2
3
4
Split gap — wide columns, tight rowsgap={12} gapY={2}
1
2
3
4
5
6
Items stretch to the tallest by defaultalign="stretch"
tall
short
short
Items keep their own heightalign="start"
tall
short
short
The authoring aid — outlines every celldebug
1
2
3
4

Cell — spanning

This is what turns a bento from bespoke code into an arrangement. Spans are always breakpoint-scoped and collapse to full width on a phone: a col-span-3 inside a one-column grid does not clamp, it creates implicit columns and squeezes the content into a third of the screen.

Mixed spans in a four-column gridspan={3} · span={1}
span 3
1
1
span 3
span 2
span 2
Row spanningrowSpan={2}
span 2 · rowSpan 2
span 2
span 2
Dense flow back-fills the hole a wide cell leavesflow="dense"
span 3
span 2
fills the gap
Per-breakpoint spansspan={{ sm: 2, lg: 4 }}
2 at sm, 4 at lg
2
2

Split — asymmetric two-column

By volume the most-used marketing layout: split hero, alternating feature rows, media and copy, split CTA. All eight ratios, plus reverse — which swaps visual order with order utilities and never flex-row-reverse, so RTL inverts once rather than twice and copy stays before media in the DOM.

Equalratio="1:1"
A
B
One to tworatio="1:2"
A
B
Two to oneratio="2:1"
A
B
One to threeratio="1:3"
A
B
Three to oneratio="3:1"
A
B
Two to threeratio="2:3"
A
B
Three to tworatio="3:2"
A
B
Golden — media dominant, copy still readableratio="golden"
A
B
Reversed — A is still first in the DOMratio="1:2" reverse
A
B
Stacks later, so the two sit side by side for longerstackAt="sm"
A
B

Row and Stack — one-dimensional clusters

Row is the horizontal cluster every block used to hand-roll: button pairs, badge rows, logo strips, meta lines. Its scroll mode is how a carousel ships at zero bytes.

Default — wraps, stacks below smRow
one
two
three
Pushed apartjustify="between" stackAt="none"
start
middle
end
Centredjustify="center" stackAt="none"
one
two
Scroll-snap — this is the carousel, and it costs nothingscroll
1
2
3
4
5
6
Stack — vertical, with a hairline between childrenStack divide gap={0}
First
Second
Third

Frame — aspect-ratio media

The single place the image pipeline lands, so the first real hero image proves it once rather than in nine blocks. Given no src it renders a tokened placeholder, which is also what a layout draft looks like before art direction arrives.

Every ratioratio="21:9 | 16:9 | 3:2 | 4:3 | 1:1 | 3:4"
21:9
16:9
3:2
4:3
1:1
3:4
Chromechrome="none | browser | device"
none
browser
device
Radiusradius="none | default | lg"
none
default
lg

Container — width

Bleed is shown further down, on MediaBlock, because it only means anything against a real section edge.

Narrow — the reading measurewidth="narrow"
max-w-3xl
Default — the theme's container capwidth="default"
max-w-site
Wide — ignores the capwidth="wide"
max-w-none

Motion

Five entrance presets, stagger, exit and parallax. Opt-in per block, brand-themeable, and hidden only under html.motion-ready so a visitor without JavaScript sees everything.

Reveal — the five presets

Each specimen re-animates only if you reload; entrance is a one-shot unless it asks for exit.

Fade — the default<Reveal animate="fade">
fade
Rise — fade plus a lift<Reveal animate="rise">
rise
Slide from the start edge — flips under RTL<Reveal animate="slide-start">
slide-start
Slide from the end edge — flips under RTL<Reveal animate="slide-end">
slide-end
Scale — a subtle push forward<Reveal animate="scale">
scale

Stagger

Delays come from nth-child rules in base.css, not from JavaScript — a component rendered from MDX cannot enumerate its own children. Twelve distinct steps; everything past the twelfth shares the twelfth.

On a Grid — the common case<Grid cols={4} stagger>
1
2
3
4
With a preset for the children<Grid stagger="rise">
1
2
3
4
On a Stack<Stack stagger="slide-start">
First
Second
Third

Exit, and Frame parallax

Exit is opt-in and should stay rare — an element that fades out on scroll-up is one a visitor cannot re-read. Parallax is the one pure-CSS part: animation-timeline behind @supports, so an unsupporting browser simply shows a static image.

Re-arms on leave — scroll past it and back<Reveal animate='rise' exit>
exit
Scroll-linked drift on the image inside a Frame<Frame parallax />

Layer 2 — the block catalog

23 blocks, each composed from the utilities above plus @ctrader/ds. Nineteen of them ship zero JavaScript.

Entry

layout=centered

The default hero

One column, centred, zero JavaScript. This is what shipped before the catalog and it renders identically.

PrimarySecondary

layout=split-end

Copy first, media second

Split puts the media on the inline-end edge. The DOM order stays copy-first in both writing directions.

Primary

layout=split-start

The mirror image

Same props, media on the inline-start edge. Split flips it with order utilities, never flex-row-reverse.

Primary

layout=with-form

Capture in the hero

The embedded form is a native POST to a server action. Still zero bytes of client JavaScript.

No spam. Unsubscribe at any time.

A quieter opening

Display tier 2 and default spacing, for interior pages that want weight without height.

Value and capability

layout=cards

The default feature grid

Cards on a secondary surface, three across, collapsing to one on a phone.

Transparent execution

Full depth of market on every symbol, with no server-side plugin able to alter a quote.

Cloud execution

Strategies run around the clock without a VPS, and cost nothing to keep running.

One account everywhere

Desktop, web and mobile share a single identity and a single set of workspaces.

layout=icon-start

The glyph sits beside the text rather than above it, which reads tighter in two columns.

Level II pricing

Every price level, not just the top of book.

Sub-millisecond routing

Measured at the server, published monthly.

No dealing desk

Orders route to liquidity, never to a book.

Trade receipts

A signed record of every fill, exportable.

layout=bare

No Card. The right call when the section already carries a surface of its own.

Charting

Fifty-four timeframes and twenty-eight order types.

Automation

C# and Python, with a built-in editor and backtester.

Analysis

Performance statistics computed from the deal history.

layout=list

Depth of marketAggregated and full-depth views.
Guaranteed stop lossBroker-configurable, per instrument.
Partial fillsReported at execution, not netted.

FeatureAlternating

The feature story

Each capability gets a full row, media and copy alternating sides. Below md every row stacks copy-above-media uniformly.

Charts

Read the market, not the chrome

Every panel is detachable, every layout is a workspace, and both sync across devices.

  • Detachable windows
  • Multi-monitor layouts
  • Cloud-synced workspaces
See charting

Automation

Strategies that outlive your session

Write in C# or Python, backtest against tick data, then run it in the cloud.

See automation

BentoGrid

Composition, not layout code

Grid plus Cell and nothing else. Spans collapse to full width below the first breakpoint.

Depth of market

Full Level II on every instrument, aggregated or raw.

11M+Registered traders

Cloud execution

Free, and always on.

Automation in two languages

C# and Python, with a built-in editor and a tick-accurate backtester.

Copy trading

Browse strategies, invest, or provide one of your own.

Trade receipts

A signed record of every fill.

Steps layout=horizontal

Four steps across

  1. Create a cTrader ID

    One identity for every broker and every app.

  2. Pick a broker

    Only regulated firms are listed.

  3. Open a demo

    No deposit and no card.

  4. Trade

    The demo and the live platform are the same build.

Steps layout=timeline

  1. Minute 1

    Install

    One package, no configuration.

  2. Minute 3

    Connect

    Sign in with an existing cTrader ID.

  3. Minute 5

    Run

    Deploy a strategy to cloud execution.

ComparisonTable

A matrix, not a tier list

Rows by columns. Scrolls horizontally on a phone rather than reflowing — a comparison you cannot see side by side is not one.

A matrix, not a tier list
Starter
ActiveMost popularChoose
TeamTalk to us
Execution
Cloud instances110Unlimited
Level II pricingIncludedIncludedIncluded
Support
Priority supportNot includedIncludedIncluded
Seats1125

TabbedShowcase

The one block that costs indexability

Base UI renders only the active panel, so the wrapper publishes every panel in a noscript block. Prefer FeatureAlternating where it fits.

Charting

Fifty-four timeframes.

Proof

11M+Registered traders
250+Partner firms
<1msMedian routing
99.9%Uptime in hours
11M+traders
250+firms
<1msrouting
11M+Registered tradersAs of Q2
250+Partner firms104 added this year
<1msMedian routingMeasured server-side

11M+ registered traders · 250+ partner firms

LogoWall layout=row — string wordmarks

Northwind
Meridian
Halcyon
Vantage
Alcove

LogoWall layout=grid — string wordmarks

Northwind
Meridian
Halcyon
Vantage
Alcove
Brightwater

LogoWall layout=marquee — string wordmarks, static under prefers-reduced-motion

Northwind
Meridian
Halcyon
Vantage
Alcove
Brightwater

Testimonials layout=grid

“The first platform that showed me why a fill happened where it did.”
AM
Amelia RoweSystematic trader
“Cloud execution removed a VPS bill and a whole category of outage.”
TO
Tomas BergFund operations
“The same workspace on a laptop and a phone, without thinking about it.”
PR
Priya NairDiscretionary trader
“It is the only platform where I can explain every fill to a client without hedging.”
AM
Amelia RoweSystematic trader, Meridian

Testimonials layout=carousel — CSS scroll-snap, zero bytes

“The first platform that showed me why a fill happened where it did.”
AM
Amelia RoweSystematic trader
“Cloud execution removed a VPS bill and a whole category of outage.”
TO
Tomas BergFund operations
“The same workspace on a laptop and a phone.”
PR
Priya NairDiscretionary trader
“Backtests that match live results closely enough to trust.”
KE
Ken AdeyemiQuant

Conversion

PricingTable layout=cards with a billing toggle

Without the billing prop this block ships zero bytes. With it, one island.

Starter

Free

Everything needed to trade one account.

  • 1 cloud instance
  • Level II pricing
  • All order types
Get started

Active

Most popular
€29per month

For traders running strategies around the clock.

  • 10 cloud instances
  • Priority routing
  • Advanced analytics
  • Email support
Get started

Team

Custom

Seats, shared workspaces and consolidated billing.

  • Unlimited instances
  • 25 seats
  • Dedicated support
Talk to us

CTABand layout=centered

The default: an accent band with a centred pair of buttons.

Get startedRead the docs

CTABand layout=boxed

A card on a page surface, for mid-page placement where a full band would cut the page in half.

Get started

CTABand layout=with-form

An inline capture field instead of a button pair.

LeadForm layout=card

The same form standalone. Native POST, server-rendered result, no client JavaScript.

One email a month at most.

FAQ layout=single-column

FAQ layout=two-column

For eight or more short questions. Never for long answers — the reflow on expand reads as a bug.

Editorial and media

MediaBlock layout=contained

A screenshot as a section in its own right, capped at the reading width.

MediaBlock

layout=split

Copy on one side, media on the other, driven by the same Split utility as the hero.

Learn more

MediaBlock layout=full-bleed

Bleed cancels the container gutter so the media reaches both viewport edges.

Gallery layout=filmstrip

CSS scroll-snap. Zero bytes, touch-native, keyboard reachable, and every image is in the HTML.

Charts
Depth of market
Automation
Analysis

Gallery layout=grid

Charts
Depth of market
Automation

ResourceGrid

layout=cards

Explainer12 May 20266 min

How execution transparency actually works

What Level II pricing means when a broker cannot alter a quote.

Guide3 May 20269 min

Migrating a strategy from MQL to C#

The three differences that account for most of the work.

Engineering21 April 20264 min

Cloud execution, one year on

What we learned running strategies for 11 million accounts.

ResourceGrid layout=featured

Explainer12 May 2026

How execution transparency actually works

What Level II pricing means when a broker cannot alter a quote, and why it changes the spread you actually pay.

Guide3 May 2026

Migrating a strategy from MQL to C#

Engineering21 April 2026

Cloud execution, one year on

Explainer9 April 2026

Reading a trade receipt

ResourceGrid layout=list

Explainer12 May 20266 min

How execution transparency actually works

What Level II pricing means when a broker cannot alter a quote.

Guide3 May 20269 min

Migrating a strategy from MQL to C#

The three differences that account for most of the work.

Engineering21 April 20264 min

Cloud execution, one year on

What we learned running strategies for 11 million accounts.

Timeline

layout=vertical

  1. 2010

    Founded

    Limassol, with a single product and a seed round.

  2. 2018

    cTrader 3.0

    Manual and algorithmic trading merged into one application.

  3. 2023

    Python and the Store

    A second automation language and a marketplace to sell into.

  4. 2025

    cBridge

    Liquidity aggregation, and volume doubled.

Timeline layout=alternating

  1. 2010

    Founded

  2. 2018

    cTrader 3.0

  3. 2023

    Python and the Store

  4. 2025

    cBridge

Team

layout=grid

AR

Amelia Rowe

Chief executive
TB

Tomas Berg

Head of platform
PN

Priya Nair

Head of design
KA

Ken Adeyemi

Head of research

Team layout=leadership

AR

Amelia Rowe

Chief executive

Twenty years in market infrastructure, most of it spent explaining why execution quality is measurable.

Profile
TB

Tomas Berg

Head of platform

Built the routing layer that the transparency claims rest on.

Prose

The long-form body style, for legal and editorial pages. Deliberately not @tailwindcss/typography — its defaults fight the design system tokens.

  • Lists, links and emphasis are all styled from tokens
  • Logical padding throughout, so it reads correctly in Arabic

End of the catalog

Twenty-three blocks, sixty layout variants.

Back to top