Template:Tabs: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
No edit summary
Tag: Reverted
No edit summary
Tag: Manual revert
 
Line 99: Line 99:
</div>
</div>
</div>
</div>
<!-- Establish a right-to-left reading context -->
<div dir="rtl">
  <!-- Outer element is a <div>. -->
  <div class="cdx-info-chip">
    <!-- Text element. -->
    <span class="cdx-info-chip--text">
      <!-- Chip text -->
      Right-to-left Chip
    </span>
  </div>
</div>
<div>
  <button class="cdx-button cdx-button--action-progressive">
    Progressive normal button
  </button>
</div>
<div>
  <button
    class="cdx-button cdx-button--action-progressive cdx-button--weight-primary"
  >
    Progressive primary button
  </button>
</div>
<div>
  <button
    class="cdx-button cdx-button--action-progressive cdx-button--weight-quiet"
  >
    Progressive quiet button
  </button>
</div>
<div
  class="cdx-message cdx-message--block cdx-message--notice"
  aria-live="polite"
>
  <span class="cdx-message__icon"></span>
  <div class="cdx-message__content">This is a notice message.</div>
</div>
<div
  class="cdx-message cdx-message--block cdx-message--warning"
  aria-live="polite"
>
  <span class="cdx-message__icon"></span>
  <div class="cdx-message__content">This is a warning message.</div>
</div>
<div class="cdx-message cdx-message--block cdx-message--error" role="alert">
  <span class="cdx-message__icon"></span>
  <div class="cdx-message__content">This is an error message.</div>
</div>
<div
  class="cdx-message cdx-message--block cdx-message--success"
  aria-live="polite"
>
  <span class="cdx-message__icon"></span>
  <div class="cdx-message__content">This is a success message.</div>
</div>
<p>
  <span class="cdx-demo-css-icon--code"></span>
  Code
</p>
<p>
  <span class="cdx-demo-css-icon--map-pin"></span>
  Map pin
</p>
<details class="cdx-accordion">
  <summary>
    <h3 class="cdx-accordion__header">
      <span class="cdx-accordion__header__title"> Accordion 1 </span>
    </h3>
  </summary>
  <div class="cdx-accordion__content">
    <p>Lorem ipsum dolor sic amet...</p>
  </div>
</details>
<details class="cdx-accordion">
  <summary>
    <h3 class="cdx-accordion__header">
      <span class="cdx-accordion__header__title"> Accordion 2 </span>
    </h3>
  </summary>
  <div class="cdx-accordion__content">
    <p>Lorem ipsum dolor sic amet...</p>
  </div>
</details>
<details class="cdx-accordion">
  <summary>
    <h3 class="cdx-accordion__header">
      <span class="cdx-accordion__header__title"> Accordion 2 </span>
    </h3>
  </summary>
  <div class="cdx-accordion__content">
    <p>Lorem ipsum dolor sic amet...</p>
  </div>
</details>
</html>
</html>

Latest revision as of 15:28, 28 February 2024

Tab 2 content