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').
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>
You can also combine multiple bodies and footers, to create more advanced cards:
Body content
Body content
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.