卡片组件左边图片右边文字

这是一个常见的 UI 设计模式，可以通过 HTML 和 CSS 实现。可以使用 flexbox 或者 grid 布局来实现图片和文字的排列。以下是一个简单的示例代码：

HTML:

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-content">
    <h2>Card Title</h2>
    <p>Card description goes here.</p>
  </div>
</div>

CSS:

.card {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
}

.card img {
  width: 200px;
  height: auto;
  margin-right: 20px;
}

.card-content {
  flex: 1;
}

.card-content h2 {
  margin-top: 0;
}

.card-content p {
  margin-bottom: 0;
}

这段代码会创建一个带有图片和文字的卡片组件，图片在左边，文字在右边。你可以根据需要调整样式和布局。