Expand

html

<div class="expand-demo" style="--accent:#BFD9F2;">
  <p class="expand-demo__text is-clamped" style="--lines:2;">This release adds keyboard shortcuts throughout the app, a redesigned settings panel, faster search indexing, and a dozen small fixes reported by the community over the last month.</p>
  <button type="button" class="expand-demo__toggle" aria-expanded="false">{{unless expanded}}Read more

tailwind

<div style="width:320px;font-family:system-ui,sans-serif;color:#241430">
  <p class="expand-tw__text is-clamped leading-normal" style="--lines:2">This release adds keyboard shortcuts throughout the app, a redesigned settings panel, faster search indexing, and a dozen small fixes reported by the community over the last month.</p>
  <button type="button" aria-expanded="false" class="mt-2 border-0 bg-transparent font-bold cursor-pointer p-0 text-[13px]" style="color:#BFD9F2">{{unless expanded}}Read more

react

import { useState } from "react";

export function Expand({
  text = "This release adds keyboard shortcuts throughout the app, a redesigned settings panel, faster search indexing, and a dozen small fixes reported by the community over the last month.",
  expanded: initialExpanded = false,
  lines = 2,
  accent = "#BFD9F2",
}) {
  const [expanded, setExpanded] = useState(initialExpanded);
  return (
    <div style={{ width: 320, fontFamily: "system-ui, sans-serif", fontSize: 14, lineHeight: 1.5, color: "#241430" }}>
      <p style={expanded ? {} : { display: "-webkit-box", WebkitBoxOrient: "vertical", WebkitLineClamp: lines, overflow: "hidden" }}>{text}</p>
      <button type="button" aria-expanded={expanded} onClick={() => setExpanded((e) => !e)}
        style={{ marginTop: 8, border: "none", background: "transparent", color: accent, fontWeight: 700, cursor: "pointer", padding: 0, fontSize: 13 }}>
        {expanded ? "Show less" : "Read more"}
      </button>
    </div>
  );
}