Skip to content
Toyota Motor Europe DXP Reference Guide

Semantic Components

Semantic components consist of CSS, JS, and HTML markup.

Buttons

Section titled “Buttons”

Disabled

Section titled “Disabled”

This is to disable a button in any context

CONFIGURE YOUR RX 
<div class="cmp-btn btn-primary">
  <a href="#" class="btn-text disabled">
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </a>
</div>
<div class="cmp-btn btn-secondary">
  <button class="btn-text disabled">
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </button>
</div>
<div class="cmp-btn btn-tertiary">
  <button class="btn-text" disabled>
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </button>
</div>
KSS Source

Gradient

Section titled “Gradient”

Use this class for buttons with gradient borders. Shouldn't be used in any scenario

Learn more
<button class="cmp-btn mx-0 l-micro-text btn-gradient-outline">
  <span class="btn-text t-base-text l-micro-text">Learn more</span>
</button>
<a href="#" class="cmp-btn mx-0 l-micro-text btn-gradient-outline">
  <span class="btn-text t-base-text l-micro-text">Learn more</span>
</a>
KSS Source
Section titled “Link”
KSS Source
Section titled “Link with arrow”
KSS Source

Primary

Section titled “Primary”

This is to generate a primary button in any context

CONFIGURE YOUR RX 
<div class="cmp-btn btn-primary">
  <a href="#" class="btn-text">
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </a>
</div>
KSS Source

Secondary

Section titled “Secondary”

This is to create a secondary button in any context

CONFIGURE YOUR RX 
<div class="cmp-btn btn-secondary">
  <a href="#" class="btn-text">
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </a>
</div>
KSS Source

Tertiary

Section titled “Tertiary”

This is to create a tertiary button in any context

CONFIGURE YOUR RX 
<div class="cmp-btn btn-tertiary">
  <a href="#" class="btn-text">
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </a>
</div>
<div class="cmp-btn btn-tertiary">
  <button class="btn-text">
    <span class="btn-text t-base-text l-cta-text">CONFIGURE YOUR RX</span>
  </button>
</div>
KSS Source

Control

Section titled “Control”

Small

Section titled “Small”

Use this class for default button position: relative; allows the link inside to be stretched to sizes of this component

<button class="cmp-control control-reset">
  <span class="icon icon-cross"></span>
</button>
<a href="#" class="cmp-control control-reset">
  <span class="icon icon-cross"></span>
</a>
KSS Source

Large

Section titled “Large”

Use this class for a larger control

<button class="cmp-control control-reset large">
  <span class="icon icon-cross"></span>
</button>
<a href="#" class="cmp-control control-reset large">
  <span class="icon icon-cross"></span>
</a>
KSS Source

Search Icon

Section titled “Search Icon”

Use this class for default button position: relative; allows the link inside to be stretched to sizes of this component

Search 
<div class="container">
  <div class="row">
    <div class="cmp-searchicon" data-tippy-content="myButton">
      <a
        href="#"
        class="cmp-btn btn-with-icon left m-0 cmp-searchicon-search l-sub-delta-text"
      >
        <i class="dxp-icon icon-Search-small"></i>
        <span class="ml-2">Search</span>
      </a>
      <div class="d-none cmp-searchicon-overlay position-fixed">
        <div class="container">
          <!--/* add mt-3 class for Toyota to row below! */-->
          <div class="row">
            <div class="d-none d-md-inline-block"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
KSS Source

Tooltip

Section titled “Tooltip”

Use this data attribute "data-tippy-content" and pass the content as a string or expression

<button
  class="dxp-icon icon-Info-small"
  data-tippy-content="Here's an <i>example</i> of a tooltip with some <strong>html</strong> in it"
></button>
KSS Source

Collapse

Section titled “Collapse”

Generic show more/show less Component based on Bootstrap Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<p class="d-flex">
  <a
    class="cmp-btn t-base-text l-micro-text btn-secondary"
    data-toggle="collapse"
    href="#collapseExample"
    role="button"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    <span class="collapsed btn-text">
      Show More
      <i class="icon icon-chevron-down"></i>
    </span>
    <span class="expanded btn-text">
      Show Less
      <i class="icon icon-chevron-up"></i>
    </span>
  </a>
  <button
    class="cmp-btn t-base-text l-micro-text btn-secondary"
    type="button"
    data-toggle="collapse"
    data-target="#collapseExample"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    <span class="collapsed btn-text">
      Show More
      <i class="icon icon-chevron-down"></i>
    </span>
    <span class="expanded btn-text">
      Show Less
      <i class="icon icon-chevron-up"></i>
    </span>
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
    richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
    anderson cred nesciunt sapiente ea proident.
  </div>
</div>
KSS Source

Loader

Section titled “Loader”

This loading class is usefull for temporarily showing a loader wrapping some content until the content is loaded. Any content inside the '.loading' element is hidden unless the loading element has the class '.transparent'. The height of the loading content should be handled context-wise.

.loading

Loading content that is hidden
<div class="loading"><span>Loading content that is hidden</span></div>
KSS Source