logo
English

导航菜单

Documents

CardCourse

Introduction

The CardCourse component is used to display course information with dynamic icons and gradient backgrounds, suitable for course lists, feature pages, and other scenarios where courses need to be displayed uniformly.

Component features:

  • Supports dynamic icons that automatically match corresponding icons based on course names
  • Gradient background design with different background colors for different course types
  • Responsive design that adapts to different screen sizes
  • Hover animation effects to enhance user experience
  • Supports Chinese and English interface switching
  • Supports icon size and content padding configuration

Cases

Single Course Display

React Development

Learn the fundamentals of React and build modern web applications.

Start Learning

Vue.Js Mastery

Master Vue.js and create interactive and high-performance user interfaces.

Start Learning

Angular Essentials

Get started with Angular and build powerful, scalable single-page applications.

Start Learning

Node.Js For Beginners

A comprehensive guide to building backend services with Node.js and Express.

Start Learning

Python Programming

From basic syntax to advanced concepts, this course covers everything you need to know about Python.

Start Learning

Data Structures & Algorithms

Understand fundamental data structures and algorithms to write efficient code.

Start Learning

Multiple Courses

Svelte Crash Course

Learn the basics of Svelte and build reactive web apps.

Start Learning

Go For Beginners

An introduction to the Go programming language for backend development.

Start Learning

Rust Fundamentals

Explore the power of Rust for systems programming and performance-critical applications.

Start Learning

Python Programming

Learn the basics of Python and build your first Python application.

Start Learning

Props

contentPadding

Content area padding configuration, supports 8 sizes (none, xs, sm, md, lg, xl, 2xl, 3xl), can be flexibly adjusted according to actual needs:

无内边距

开始学习

极小内边距

开始学习

小内边距

开始学习

中等内边距

开始学习

大内边距

开始学习

超大内边距

开始学习

2XL 内边距

开始学习

3XL 内边距

开始学习

无内边距

开始学习

极小内边距

开始学习

小内边距

开始学习

中等内边距

开始学习

大内边距

开始学习

超大内边距

开始学习

2xl 内边距

开始学习

3xl 内边距

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="无内边距"
  lang="zh"
  href="/courses/padding-none"
  contentPadding="none"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="极小内边距"
  lang="zh"
  href="/courses/padding-xs"
  contentPadding="xs"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="小内边距"
  lang="zh"
  href="/courses/padding-sm"
  contentPadding="sm"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="中等内边距"
  lang="zh"
  href="/courses/padding-md"
  contentPadding="md"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="大内边距"
  lang="zh"
  href="/courses/padding-lg"
  contentPadding="lg"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="超大内边距"
  lang="zh"
  href="/courses/padding-xl"
  contentPadding="xl"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="2XL 内边距"
  lang="zh"
  href="/courses/padding-2xl"
  contentPadding="2xl"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="3XL 内边距"
  lang="zh"
  href="/courses/padding-3xl"
  contentPadding="3xl"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="无内边距"
		lang="zh"
		href="/courses/padding-none"
		content-padding="none"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="极小内边距"
		lang="zh"
		href="/courses/padding-xs"
		content-padding="xs"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="小内边距"
		lang="zh"
		href="/courses/padding-sm"
		content-padding="sm"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="中等内边距"
		lang="zh"
		href="/courses/padding-md"
		content-padding="md"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="大内边距"
		lang="zh"
		href="/courses/padding-lg"
		content-padding="lg"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="超大内边距"
		lang="zh"
		href="/courses/padding-xl"
		content-padding="xl"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="2xl 内边距"
		lang="zh"
		href="/courses/padding-2xl"
		content-padding="2xl"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="3xl 内边距"
		lang="zh"
		href="/courses/padding-3xl"
		content-padding="3xl"
	/>
</template>

courseName

Course title, required property, used to display the course name:

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="React 基础教程"
  lang="zh"
  href="/courses/react-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Golang 入门"
  description="从零基础到实战，系统掌握 Go 语言开发。"
  lang="zh"
  href="/courses/golang-intro"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Astro for Beginners"
  description="A quick start to building websites with Astro."
  lang="en"
  href="/courses/astro-beginner"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Vue.js 基础教程"
  description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
  lang="zh"
  href="/courses/vue-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="PHP 后端开发"
  description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
  lang="zh"
  href="/courses/php-backend"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="JavaScript 进阶"
  description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
  lang="zh"
  href="/courses/javascript-advanced"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Java 企业级开发"
  description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
  lang="zh"
  href="/courses/java-enterprise"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="计算机网络基础"
  description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
  lang="zh"
  href="/courses/computer-networks"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="高等数学"
  description="系统学习微积分、线性代数等高等数学核心内容。"
  lang="zh"
  href="/courses/higher-mathematics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Swift UI 开发"
  description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
  lang="zh"
  href="/courses/swift-ui"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Caddy 服务器配置"
  description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
  lang="zh"
  href="/courses/caddy-server"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Kong API 网关"
  description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
  lang="zh"
  href="/courses/kong-gateway"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="使用 Laravel 构建网站"
  description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
  lang="zh"
  href="/courses/laravel-website"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Golang 入门"
		description="从零基础到实战，系统掌握 Go 语言开发。"
		lang="zh"
		href="/courses/golang-intro"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Astro for Beginners"
		description="A quick start to building websites with Astro."
		lang="en"
		href="/courses/astro-beginner"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Vue.js 基础教程"
		description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
		lang="zh"
		href="/courses/vue-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="PHP 后端开发"
		description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
		lang="zh"
		href="/courses/php-backend"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="JavaScript 进阶"
		description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
		lang="zh"
		href="/courses/javascript-advanced"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Java 企业级开发"
		description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
		lang="zh"
		href="/courses/java-enterprise"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="计算机网络基础"
		description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
		lang="zh"
		href="/courses/computer-networks"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="高等数学"
		description="系统学习微积分、线性代数等高等数学核心内容。"
		lang="zh"
		href="/courses/higher-mathematics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Swift UI 开发"
		description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
		lang="zh"
		href="/courses/swift-ui"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Caddy 服务器配置"
		description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
		lang="zh"
		href="/courses/caddy-server"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Kong API 网关"
		description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
		lang="zh"
		href="/courses/kong-gateway"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="使用 Laravel 构建网站"
		description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
		lang="zh"
		href="/courses/laravel-website"
	/>
</template>

description

Course description, optional property, used to display detailed course information:

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="React 基础教程"
  lang="zh"
  href="/courses/react-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Golang 入门"
  description="从零基础到实战，系统掌握 Go 语言开发。"
  lang="zh"
  href="/courses/golang-intro"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Astro for Beginners"
  description="A quick start to building websites with Astro."
  lang="en"
  href="/courses/astro-beginner"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Vue.js 基础教程"
  description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
  lang="zh"
  href="/courses/vue-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="PHP 后端开发"
  description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
  lang="zh"
  href="/courses/php-backend"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="JavaScript 进阶"
  description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
  lang="zh"
  href="/courses/javascript-advanced"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Java 企业级开发"
  description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
  lang="zh"
  href="/courses/java-enterprise"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="计算机网络基础"
  description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
  lang="zh"
  href="/courses/computer-networks"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="高等数学"
  description="系统学习微积分、线性代数等高等数学核心内容。"
  lang="zh"
  href="/courses/higher-mathematics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Swift UI 开发"
  description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
  lang="zh"
  href="/courses/swift-ui"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Caddy 服务器配置"
  description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
  lang="zh"
  href="/courses/caddy-server"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Kong API 网关"
  description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
  lang="zh"
  href="/courses/kong-gateway"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="使用 Laravel 构建网站"
  description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
  lang="zh"
  href="/courses/laravel-website"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Golang 入门"
		description="从零基础到实战，系统掌握 Go 语言开发。"
		lang="zh"
		href="/courses/golang-intro"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Astro for Beginners"
		description="A quick start to building websites with Astro."
		lang="en"
		href="/courses/astro-beginner"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Vue.js 基础教程"
		description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
		lang="zh"
		href="/courses/vue-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="PHP 后端开发"
		description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
		lang="zh"
		href="/courses/php-backend"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="JavaScript 进阶"
		description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
		lang="zh"
		href="/courses/javascript-advanced"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Java 企业级开发"
		description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
		lang="zh"
		href="/courses/java-enterprise"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="计算机网络基础"
		description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
		lang="zh"
		href="/courses/computer-networks"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="高等数学"
		description="系统学习微积分、线性代数等高等数学核心内容。"
		lang="zh"
		href="/courses/higher-mathematics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Swift UI 开发"
		description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
		lang="zh"
		href="/courses/swift-ui"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Caddy 服务器配置"
		description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
		lang="zh"
		href="/courses/caddy-server"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Kong API 网关"
		description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
		lang="zh"
		href="/courses/kong-gateway"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="使用 Laravel 构建网站"
		description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
		lang="zh"
		href="/courses/laravel-website"
	/>
</template>

href

Course link, required property, the target address to jump to when clicking the card:

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="React 基础教程"
  lang="zh"
  href="/courses/react-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Golang 入门"
  description="从零基础到实战，系统掌握 Go 语言开发。"
  lang="zh"
  href="/courses/golang-intro"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Astro for Beginners"
  description="A quick start to building websites with Astro."
  lang="en"
  href="/courses/astro-beginner"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Vue.js 基础教程"
  description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
  lang="zh"
  href="/courses/vue-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="PHP 后端开发"
  description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
  lang="zh"
  href="/courses/php-backend"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="JavaScript 进阶"
  description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
  lang="zh"
  href="/courses/javascript-advanced"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Java 企业级开发"
  description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
  lang="zh"
  href="/courses/java-enterprise"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="计算机网络基础"
  description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
  lang="zh"
  href="/courses/computer-networks"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="高等数学"
  description="系统学习微积分、线性代数等高等数学核心内容。"
  lang="zh"
  href="/courses/higher-mathematics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Swift UI 开发"
  description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
  lang="zh"
  href="/courses/swift-ui"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Caddy 服务器配置"
  description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
  lang="zh"
  href="/courses/caddy-server"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Kong API 网关"
  description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
  lang="zh"
  href="/courses/kong-gateway"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="使用 Laravel 构建网站"
  description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
  lang="zh"
  href="/courses/laravel-website"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Golang 入门"
		description="从零基础到实战，系统掌握 Go 语言开发。"
		lang="zh"
		href="/courses/golang-intro"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Astro for Beginners"
		description="A quick start to building websites with Astro."
		lang="en"
		href="/courses/astro-beginner"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Vue.js 基础教程"
		description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
		lang="zh"
		href="/courses/vue-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="PHP 后端开发"
		description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
		lang="zh"
		href="/courses/php-backend"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="JavaScript 进阶"
		description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
		lang="zh"
		href="/courses/javascript-advanced"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Java 企业级开发"
		description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
		lang="zh"
		href="/courses/java-enterprise"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="计算机网络基础"
		description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
		lang="zh"
		href="/courses/computer-networks"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="高等数学"
		description="系统学习微积分、线性代数等高等数学核心内容。"
		lang="zh"
		href="/courses/higher-mathematics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Swift UI 开发"
		description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
		lang="zh"
		href="/courses/swift-ui"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Caddy 服务器配置"
		description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
		lang="zh"
		href="/courses/caddy-server"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Kong API 网关"
		description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
		lang="zh"
		href="/courses/kong-gateway"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="使用 Laravel 构建网站"
		description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
		lang="zh"
		href="/courses/laravel-website"
	/>
</template>

iconSize

Icon size configuration, supports four preset sizes (sm, md, lg, xl), defaults to md:

React 基础教程

开始学习

Vue.Js 进阶

开始学习

JavaScript 高级

开始学习

TypeScript 实战

开始学习

React 基础教程

开始学习

React 基础教程

开始学习

React 基础教程

开始学习

React 基础教程

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="React 基础教程"
  lang="zh"
  href="/courses/react-basics"
  iconSize="sm"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Vue.js 进阶"
  lang="zh"
  href="/courses/vue-advanced"
  iconSize="md"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="JavaScript 高级"
  lang="zh"
  href="/courses/javascript-advanced"
  iconSize="lg"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="TypeScript 实战"
  lang="zh"
  href="/courses/typescript-practice"
  iconSize="xl"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
		icon-size="sm"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
		icon-size="md"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
		icon-size="lg"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
		icon-size="xl"
	/>
</template>

keywords

Icon keyword array, used for icon matching, optional property:

AI 编程入门

开始学习

AI 编程入门

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="AI 编程入门"
  keywords={['人工智能', '机器学习', 'Python', '深度学习']}
  lang="zh"
  href="/courses/ai-programming"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="AI 编程入门"
		lang="zh"
		href="/courses/ai-programming"
		:keywords="['人工智能', '机器学习', 'Python', '深度学习']"
	/>
</template>

lang

Language setting, supports “en” and “zh” languages, affects button text display:

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习

React 基础教程

开始学习

Golang 入门

从零基础到实战，系统掌握 Go 语言开发。

开始学习

Astro For Beginners

A quick start to building websites with Astro.

Start Learning

Vue.Js 基础教程

从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。

开始学习

PHP 后端开发

学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。

开始学习

JavaScript 进阶

深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。

开始学习

Java 企业级开发

学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。

开始学习

计算机网络基础

学习 TCP/IP 协议栈，理解网络通信原理和网络安全。

开始学习

高等数学

系统学习微积分、线性代数等高等数学核心内容。

开始学习

Swift UI 开发

学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。

开始学习

Caddy 服务器配置

学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。

开始学习

Kong API 网关

学习 Kong 微服务网关配置，实现 API 管理和安全控制。

开始学习

使用 Laravel 构建网站

学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。

开始学习
---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="React 基础教程"
  lang="zh"
  href="/courses/react-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Golang 入门"
  description="从零基础到实战，系统掌握 Go 语言开发。"
  lang="zh"
  href="/courses/golang-intro"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Astro for Beginners"
  description="A quick start to building websites with Astro."
  lang="en"
  href="/courses/astro-beginner"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Vue.js 基础教程"
  description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
  lang="zh"
  href="/courses/vue-basics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="PHP 后端开发"
  description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
  lang="zh"
  href="/courses/php-backend"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="JavaScript 进阶"
  description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
  lang="zh"
  href="/courses/javascript-advanced"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Java 企业级开发"
  description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
  lang="zh"
  href="/courses/java-enterprise"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="计算机网络基础"
  description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
  lang="zh"
  href="/courses/computer-networks"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="高等数学"
  description="系统学习微积分、线性代数等高等数学核心内容。"
  lang="zh"
  href="/courses/higher-mathematics"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Swift UI 开发"
  description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
  lang="zh"
  href="/courses/swift-ui"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Caddy 服务器配置"
  description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
  lang="zh"
  href="/courses/caddy-server"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="Kong API 网关"
  description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
  lang="zh"
  href="/courses/kong-gateway"
/>

---



import { CardCourse } from "@coffic/cosy-ui";
---

<CardCourse
  courseName="使用 Laravel 构建网站"
  description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
  lang="zh"
  href="/courses/laravel-website"
/>

<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="React 基础教程"
		lang="zh"
		href="/courses/react-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Golang 入门"
		description="从零基础到实战，系统掌握 Go 语言开发。"
		lang="zh"
		href="/courses/golang-intro"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Astro for Beginners"
		description="A quick start to building websites with Astro."
		lang="en"
		href="/courses/astro-beginner"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Vue.js 基础教程"
		description="从零开始学习 Vue.js 框架，掌握响应式数据绑定和组件化开发。"
		lang="zh"
		href="/courses/vue-basics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="PHP 后端开发"
		description="学习 PHP 语言基础，掌握 Laravel 框架开发 Web 应用。"
		lang="zh"
		href="/courses/php-backend"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="JavaScript 进阶"
		description="深入学习 JavaScript ES6+ 特性，掌握现代前端开发技术。"
		lang="zh"
		href="/courses/javascript-advanced"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Java 企业级开发"
		description="学习 Java 核心概念，掌握 Spring Boot 微服务架构开发。"
		lang="zh"
		href="/courses/java-enterprise"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="计算机网络基础"
		description="学习 TCP/IP 协议栈，理解网络通信原理和网络安全。"
		lang="zh"
		href="/courses/computer-networks"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="高等数学"
		description="系统学习微积分、线性代数等高等数学核心内容。"
		lang="zh"
		href="/courses/higher-mathematics"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Swift UI 开发"
		description="学习 Swift 语言和 SwiftUI 框架，开发 iOS 原生应用。"
		lang="zh"
		href="/courses/swift-ui"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Caddy 服务器配置"
		description="学习 Caddy 反向代理和 Web 服务器配置，自动化 HTTPS 部署。"
		lang="zh"
		href="/courses/caddy-server"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="Kong API 网关"
		description="学习 Kong 微服务网关配置，实现 API 管理和安全控制。"
		lang="zh"
		href="/courses/kong-gateway"
	/>
</template>


<script setup lang="ts">
import { CardCourse } from "@coffic/cosy-ui/vue";
</script>

<template>
	<CardCourse
		course-name="使用 Laravel 构建网站"
		description="学习使用 Laravel 框架开发现代 Web 应用，掌握 MVC 架构和数据库操作。"
		lang="zh"
		href="/courses/laravel-website"
	/>
</template>

scaleEffect

Hover scaling effect ratio, supports 95, 100, 105, 110, 115 (100 means no scaling), defaults to 105:

缩小效果

开始学习

无缩放

开始学习

默认缩放

开始学习

放大效果

开始学习

强烈放大

开始学习

缩小效果

开始学习

无缩放

开始学习

默认缩放

开始学习

放大效果

开始学习

强烈放大

开始学习
---
import { CardCourse } from '@coffic/cosy-ui';
---

<CardCourse courseName="缩小效果" lang="zh" href="/courses/scale-95" scaleEffect={95} />

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

<CardCourse courseName="无缩放" lang="zh" href="/courses/scale-100" scaleEffect={100} />

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

<CardCourse courseName="默认缩放" lang="zh" href="/courses/scale-105" scaleEffect={105} />

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

<CardCourse courseName="放大效果" lang="zh" href="/courses/scale-110" scaleEffect={110} />

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

<CardCourse courseName="强烈放大" lang="zh" href="/courses/scale-115" scaleEffect={115} />

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="缩小效果" lang="zh" href="/courses/scale-95" :scale-effect="95" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="无缩放" lang="zh" href="/courses/scale-100" :scale-effect="100" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="默认缩放" lang="zh" href="/courses/scale-105" :scale-effect="105" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="放大效果" lang="zh" href="/courses/scale-110" :scale-effect="110" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="强烈放大" lang="zh" href="/courses/scale-115" :scale-effect="115" />
</template>

shadowEffect

Shadow effect configuration, supports multiple strengths (none, sm, md, lg, xl, 2xl, inner), defaults to “lg”:

Python 入门

开始学习

JavaScript 基础

开始学习

TypeScript 进阶

开始学习

Node.Js 开发

开始学习

React Native

开始学习

Docker 容器化

开始学习

内阴影效果

开始学习

Python 入门

开始学习

JavaScript 基础

开始学习

TypeScript 进阶

开始学习

Node.Js 开发

开始学习

React Native

开始学习

Docker 容器化

开始学习

内阴影效果

开始学习
---
import { CardCourse } from '@coffic/cosy-ui';
---

<CardCourse courseName="Python 入门" lang="zh" href="/courses/python-basics" shadowEffect="none" />

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

<CardCourse courseName="JavaScript 基础" lang="zh" href="/courses/js-basics" shadowEffect="sm" />

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

<CardCourse courseName="TypeScript 进阶" lang="zh" href="/courses/ts-advanced" shadowEffect="md" />

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

<CardCourse courseName="Node.js 开发" lang="zh" href="/courses/nodejs" shadowEffect="lg" />

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

<CardCourse courseName="React Native" lang="zh" href="/courses/react-native" shadowEffect="xl" />

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

<CardCourse courseName="Docker 容器化" lang="zh" href="/courses/docker" shadowEffect="2xl" />

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

<CardCourse courseName="内阴影效果" lang="zh" href="/courses/inner-shadow" shadowEffect="inner" />

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="Python 入门" lang="zh" href="/courses/python-basics" shadow-effect="none" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="JavaScript 基础" lang="zh" href="/courses/js-basics" shadow-effect="sm" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="TypeScript 进阶" lang="zh" href="/courses/ts-advanced" shadow-effect="md" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="Node.js 开发" lang="zh" href="/courses/nodejs" shadow-effect="lg" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="React Native" lang="zh" href="/courses/react-native" shadow-effect="xl" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="Docker 容器化" lang="zh" href="/courses/docker" shadow-effect="2xl" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="内阴影效果" lang="zh" href="/courses/inner-shadow" shadow-effect="inner" />
</template>

Slots

icon

Custom icon area, defaults to smart icon:

默认图标示例

开始学习

自定义图标示例

开始学习

默认图标示例

开始学习

自定义图标示例

开始学习
---
import { CardCourse } from '@coffic/cosy-ui';
---

<CardCourse courseName="默认图标示例" lang="zh" href="/courses/default-icon" />

---
import { CardCourse } from '@coffic/cosy-ui';
import { RiBookOpenLine } from '@remixicon/vue';
---

<CardCourse courseName="自定义图标示例" lang="zh" href="/courses/custom-icon">
    <RiBookOpenLine
        slot="icon"
        class="w-64 h-64 text-blue-600"
        size="64px"
        color="#3b82f6"
    />
</CardCourse>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
</script>

<template>
  <CardCourse courseName="默认图标示例" lang="zh" href="/courses/default-icon" />
</template>

<script setup lang="ts">
import { CardCourse } from '@coffic/cosy-ui/vue';
import { RiBookOpenLine } from '@remixicon/vue';
</script>

<template>
  <CardCourse courseName="自定义图标示例" lang="zh" href="/courses/custom-icon">
    <template #icon>
      <RiBookOpenLine class="w-64 h-64 text-blue-600" size="64px" color="#3b82f6" />
    </template>
  </CardCourse>
</template>

搜索