<Card>
  <CardHeader className="code-header">
    <h5>تنوع رنگی دراپ‌داون</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button color="primary">اصلی</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">باز و بسته کردن دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button color="secondary">فرعی</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">باز و بسته کردن دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</Card>

<Card>
  <CardHeader className="code-header">
    <h5>تنوع دراپ‌داون Outline</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="primary">اصلی</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">باز و بسته کردن دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="secondary">فرعی</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">باز و بسته کردن دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</Card>

<Card>
  <CardHeader className="code-header">
    <h5>تنوع دراپ‌داون</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="primary">اصلی</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">باز و بسته کردن دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="secondary">فرعی</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">باز و بسته کردن دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* ادامه برای سایر حالت‌ها... */}
  </CardBody>
</Card>

<Card>
  <CardHeader className="code-header">
    <h5>تنوع دراپ‌داون Outline</h5>
  </CardHeader>
  <CardBody className="d-flex flex-wrap gap-2">
    {/* Primary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="primary">اصلی</Button>
      <Dropdown isOpen={dropdownOpen1} toggle={toggle1}>
        <DropdownToggle outline color="primary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">تغییر حالت دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Secondary */}
    <ButtonGroup className="btn-rtl">
      <Button outline color="secondary">فرعی</Button>
      <Dropdown isOpen={dropdownOpen2} toggle={toggle2}>
        <DropdownToggle outline color="secondary" className="dropdown-toggle-split p-2">
          <span className="visually-hidden">تغییر حالت دراپ‌داون</span>
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem href="#">اقدام</DropdownItem>
          <DropdownItem href="#">اقدام دیگر</DropdownItem>
          <DropdownItem href="#">گزینه دیگر در اینجا</DropdownItem>
          <DropdownItem divider />
          <DropdownItem href="#">لینک جدا شده</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </ButtonGroup>

    {/* Repeat for other variants... */}
  </CardBody>
</Card>