diff options
Diffstat (limited to '')
-rw-r--r-- | site/content/docs/5.3/components/card.md (renamed from site/content/docs/5.2/components/card.md) | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/site/content/docs/5.2/components/card.md b/site/content/docs/5.3/components/card.md index 6bc90e7..2ad32b4 100644 --- a/site/content/docs/5.2/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> - <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> + <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> @@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> - <div class="card-footer text-muted"> + <div class="card-footer text-body-secondary"> 2 days ago </div> </div> @@ -207,7 +207,7 @@ Using the grid, wrap cards in columns and rows as needed. {{< example >}} <div class="row"> - <div class="col-sm-6"> + <div class="col-sm-6 mb-3 mb-sm-0"> <div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> @@ -233,7 +233,7 @@ Using the grid, wrap cards in columns and rows as needed. Use our handful of [available sizing utilities]({{< docsref "/utilities/sizing" >}}) to quickly set a card's width. {{< example >}} -<div class="card w-75"> +<div class="card w-75 mb-3"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> @@ -269,7 +269,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width. You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{< docsref "/utilities/text#text-alignment" >}}). {{< example >}} -<div class="card" style="width: 18rem;"> +<div class="card mb-3" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> @@ -277,7 +277,7 @@ You can quickly change the text alignment of any card—in its entirety or speci </div> </div> -<div class="card text-center" style="width: 18rem;"> +<div class="card text-center mb-3" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> @@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"— <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 content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <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 content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}} </div> @@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in <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 content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -436,7 +436,7 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg {{< /example >}} {{< callout info >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ### Border @@ -487,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a <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 content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> @@ -495,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a <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> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> @@ -503,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a <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> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> <div class="card"> @@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> <div class="card"> @@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up. <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> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> @@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> @@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> @@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up. <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> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> |