mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-14 18:42:30 +03:00
SVG accessibility fixes (#27826)
* SVG accessibility fixes - add `focusable="false"` to all SVGs, to stop IE from including the `<svg>` in its default focus cycle - completely hide decorative SVGs using `aria-hidden="true"` - add `role="img"` to meaningful/"content" SVGs, ensure they have an appropriate `<title>` and/or `aria-label` - simplify placeholder default title * Simplify usage of placeholder.svg in the docs - in most cases, no need for separate/redundant text and title (now that we make text itself part of the alternative text explicitly) - no need (expect in rare cirumstances) to describe the placeholder image (unless the look of the image is important/the actual content, as is the case with the image thumbnail class) * Simplify example.html rewriting of <svg> to <img> code sample - as the `alt` for the placeholder isn't really important, just add an ellipsis instead (otherwise, to be correct, we'd have to construct the whole "title+text" construct like we do now in the placeholder.svg itself * Change svgo configuration to retain role attribute and add/force focusable=false - regarding `focusable=false`, see https://github.com/svg/svgo/issues/1011 (which would be the "proper" SVGO fix) and the (hacky) solution https://github.com/svg/svgo/pull/817
This commit is contained in:
Patrick H. Lauke
@@ -18,7 +18,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
|
||||
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<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>
|
||||
@@ -70,7 +70,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
|
||||
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<div class="card-body">
|
||||
<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>
|
||||
</div>
|
||||
@@ -113,7 +113,7 @@ Mix and match multiple content types to create the card you need, or throw every
|
||||
|
||||
{% capture example %}
|
||||
<div class="card" style="width: 18rem;">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<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>
|
||||
@@ -358,7 +358,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
|
||||
|
||||
{% capture example %}
|
||||
<div class="card mb-3">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -371,7 +371,7 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
|
||||
<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>
|
||||
</div>
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
@@ -382,7 +382,7 @@ Turn an image into a card background and overlay your card's text. Depending on
|
||||
|
||||
{% capture example %}
|
||||
<div class="card bg-dark text-white">
|
||||
{% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" title="Card image" %}
|
||||
{% include icons/placeholder.svg width="100%" height="270" class="bd-placeholder-img-lg card-img" text="Card image" %}
|
||||
<div class="card-img-overlay">
|
||||
<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>
|
||||
@@ -462,7 +462,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
{% capture example %}
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -470,7 +470,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -478,7 +478,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -494,7 +494,7 @@ When using card groups with footers, their content will automatically line up.
|
||||
{% capture example %}
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -504,7 +504,7 @@ When using card groups with footers, their content will automatically line up.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -514,7 +514,7 @@ When using card groups with footers, their content will automatically line up.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -534,7 +534,7 @@ Need a set of equal width and height cards that aren't attached to one another?
|
||||
{% capture example %}
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -542,7 +542,7 @@ Need a set of equal width and height cards that aren't attached to one another?
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -550,7 +550,7 @@ Need a set of equal width and height cards that aren't attached to one another?
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="200" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -566,7 +566,7 @@ Just like with card groups, card footers in decks will automatically line up.
|
||||
{% capture example %}
|
||||
<div class="card-deck">
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -576,7 +576,7 @@ Just like with card groups, card footers in decks will automatically line up.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -586,7 +586,7 @@ Just like with card groups, card footers in decks will automatically line up.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -608,7 +608,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
|
||||
{% capture example %}
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" %}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</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>
|
||||
@@ -625,7 +625,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" title="Card image cap" %}
|
||||
{% include icons/placeholder.svg width="100%" height="160" class="card-img-top" text="Image cap" %}
|
||||
<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>
|
||||
@@ -650,7 +650,7 @@ Cards can be organized into [Masonry](https://masonry.desandro.com/)-like column
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
{% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" title="Card image" %}
|
||||
{% include icons/placeholder.svg width="100%" height="260" class="card-img" text="Card image" %}
|
||||
</div>
|
||||
<div class="card p-3 text-right">
|
||||
<blockquote class="blockquote mb-0">
|
||||
|
||||
@@ -32,13 +32,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -53,13 +53,13 @@ Adding in the previous and next controls:
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
||||
@@ -87,13 +87,13 @@ You can also add the indicators to the carousel, alongside the controls, too.
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
|
||||
@@ -121,21 +121,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
@@ -171,13 +171,13 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
|
||||
@@ -200,13 +200,13 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-interval="10000">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" title="First slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" %}
|
||||
</div>
|
||||
<div class="carousel-item" data-interval="2000">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" title="Second slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" %}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" title="Third slide" %}
|
||||
{% include icons/placeholder.svg width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" %}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
|
||||
|
||||
@@ -14,7 +14,7 @@ Below is an example of a single media object. Only two classes are required—th
|
||||
|
||||
{% capture example %}
|
||||
<div class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
@@ -38,14 +38,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
|
||||
|
||||
{% capture example %}
|
||||
<div class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="media mt-3">
|
||||
<a class="mr-3" href="#">
|
||||
{% include icons/placeholder.svg width="64" height="64" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" %}
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Media heading</h5>
|
||||
@@ -63,7 +63,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
|
||||
|
||||
{% capture example %}
|
||||
<div class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="align-self-start mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="align-self-start mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
@@ -75,7 +75,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
|
||||
|
||||
{% capture example %}
|
||||
<div class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="align-self-center mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="align-self-center mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Center-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
@@ -87,7 +87,7 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
|
||||
|
||||
{% capture example %}
|
||||
<div class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="align-self-end mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="align-self-end mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">Bottom-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
@@ -107,7 +107,7 @@ Change the order of content in media objects by modifying the HTML itself, or by
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
{% include icons/placeholder.svg width="64" height="64" class="ml-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="ml-3" %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include example.html content=example %}
|
||||
@@ -119,21 +119,21 @@ Because the media object has so few structural requirements, you can also use th
|
||||
{% capture example %}
|
||||
<ul class="list-unstyled">
|
||||
<li class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media my-4">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" title="Generic placeholder image" %}
|
||||
{% include icons/placeholder.svg width="64" height="64" class="mr-3" %}
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
Reference in New Issue
Block a user