Code | NDS - Vanilla National Design System

Direct Code Block

Standalone code blocks with copy button, used for API documentation and code snippets

Basic Code Block


<div class="nds-card nds-stroke">
  <div class="nds-card-content">
    <h3 class="nds-card-title">Card Title</h3>
    <p class="nds-card-description">Card description text</p>
  </div>
</div>

Code Block with Line Numbers


const alert = NDS.Alert.create({
    variant: 'success',
    title: 'Success',
    description: 'Your changes have been saved.',
    target: '#alert-container'
});

NDS.Alert.create({
    variant: 'info',
    title: 'Update Available',
    description: 'A new version is available.',
    target: '#container',
    closable: true,
    shadow: true
});

Expandable Code Block


async function handleFormSubmit(form) {
    const alertContainer = document.getElementById('form-alerts');

    // Clear previous alerts
    NDS.Alert.dismissAll(alertContainer);

    try {
        const response = await submitForm(form);

        if (response.success) {
            NDS.Alert.create({
                variant: 'success',
                description: 'Form submitted successfully!',
                target: alertContainer,
                title: 'Success',
                prepend: true
            });
        } else {
            NDS.Alert.create({
                variant: 'error',
                description: response.message,
                target: alertContainer,
                title: 'Submission Failed'
            });
        }
    } catch (error) {
        NDS.Alert.create({
            variant: 'error',
            description: 'An unexpected error occurred.',
            target: alertContainer,
            title: 'Error'
        });
    }
}

Tabbed Code Block

Code blocks with tab navigation for showing multiple languages or file types

Single Tab


<button class="nds-btn nds-primary nds-lg">
  <i class="nds-icon nds-hgi-plus-sign" aria-hidden="true"></i>
  <span class="nds-label">Button Text</span>
</button>

Multiple Tabs


<div class="nds-alert nds-card" data-status="success">
  <span class="nds-feedback nds-alert-icon nds-outline">
    <span class="nds-feedback-icon">
      <i class="nds-icon" aria-hidden="true"></i>
    </span>
  </span>
  <div class="nds-alert-content">
    <div class="nds-alert-text">
      <span class="nds-alert-title">Success</span>
      <p class="nds-alert-description">Operation completed.</p>
    </div>
  </div>
</div>


NDS.Alert.create({
    variant: 'success',
    title: 'Success',
    description: 'Operation completed.',
    target: '#container'
});


.nds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}


<div class="demo-code">
<div class="nds-tabs nds-code nds-divided">
  <div class="nds-tab-list-container nds-scroll-more">
    <nav class="nds-tab-list nds-scroll-more-content oneRowContent" role="tablist" aria-label="Tab navigation">
      <button class="nds-btn nds-subtle nds-tab" role="tab" aria-selected="true"
        aria-controls="panel-html" id="tab-html">
        <span class="nds-tab-label">HTML</span>
      </button>
      <button class="nds-btn nds-subtle nds-tab" role="tab" aria-selected="false"
        aria-controls="panel-js" id="tab-js">
        <span class="nds-tab-label">JavaScript</span>
      </button>
    </nav>
  </div>
  <div class="nds-tab-content">
    <div class="nds-tab-panel code-example" role="tabpanel" id="panel-html"
      aria-labelledby="tab-html">
      <div class="nds-code-action">
        <button class="nds-btn nds-subtle nds-copy" aria-label="Copy code example">
          <i class="nds-icon nds-hgi-copy-01"></i>
        </button>
      </div>
      <code class="lang-html code">
        <!-- HTML code here -->
      </code>
    </div>
    <div class="nds-tab-panel code-example" role="tabpanel" id="panel-js"
      aria-labelledby="tab-js" hidden>
      <div class="nds-code-action">
        <button class="nds-btn nds-subtle nds-copy" aria-label="Copy code example">
          <i class="nds-icon nds-hgi-copy-01"></i>
        </button>
      </div>
      <code class="lang-javascript code">
        // JavaScript code here
      </code>
    </div>
  </div>
</div>
</div>

Hidden Code in Demo Cards

When used inside demo cards, tabbed code blocks start with the hidden attribute. The showcase JavaScript reveals them with a toggle button. Click the code icon below any demo card to see this in action.

Language Classes

Supported language identifiers for the code element

Available Language Classes

Class	Language	Usage
lang-html	HTML / XML	Markup and template examples
lang-css	CSS / SCSS	Stylesheet examples
lang-javascript	JavaScript	Script and API examples

Usage Guidelines

Structure

All code blocks must be wrapped in .nds-code.nds-expandable
Use .nds-code-action for the copy button container
Wrap the code element inside div.nds-expandable-content
Add language class to the code element (lang-html, lang-css, lang-javascript)

Direct vs Tabbed

Direct: .nds-code.nds-expandable > .nds-expandable-content > code
Tabbed: .nds-tabs.nds-code.nds-divided > .nds-tab-panel > code
Add hidden attribute when tabbed code is inside demo cards
Tabbed variant inherits tab component behavior

Features

Add line-numbers class for numbered lines
.nds-expandable enables auto show/hide for long code
Copy button auto-copies content and shows "Copied" feedback
Code is always rendered LTR regardless of page direction

Best Practices

Keep code examples concise and focused
Use expandable for code longer than ~15 lines
Match tab labels to the actual language shown
Ensure all panel IDs and tab IDs are unique per page

CSS Implementation

Core styles for the code block component


.nds-code {
    margin: var(--spacing-xl);
    border: 1px solid var(--border-neutral-secondary);
    border-radius: var(--radius-md);
    padding: 0;
    position: relative;
    overflow: clip;
}

.nds-code .nds-code-action {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--alpha-white-70);
    z-index: 2;
}

.nds-code code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    font-weight: 600;
    direction: ltr;
    text-align: left;
    white-space: pre;
    padding: var(--spacing-xl) 0;
}

/* Line numbers variant */
.nds-code code.line-numbers {
    counter-reset: line;
    display: flex;
    flex-direction: column;
}

.nds-code code.line-numbers .code-line::before {
    counter-increment: line;
    content: counter(line);
    width: 3em;
    margin-right: 1rem;
    color: var(--colors-neutral-500);
    font-size: var(--typo-text-xs-FS);
}