::::page-section{label="Eyebrow label" title="A section heading"}A section owns its own padding and bottom rule, so a page is just a stack ofthem. `tone="panel"` tints it, for alternating bands.:::card-grid{min="14rem"}::card{title="Plain card"}No accent. Body is Markdown, so links and `code` work.::::card{title="Green accent" accent="green"}The accent is painted rather than bordered, so it follows the bevel.::::card{title="Red accent" accent="red"}Use red for something actionable, green for something structural.:::::::::

::feature-grid- Conscientious assertions- Precise and fast browser window and tab control- Chainable selector strategies- Good shadow DOM support- Simple descriptors for mobile devices- Sending HTTP requests::

::btn-row:btn{to="/keywords" primary}[Primary action]:btn{to="/why"}[Secondary]:btn{to="https://github.com/MarketSquare/robotframework-browser"}[External, opens in a new tab]::::stat-row:stat{value="151"}[keywords]:stat{value="3"}[engines]:stat{value="0"}[sleeps]::

A plain fence renders as an editor with no chrome:```robot-replClick       text=Sign inGet Text    h1    ==    Welcome```Naming the file in the fence info string gives it a tab:```robot [login.robot]*** Settings ***Library    Browser*** Test Cases ***Sign In    Click    text=Sign in```Several fences inside `::code-tabs` become one editor with a tab each — thecode stays in the body, where it is readable and editable:::code-tabs```robot [login.robot]*** Test Cases ***Sign In    New Page     https://example.com/login    Fill Text    id=user    admin    Get Text     h1    ==    Welcome``````python [test_login.py]from Browser import Browserbrowser = Browser()def test_sign_in():    browser.new_page("https://example.com/login")    browser.fill_text("id=user", "admin")    browser.get_text("h1", "==", "Welcome")```::

::terminal-block---sessions:  - shell: bash    steps:      - command: pip install robotframework-browser        output: [Successfully installed robotframework-browser]      - command: rfbrowser init        status:          - { ok: true, text: chromium downloaded }          - { ok: false, text: webkit failed — see rfbrowser.log }  - shell: powershell    steps:      - command: py -m pip install robotframework-browser---::Unlike code, a terminal block stays structured. The prompt is not selectable,so copying yields runnable commands; output and result lines are styleddifferently because they *are* different. Supplying more than one shell givestabs that preselect the reader's own OS.

::split-panes---left: Beforeright: Afternotes: [No draggable divider, Works without JavaScript, Stacks below 640px]---#left```robot-replWait Until Element Is Visible    id=userSleep    1sInput Text    id=user    admin${text}=    Get Text    h1Should Be Equal    ${text}    Welcome```#right```robot-replFill Text    id=user    adminGet Text     h1    ==    Welcome```::Click ⤢ on either pane to expand it; ⤡ restores parity. The narrow pane isnever hidden — keeping both visible is the point.

::doc-noteWorth knowing, but not urgent.::::doc-note{kind="warning"}This will bite you. Used for footguns and data loss.::::doc-note{kind="aside"}Context or a dissenting view — not instruction.::::doc-table---head: [Component, Body is, Use for]rows:  - ['`::code-tabs`', 'Fenced blocks', 'Several files as tabs']  - ['`::terminal-block`', 'Frontmatter', 'Shell sessions']  - ['`::split-panes`', 'Two named slots', 'Anything side by side']---::

:::rotating-title---every: 3000titles:  - "Browser automation that doesn't flake."  - "Browser automation that doesn't suck."  - "Browser automation\nbroken where you want it."  - "Browser automation that sees shadow DOM."---:::Shown here at three seconds; the landing page holds each headline for five.Only the characters that differ from the previous headline scramble — which iswhy "Browser automation" sits still.The third headline shows a **deliberate line break**: `\n` in the string breaksthe line there rather than wherever the column runs out. It works the same wayin `::page-hero`'s `#title` and in `::page-section{title="…"}`, and it isrendered with `white-space: pre-line` rather than a `<br>`, so the headlinestays one string — which is what lets the scramble measure and diff it.

::comparison{left="comparison/cypress/test.robot" right="comparison/cypress/test.cy.js"}---notes:  - Each pane keeps its own language and its own horizontal scroll.  - The line count is stated as a measurement; the notes are prose, so they are set in body type rather than the display face.---::The filenames and languages come from the paths — a tab cannot disagree withthe file it shows. `notes` is optional; the line count is added for you.

:::page-hero{logo="/logo/browser.svg"}#titleA headline in the display face.#defaultThe default slot is the lede. Anything can follow it — buttons, figures, ora [link](/why) — and it all sits in the column beside the logo.::btn-row:btn{to="/docs/start/getting-started" primary}[Primary]:btn{to="/why"}[Secondary]:::::Two named slots: `#title` for the headline and the default slot for everythingelse. On a narrow screen the logo moves above the text rather than shrinkinginto the corner.

::core-team::These two are data components rather than layout: they read`content/contributors.json`, which `scripts/build-contributors.ts` generatesfrom the library's `.all-contributorsrc`. There is nothing to pass them.`::contributor-wall` renders every contributor with a filter by kind ofcontribution; `::contributor-wall{compact}` renders faces only, which is whatthe foot of the landing page uses. Neither is shown here — 206 avatars wouldmake this page about them rather than about the component.Both are islands, so the data never reaches the browser.