Details

.details is for <details> and <summary> elements.

Applicable Elements

• details

Basic Usage

<details class="details">
  <summary>How should I store sashimi?</summary>
  <p>
    Keep sashimi in the coldest part of the refrigerator until serving.<br />
    Use a sealed container and enjoy it on the day of purchase.
  </p>
</details>

<details class="details">
  <summary>What should I check before serving sashimi?</summary>
  <p>Fresh sashimi should have a clean aroma and a firm, moist texture.</p>
  <ul>
    <li>Avoid pieces that look dull or discolored.</li>
    <li>Do not serve fish with a sour smell.</li>
  </ul>
</details>

Combination

Place .icon at the beginning of <summary> to align the content with the summary text.

<details class="details">
  <summary>
    <svg class="icon"><title>info</title><use href="info.svg#root"></use></svg>
    Why is sashimi served chilled?
  </summary>
  <p>
    A cool temperature preserves the fish's texture and clean flavor.<br />
    Take it out of the refrigerator a few minutes before serving.
  </p>
</details>

<details class="details">
  <summary>
    <svg class="icon"><title>recommendation</title><use href="diamond.svg#root"></use></svg>
    Which slice should I taste first?
  </summary>
  <p>
    Begin with delicate white fish such as sea bream.<br />
    Finish with richer cuts such as salmon or fatty tuna.
  </p>
</details>