Korbs/Contour
Archived
Template
1
Fork 0
Code Issues Pull requests Activity

Add Card and Card Grid components

Browse source
This commit is contained in:
Korbs 2024-02-02 08:38:41 -05:00
parent 9c4cd472ba
commit 94eb1ae21f
No known key found for this signature in database
2 changed files with 72 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/Card.astro Normal file
View file

@ -0,0 +1,56 @@
---
const {
Title,
Description,
CallToAction,
CallToAction_Primary_Text,
CallToAction_Primary_Link,
CallToAction_Secondary_Text,
CallToAction_Secondary_Link
} = Astro.props
---
<div class="card">
<slot/>
<h2>{Title}</h2>
<p>{Description}</p>
{CallToAction ?
<div class="call-to-actions">
<a class="call-to-action" href={CallToAction_Primary_Link}>{CallToAction_Primary_Text}</a>
<a class="call-to-action" href={CallToAction_Secondary_Link}>{CallToAction_Secondary_Text}</a>
</div>
:
null
}
</div>
<style lang="scss">
.card {
background: rgba(29, 29, 29, 0.5);
border: 1px rgb(33, 33, 33) solid;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px;
h2 {
margin: 0px;
}
p {
margin: 0px;
}
.call-to-actions {
display: flex;
flex-direction: row-reverse;
gap: 6px;
margin: 12px 0px -6px 0px;
a {
text-decoration: none;
background: rgb(29, 29, 29);
border: 1px rgb(33, 33, 33) solid;
border-radius: 3rem;
padding: 6px 12px;
}
}
}
</style>

16
src/components/CardGrid.astro Normal file
View file

@ -0,0 +1,16 @@
<div class="card-grid">
<slot/>
</div>
<style lang="scss">
.card-grid {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
@media only screen and (max-width: 700px) {
.card-grid {
flex-wrap: wrap;
}
}
</style>