Lorem ipsum dolor sit amet consectetur adipiscing elit

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

Fully themable

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Just CSS, no runtime JavaScript

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Simple yet elegant design

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Nothing fancy, it just works.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa
30%OFF2 rooms left

Sheraton Okinawa Sunmarina Resort

1 night, 2 adults

¥62,000

import { CalendarDaysIcon } from "@heroicons/react/24/outline";


import { Button } from "@camome/core/Button";
import { Tag } from "@camome/core/Tag";


import styles from "./Card.module.scss";


export default function Card() {
  return (
    <section className={styles.container}>
      <img
        src="/demo/okinawa-hotel.jpg"
        alt="Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa"
        className={styles.img}
      />
      <div className={styles.content}>
        <div className={styles.tags}>
          <Tag size="sm" colorScheme="success">
            30%OFF
          </Tag>
          <Tag size="sm" colorScheme="warn">
            2 rooms left
          </Tag>
        </div>
        <h3 className={styles.title}>Sheraton Okinawa Sunmarina Resort</h3>
        <div className={styles.row}>
          <div className={styles.priceWrap}>
            <small className={styles.small}>1 night, 2 adults</small>
            <p className={styles.price}>¥62,000</p>
          </div>
          <Button
            size="sm"
            rightIcon={<CalendarDaysIcon />}
            className={styles.button}
          >
            Book now
          </Button>
        </div>
      </div>
    </section>
  );
}

Fully themable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Customize theme
Avatar image

Jean Doe

@jean_doePro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Simply override.

It's not that !important

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

.Button {
  border-radius: var(--cmm-radius-full);
  background: linear-gradient(
    to right,
    hsl(240deg 60% 40%) 0%,
    hsl(300deg 80% 40%) 100%
  );
}