CardBook

CardBook is a book card component. It supports a cover image; when not provided, it shows an adaptive gradient background based on the title and centers the title as a placeholder.

Introduction

Suitable for courses, book lists, and reading recommendations.

Cases

Basic

Refactoring: Improving the Design of Existing Code

Martin Fowler

通过重构改善代码设计的经典著作，涵盖常见代码坏味道与重构手法。

查看详情

Grid

Clean Code

Robert C. Martin

通过可读性与整洁性提升代码质量的实践指南。

Design Patterns

Erich Gamma et al.

GoF 经典设计模式详解与实践。

Refactoring

Martin Fowler

重构改善既有代码设计的系统方法。

查看详情

You Don't Know JS Yet

Kyle Simpson

The Pragmatic Programmer

Andrew Hunt & David Thomas

务实的程序员实践与思维方式。

Working Effectively with Legacy Code

Michael Feathers

author

Author name.

Clean Code

Robert C. Martin

Unknown Masterpiece

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Clean Code"
  author="Robert C. Martin"
  cover={getExampleImage({ width: 240, height: 340 })}
/>

Clean Code

Robert C. Martin

Unknown Masterpiece

---
import { CardBook } from '@coffic/cosy-ui';
---

<CardBook title="Unknown Masterpiece" author="" />

class

Custom CSS class for overriding default styles.

Custom Class with Cover

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Custom Class with Cover"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  class="cosy:bg-gradient-to-r cosy:from-blue-50 cosy:to-indigo-100 cosy:border-2 cosy:border-blue-200"
/>

cover

Book cover image (local or remote). If omitted, a smart gradient background placeholder will be used.

Refactoring

Martin Fowler

Local Cover Example

Anon

No Cover Example

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<div>
  <CardBook
    title="Refactoring"
    author="Martin Fowler"
    cover={getExampleImage({ width: 240, height: 340 })}
  />
</div>

Refactoring

Martin Fowler

Local Cover Example

Anon

No Cover Example

Anon

---
import { CardBook } from '@coffic/cosy-ui';
import bookCover from '@/assets/book.png';
---

<CardBook title="Local Cover Example" author="Anon" cover={bookCover} />

Refactoring

Martin Fowler

Local Cover Example

Anon

No Cover Example

Anon

---
import { CardBook } from '@coffic/cosy-ui';
---

<CardBook title="No Cover Example" author="Anon" />

description

Brief description of the book.

Domain-Driven Design

Eric Evans

A comprehensive guide to domain-driven design, focusing on complex software projects.

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Domain-Driven Design"
  author="Eric Evans"
  cover={getExampleImage({ width: 240, height: 340 })}
  description="A comprehensive guide to domain-driven design, focusing on complex software projects."
/>

href

Link for navigation (shows a “View details” button).

Refactoring

Martin Fowler

查看详情

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Refactoring"
  author="Martin Fowler"
  cover={getExampleImage({ width: 240, height: 340 })}
  href="/books/refactoring"
/>

shadow

Card shadow style: none | sm | md | lg | xl.

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow None"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="none"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow SM"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="sm"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow MD"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="md"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow LG"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="lg"
/>

Shadow None

Anon

Shadow SM

Anon

Shadow MD

Anon

Shadow LG

Anon

Shadow XL

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Shadow XL"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
  shadow="xl"
/>

size

Card size: sm | md | lg.

小册子

Anon

中等读物

Anon

巨著

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  size="sm"
  title="小册子"
  author="Anon"
  cover={getExampleImage({ width: 180, height: 260 })}
/>

小册子

Anon

中等读物

Anon

巨著

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  size="md"
  title="中等读物"
  author="Anon"
  cover={getExampleImage({ width: 240, height: 340 })}
/>

小册子

Anon

中等读物

Anon

巨著

Anon

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  size="lg"
  title="巨著"
  author="Anon"
  cover={getExampleImage({ width: 300, height: 420 })}
/>

title

Book title (required).

Clean Code

Robert C. Martin

Patterns of Enterprise Application Architecture: Catalog of Patterns for Enterprise Software

Martin Fowler

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Clean Code"
  author="Robert C. Martin"
  cover={getExampleImage({ width: 240, height: 340 })}
/>

Clean Code

Robert C. Martin

Patterns of Enterprise Application Architecture: Catalog of Patterns for Enterprise Software

Martin Fowler

---
import { CardBook, getExampleImage } from '@coffic/cosy-ui';
---

<CardBook
  title="Patterns of Enterprise Application Architecture: Catalog of Patterns for Enterprise Software"
  author="Martin Fowler"
  cover={getExampleImage({ width: 240, height: 340 })}
/>