|
|
| 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> |