Example
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere <abp-card style="width: 18rem;">
<img abp-card-image="Top" src="https://via.placeholder.com/300x200.png?text=Image+cap" />
<abp-card-body>
<abp-card-title>Card Title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
</abp-card>
<div style="width: 18rem;" class="card mb-3">
<img src="https://via.placeholder.com/300x200.png?text=Image+cap" class="card-img-top" />
<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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
</div>
Titles, text, and links
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link <abp-card style="width: 18rem;">
<abp-card-body>
<abp-card-title>Card title</abp-card-title>
<abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
<a abp-card-link href="#">Card link</a>
<a abp-card-link href="#">Another link</a>
</abp-card-body>
</abp-card>
<div style="width: 18rem;" class="card mb-3">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="mb-2 text-muted card-subtitle">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>
</div>
</div>
List groups
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<abp-card style="width: 18rem;">
<abp-list-group flush="true">
<abp-list-group-item>Cras justo odio</abp-list-group-item>
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
</abp-list-group>
</abp-card>
<div style="width: 18rem;" class="card mb-3">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
List Title
Featured
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<abp-card style="width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-list-group flush="true">
<abp-list-group-item>Cras justo odio</abp-list-group-item>
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
</abp-list-group>
</abp-card>
<div style="width: 18rem;" class="card mb-3">
<div class="card-header">Featured</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Kitchen sink
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<abp-card style="width: 18rem;">
<img abp-card-image="Top" src="https://via.placeholder.com/300x200.png?text=Image+cap" />
<abp-card-body>
<abp-card-title>Card Title</abp-card-title><abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
<abp-list-group flush="true">
<abp-list-group-item>Cras justo odio</abp-list-group-item>
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
</abp-list-group>
<abp-card-body>
<a abp-card-link href="#">Card link</a>
<a abp-card-link href="#">Another link</a>
</abp-card-body>
</abp-card>
<div style="width: 18rem;" class="card mb-3">
<img src="https://via.placeholder.com/300x200.png?text=Image+cap" class="card-img-top" />
<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>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Header and footer
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere <abp-card style="width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
</abp-card>
<div style="width: 18rem;" class="card mb-3">
<div class="card-header">Featured</div>
<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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
</div>
Quoate
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<abp-card>
<abp-card-header>Quote</abp-card-header>
<abp-card-body>
<abp-blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</abp-blockquote>
</abp-card-body>
</abp-card>
<div class="card mb-3">
<div class="card-header">Quote</div>
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</blockquote>
</div>
</div>
Featured
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere 2 days ago
<abp-card class="text-center">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
<abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
</abp-card>
<div class="text-center card mb-3">
<div class="card-header">Featured</div>
<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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
<div class="text-muted card-footer"> 2 days ago</div>
</div>
Sizing with grid markup
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere 2 days ago
<div class="row">
<div class="col-md-6">
<abp-card>
<abp-card-header>Quote</abp-card-header>
<abp-card-body>
<abp-blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</abp-blockquote>
</abp-card-body>
</abp-card>
</div>
<div class="col-md-6">
<abp-card class="text-center">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
<abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
</abp-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header">Quote</div>
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6">
<div class="text-center card mb-3">
<div class="card-header">Featured</div>
<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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
<div class="text-muted card-footer"> 2 days ago</div>
</div>
</div>
</div>
Sizing with utilities
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere 2 days ago
<abp-card class="w-75">
<abp-card-header>Quote</abp-card-header>
<abp-card-body>
<abp-blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</abp-blockquote>
</abp-card-body>
</abp-card>
<abp-card class="text-center w-50">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
<abp-card-footer class="text-muted"> 2 days ago</abp-card-footer>
</abp-card>
<div class="w-75 card mb-3">
<div class="card-header">Quote</div>
<div class="card-body">
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in Source Title</footer>
</blockquote>
</div>
</div>
<div class="text-center w-50 card mb-3">
<div class="card-header">Featured</div>
<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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
<div class="text-muted card-footer"> 2 days ago</div>
</div>
Text alignment
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere <abp-card class="text-start" style="width: 18rem;">
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
</abp-card>
<abp-card class="text-center" style="width: 18rem;">
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
</abp-card>
<abp-card class="text-end" style="width: 18rem;">
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</abp-card-body>
</abp-card>
<div class="text-start 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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
</div>
<div class="text-center 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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
</div>
<div class="text-end 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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
</div>
Image overlays
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere <abp-card>
<img abp-card-image="Top" src="https://via.placeholder.com/1150x270.png?text=Image+cap" />
<div class="card-img-overlay">
<abp-card-title>Card Title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
<a abp-button="Primary" href="#"> Go somewhere</a>
</div>
</abp-card>
<div class="card mb-3">
<img src="https://via.placeholder.com/1150x270.png?text=Image+cap" class="card-img-top" />
<div class="card-img-overlay">
<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>
<a href="#" class="btn btn-primary" role="button"> Go somewhere</a>
</div>
</div>
Border
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<abp-card class="border-primary mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-primary">
<abp-card-title>Primary card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-secondary mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-secondary">
<abp-card-title>Secondary card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-success mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-success">
<abp-card-title>Success card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-danger mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-danger">
<abp-card-title>Danger card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-warning mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-warning">
<abp-card-title>Warning card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-info mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-info">
<abp-card-title>Info card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-light mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body>
<abp-card-title>Light card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card class="border-dark mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-dark">
<abp-card-title>Dark card title</abp-card-title>
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
</abp-card-body>
</abp-card>
<div class="border-primary mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-primary card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
<div class="border-secondary mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-secondary card-body">
<h5 class="card-title">Secondary 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>
</div>
</div>
<div class="border-success mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-success card-body">
<h5 class="card-title">Success 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>
</div>
</div>
<div class="border-danger mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-danger card-body">
<h5 class="card-title">Danger 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>
</div>
</div>
<div class="border-warning mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-warning card-body">
<h5 class="card-title">Warning 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>
</div>
</div>
<div class="border-info mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-info card-body">
<h5 class="card-title">Info 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>
</div>
</div>
<div class="border-light mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light 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>
</div>
</div>
<div class="border-dark mb-3 card mb-3" style="width: 18rem;">
<div class="card-header">Header</div>
<div class="text-dark card-body">
<h5 class="card-title">Dark 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>
</div>
</div>
Card Styles
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
<abp-card background="Primary" class="mb-3" style="max-width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card background="Success" text-color="Danger" border="Dark" class="mb-3" style="max-width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card background="Warning" text-color="Secondary" class="mb-3" style="max-width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card background="Light" text-color="Dark" border="Success" class="mb-3" style="max-width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card background="Dark" text-color="White" border="Danger" class="mb-3" style="max-width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card background="Danger" class="mb-3" style="max-width: 18rem;">
<abp-card-header text-color="Primary">Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<abp-card background="Info" border="Danger" class="mb-3" style="max-width: 18rem;">
<abp-card-header>Featured</abp-card-header>
<abp-card-body text-color="Danger">
<abp-card-title> Special title treatment</abp-card-title>
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
</abp-card-body>
</abp-card>
<div class="mb-3 bg-primary card mb-3" style="max-width: 18rem;">
<div class="card-header">Featured</div>
<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>
</div>
</div>
<div class="mb-3 bg-success card mb-3 border-dark text-danger" style="max-width: 18rem;">
<div class="card-header">Featured</div>
<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>
</div>
</div>
<div class="mb-3 bg-warning card mb-3 text-secondary" style="max-width: 18rem;">
<div class="card-header">Featured</div>
<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>
</div>
</div>
<div class="mb-3 bg-light card mb-3 border-success text-dark" style="max-width: 18rem;">
<div class="card-header">Featured</div>
<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>
</div>
</div>
<div class="mb-3 bg-dark card mb-3 border-danger text-white" style="max-width: 18rem;">
<div class="card-header">Featured</div>
<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>
</div>
</div>
<div class="mb-3 bg-danger card mb-3" style="max-width: 18rem;">
<div class="card-header text-primary">Featured</div>
<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>
</div>
</div>
<div class="mb-3 bg-info card mb-3 border-danger" style="max-width: 18rem;">
<div class="card-header">Featured</div>
<div class="card-body text-danger">
<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>
</div>
</div>