The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

More complex code

A simple inline code snippet var foo = "bar"; like this.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog

Supported languages

HTML

SCSS

.your-selector {
  border-radius: var(--token-border-radius-medium);
}

YAML

# translations/fr-fr.yaml
hds:
  components:
    common:
      error: Erreur

BASH

ember install ember-cli-sass

Single file + classic component

Examination period
Exam experience
Requirements for attending an exam
Your badge and certificate 
<div class="doc-accordion-flex-layout">
  <Hds::Text::Display @size="300">Examination period</Hds::Text::Display>
  <Hds::Button
    @text={{if (eq this.accordionState "open") "Collapse all" "Expand all"}}
    @icon={{if (eq this.accordionState "open") "unfold-close" "unfold-open"}}
    @color="tertiary"
    @size="small"
    {{on "click" this.toggleAccordionState}}
  />
</div>
<Hds::Accordion @forceState={{this.accordionState}} as |A|>
  <A.Item>
    <:toggle>Exam experience</:toggle>
    <:content>
      All certification exams are taken online with a live proctor, accommodating all locations and time zones. Online
      proctoring provides the same benefits of a physical test center while being more accessible to exam-takers.
    </:content>
  </A.Item>
  <A.Item>
    <:toggle>Requirements for attending an exam</:toggle>
    <:content>
      Before you register for an exam, review the Exam-taker Handbook to learn the requirements and policies for taking
      exams.
    </:content>
  </A.Item>
  <A.Item>
    <:toggle>Your badge and certificate</:toggle>
    <:content>
      HashiCorp has partnered with Credly to offer you a digital badge and downloadable certificate upon passing a
      certification exam.
    </:content>
  </A.Item>
</Hds::Accordion>

A long code group

Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

Code group default expanded

import type { TemplateOnlyComponent } from '@ember/component/template-only';

import { HdsAccordion } from '@hashicorp/design-system-components/components';

const LocalComponent: TemplateOnlyComponent = <template>
  <HdsAccordion as |A|>
    <A.Item @ariaLabel="Mostrar u ocultar">
      <:toggle>Elemento uno</:toggle>
      <:content>
        Contenido adicional para el elemento uno
      </:content>
    </A.Item>
  </HdsAccordion>
</template>;

export default LocalComponent;

Code group with execute=false

<div class="doc-accordion-flex-layout">
  <Hds::Text::Display @size="300">Examination period</Hds::Text::Display>
  <Hds::Button
    @text={{if (eq this.accordionState "open") "Collapse all" "Expand all"}}
    @icon={{if (eq this.accordionState "open") "unfold-close" "unfold-open"}}
    @color="tertiary"
    @size="small"
    {{on "click" this.toggleAccordionState}}
  />
</div>
<Hds::Accordion @forceState={{this.accordionState}} as |A|>
  <A.Item>
    <:toggle>Exam experience</:toggle>
    <:content>
      All certification exams are taken online with a live proctor, accommodating all locations and time zones. Online
      proctoring provides the same benefits of a physical test center while being more accessible to exam-takers.
    </:content>
  </A.Item>
  <A.Item>
    <:toggle>Requirements for attending an exam</:toggle>
    <:content>
      Before you register for an exam, review the Exam-taker Handbook to learn the requirements and policies for taking
      exams.
    </:content>
  </A.Item>
  <A.Item>
    <:toggle>Your badge and certificate</:toggle>
    <:content>
      HashiCorp has partnered with Credly to offer you a digital badge and downloadable certificate upon passing a
      certification exam.
    </:content>
  </A.Item>
</Hds::Accordion>

On this page: