Cards

Cards

SkyLineCSS provides utility classes to create flexible and responsive cards for displaying content. Cards are a popular UI component for organizing and presenting information in a structured format.

Basic Card

To create a basic card, use the .card class:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a basic card with some text content.</p>
  </div>
</div>

Card with Image

You can include an image in the card using the .card-img-top class:

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card includes an image at the top.</p>
  </div>
</div>

Card with Links and Buttons

You can add links and buttons inside the card body:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card contains links and buttons.</p>
    <a href="#" class="card-link">Card Link</a>
    <a href="#" class="card-link">Another Link</a>
    <button class="btn btn-primary">Button</button>
  </div>
</div>

Card Header and Footer

You can add headers and footers to the card using the .card-header and .card-footer classes:

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card includes a header.</p>
  </div>
  <div class="card-footer">
    Footer content
  </div>
</div>

Card Borders

You can add borders to the card using the .border class:

<div class="card border">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card has a border.</p>
  </div>
</div>

Card Colors

SkyLineCSS provides predefined color classes for cards:

• .bg-primary: Primary background color

• .bg-secondary: Secondary background color

• .bg-success: Success background color

• .bg-danger: Danger background color

• .bg-warning: Warning background color

Example:

<div class="card bg-primary">
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">This card has a primary background color.</p>
  </div>
</div>

<div class="card bg-success">
  <div class="card-body">
    <h5 class="card-title">Success Card</h5>
    <p class="card-text">This card has a success background color.</p>
  </div>
</div>

Card Shadows

You can add shadows to the card using the .shadow and .shadow-md classes:

<div class="card shadow">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card has a shadow.</p>
  </div>
</div>

<div class="card shadow-md">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card has a medium shadow.</p>
  </div>
</div>

Responsive Cards

You can make cards responsive using the .card-deck and .card-columns classes:

<div class="card-deck">
  <!-- Cards displayed in a deck -->
</div>

<div class="card-columns">
  <!-- Cards displayed in multiple columns -->
</div>

Complete Example

Here's a complete example combining different card styles:

<div class="card bg-primary text-white">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Primary Card Title</h5>
    <p class="card-text">This card has a primary background color.</p>
    <a href="#" class="btn btn-outline-light">Button</a>
  </div>
</div>

<div class="card shadow mt-4">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes an image with a shadow.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

These are some of the available card styling utilities in SkyLineCSS. You can combine these classes to create stylish and responsive cards for your projects.

I assume you're asking for a dark mode version of the documentation for cards. Here's how you can modify the cards.md file for dark mode:

docs/cards.md (Dark Mode)

Cards

SkyLineCSS provides utility classes to create flexible and responsive cards for displaying content. Cards are a popular UI component for organizing and presenting information in a structured format.

Basic Card

To create a basic card, use the .card class:

<div class="card bg-gray-800 text-white">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a basic card with some text content.</p>
  </div>
</div>

Card with Image

You can include an image in the card using the .card-img-top class:

<div class="card bg-gray-800 text-white">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card includes an image at the top.</p>
  </div>
</div>

Card with Links and Buttons

You can add links and buttons inside the card body:

<div class="card bg-gray-800 text-white">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card contains links and buttons.</p>
    <a href="#" class="card-link text-purple-300">Card Link</a>
    <a href="#" class="card-link text-purple-300">Another Link</a>
    <button class="btn btn-primary">Button</button>
  </div>
</div>

Card Header and Footer

You can add headers and footers to the card using the .card-header and .card-footer classes:

<div class="card bg-gray-800 text-white">
  <div class="card-header bg-gray-700">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card includes a header.</p>
  </div>
  <div class="card-footer bg-gray-700">
    Footer content
  </div>
</div>

Card Borders

You can add borders to the card using the .border class:

<div class="card bg-gray-800 text-white border border-purple-600">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card has a border.</p>
  </div>
</div>

Card Colors

SkyLineCSS provides predefined color classes for cards:

• .bg-primary: Primary background color

• .bg-secondary: Secondary background color

• .bg-success: Success background color

• .bg-danger: Danger background color

• .bg-warning: Warning background color

Example:

<div class="card bg-primary text-white">
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">This card has a primary background color.</p>
  </div>
</div>

<div class="card bg-success text-white">
  <div class="card-body">
    <h5 class="card-title">Success Card</h5>
    <p class="card-text">This card has a success background color.</p>
  </div>
</div>

Card Shadows

You can add shadows to the card using the .shadow and .shadow-md classes:

<div class="card bg-gray-800 text-white shadow">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card has a shadow.</p>
  </div>
</div>

<div class="card bg-gray-800 text-white shadow-md">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This card has a medium shadow.</p>
  </div>
</div>

Responsive Cards

You can make cards responsive using the .card-deck and .card-columns classes:

<div class="card-deck">
  <!-- Cards displayed in a deck -->
</div>

<div class="card-columns">
  <!-- Cards displayed in multiple columns -->
</div>

Complete Example

Here's a complete example combining different card styles:

<div class="card bg-gray-900 text-white">
  <div class="card-header bg-gray-800">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Primary Card Title</h5>
    <p class="card-text">This card has a primary background color.</p>
    <a href="#" class="btn btn-outline-purple">Button</a>
  </div>
</div>

<div class="card bg-gray-800 text-white shadow mt-4">
  <img src="image.jpg" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes an image with a shadow.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

These are some of the available card styling utilities in SkyLineCSS. You can combine these classes to create stylish and responsive cards for your projects in dark mode.