Cards - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Cards#

Cards are flexible content containers.

Microsoft
Software and hardware
Empower every person and every organization on the planet to achieve more.
Do
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
Google I/O
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
BuyShare
Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
Google
Software and hardware
Organize the world’s information and make it universally accessible and useful.
SearchShare

Add a container element with the `card` class. And add child elements with the `card-image`, `card-header`, `card-body` and/or `card-footer` classes. The `card-image` can be placed in any position.

    <div class="card">
      <div class="card-image">
        <img src="img/osx-el-capitan.jpg" class="img-responsive">
      </div>
      <div class="card-header">
        <div class="card-title h5">...</div>
        <div class="card-subtitle text-gray">...</div>
      </div>
      <div class="card-body">
        ...
      </div>
      <div class="card-footer">
        <button class="btn btn-primary">...</button>
      </div>
    </div>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.