# Project cards

## A project card is a clickable and colourful object to represent a user's 'project'.

The name for project cards comes from their usage on the website that Magic is derived from: CodeDragon.

## Example

# CSS framework

A CSS framework which is good because it helps you make your website. Check my project out by clicking on it!

# CSS framework

A CSS framework which is good because it helps you make your website. Check my project out by clicking on it!

# CSS framework

A CSS framework which is good because it helps you make your website. Check my project out by clicking on it!

## Adding project cards

Project cards always fill 100% of the width of their container, but they work best in 3 sets of col col4 as shown above. The card does not have individual links, but the whole thing is covered by an <a> tag, so is clickable as a block.

A project is composed of a body and a footer. The footer typically would contain information about when the 'project' was created, or who created it. The body contains a title, and some content (e.g. a project 'description').

# Title

Content

    <a href="#" class="project-link"> <!--Change the href="#" to the location you want the card to link to; the project-link class removes strange link decoration-->
      <div class="project default"> <!--Here, default can be any standard Magic colour (not darken-1, darken-2 or lighten, and not dark or light-->
        <div class="body">
          <h1 class="title">Title</h1>
          <p class="content">Content</p>
        </div>
        <div class="footer">
          <p class="footer-text">Footer text</p>
        </div>
      </div>
    </a>

## Combination projects

You can also combine multiple bodies and footers, to create more advanced cards:

# Body title

Body content

# Body title

Body content

# Body title

Body content

No code snippet is necessary for this; all you have to do is stack the <div class="body"> and <div class="footer"> sections on top of each other, within the project card. No additional class names or syntax required. Of course, the example above is probably quite useless, but stacking sections will probably be useful in some circumstances!

That's it! As mentioned above, project cards work best in 3 sets of col col4. See the grid section for more information.