Simple Cards
Reference
Something about the detailed docs or API reference.
Home
Get up and running with a pkgdown template package.
Card Markup
Use a raw html block with a grid (class="d-grid"). I’ve
used
as inline styles to get decent behavior across all screen sizes.
```{=html}
<div class="d-grid" style="grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)); gap: 1em;">
<!-- cards -->
</div>
```Card markup is as follows. Give the card container
card-as-link class. And ensure that there is one link with
the class card-primary-link. If this link is in a header
element, also give it card-header-link, othewise this could
also be a right-aligned button at the end of the card.
<!-- card -->
<div class="card card-as-link">
<div class="card-body">
<h3 class="card-title mt-0 mb-3">
<a href="../index.html" class="card-primary-link card-header-link text-decoration-none">Home</a>
</h3>
<p class="card-text">Get up and running with a pkgdown template package.</p>
</div>
</div>
<!-- /card -->Complex Cards
Markup
<!-- card -->
<div class="card card-as-link">
<img src="https://source.unsplash.com/aTKJ22OrbrU" class="card-img-top" alt="">
<div class="card-body">
<h3 class="card-title mt-0 mb-3">grkgdown</h3>
</h3>
<p class="card-text">Get up and running with a pkgdown template package.</p>
<a href="../index.html" class="btn btn-primary float-end card-primary-link">Package Home</a>
</div>
</div>
<!-- /card -->