cliss21
/
microsrebelles-site
4
0
Fork 1
Code Issues 12 Pull Requests 1 Releases Activity

implement card carousel design

Browse Source
pull/1/head
Zoé Martin 2 years ago
parent 18a631deb2
commit 1ee761c019
3 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File

23
assets/scss/components/_cards.scss
Unescape Escape View File

@ -0,0 +1,23 @@
// Bootstrap card customization
.card {
margin: 2em;
padding-right: 2em;
border: none;
border-right: 1px solid $gray-500;
}
.card:last-child {
padding: 0px;
border: none;
}
.card {
&-cover {
.illus {
width: auto;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
}
}

1
assets/scss/main.scss
Unescape Escape View File

@ -15,6 +15,7 @@
// Components
@import 'components/forms';
@import 'components/cards';
// Page-specific styles
//@import "pages/home";

47
styleguide/index.html
Unescape Escape View File

@ -1010,35 +1010,44 @@
<div>
<div class="bd-example">
<div id="cardCarouselExampleCaptions" class="carousel slide" data-bs-interval="false">
<div class="carousel-control-prev-container">
<button class="carousel-control-prev" type="button" data-bs-target="#cardCarouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
</div>
<div class="carousel-inner">
<!-- Premier groupe de 3 éléments -->
<div class="carousel-item active">
<div class="card-group">
<div class="card">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
<div class="card-cover">
<svg class="illus bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h5 class="card-title">Les Culottées Loossoises - Thérèse Foulquet</h5>
<p class="card-text"><small class="text-primary">Atelier Radio</small></p>
</div>
</div>
<div class="card">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
<div class="card-cover">
<svg class="illus bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h5 class="card-title">Les Culottées Loossoises - Maya Damageux</h5>
<p class="card-text"><small class="text-primary">Atelier Radio</small></p>
</div>
</div>
<div class="card">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
<div class="card-cover">
<svg class="illus bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<h5 class="card-title">Radio Nino - Un atelier nocturne en foret</h5>
<p class="card-text"><small class="text-primary">Atelier Radio</small></p>
</div>
</div>
</div>
@ -1108,14 +1117,12 @@
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#cardCarouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#cardCarouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="carousel-control-next-container">
<button class="carousel-control-next" type="button" data-bs-target="#cardCarouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save