Sign in


Sign up


Bootstrap panels

Bootstrap’s panels provide a flexible and extensible content container with multiple variants. These options include, but are in no way limited to headers and footers, a wide variety of content, contextual background colors, and powerful display options. Panels are similar to cards, but they don't include media.

Basic example

Panels are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Below is an example of a basic panel with mixed content and a fixed width. Panels have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

Panel title

Some quick example text to build on the panel title and make up the bulk of the panel's content.

<div class="card card-body">
    <h4 class="card-title">Panel title</h4>
    <p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>
    <div class="flex-row">
        <a class="card-link">Card link</a>
        <a class="card-link">Another link</a>
    </div>
</div>

Content types

Panels support a wide variety of content, including text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a panel is the .card-body. Use it whenever you need a padded section within a panel.

This is some text within a panel body.
<div class="card">
    <div class="card-body">
        This is some text within a panel body.
    </div>
</div>

Titles, text and links

Panel titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to a <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the panel title and subtitle are aligned nicely.

Panel title

Panel subtitle

Some quick example text to build on the panel title and make up the bulk of the panel's content.

Panel link Another link
<div class="card">
    <div class="card-body">
        <h4 class="card-title">Panel title</h4>
        <h6 class="card-subtitle mb-2 text-muted">Panel subtitle</h6>
        <p class="card-text">Some quick example text to build on the panel title and make up the bulk of the panel's content.</p>
        <a href="#" class="card-link">Panel link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

List groups

Create lists of content in a panel with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card">
    <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>


Sizing

Panels assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Using grid markup

Using the grid, wrap cards in columns and rows as needed.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="row">
    <!--Panel-->
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Special title treatment</h3>
                <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>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Special title treatment</h3>
                <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>
    </div>
    <!--/.Panel-->
</div>

Using utilities

Use our handful of available sizing utilities to quickly set a panel's width.

Card title

With supporting text below as a natural lead-in to additional content.

Button

Card title

With supporting text below as a natural lead-in to additional content.

Button
<!--Panel-->
<div class="card w-75">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Button</a>
    </div>
</div>
<!--/.Panel-->

<!--Panel-->
<div class="card w-50">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Button</a>
    </div>
</div>
<!--/.Panel-->

Using custom CSS

Use custom CSS in your stylesheets or as inline styles to set a width.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card" style="width: 20rem;">
    <div class="card-body">
        <h3 class="card-title">Special title treatment</h3>
        <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>

Text Alignment

You can quickly change the text alignment of any panel—in its entirety or specific parts—with our text align classes.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<!--Panel-->
<div class="card">
    <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">Go somewhere</a>
    </div>
</div>
<!--/.Panel-->

<!--Panel-->
<div class="card text-center">
    <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">Go somewhere</a>
    </div>
</div>
<!--/.Panel-->

<!--Panel-->
<div class="card text-right">
    <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">Go somewhere</a>
    </div>
</div>
<!--/.Panel-->


Styles

Cards include various options for customizing their backgrounds, borders, and color.

Background and color

Use text and background utilities to change the appearance of a panel. Darker colors require the use of .white-text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<div class="row">
    <div class="col-md-6 mb-4">

        <!--Card Primary-->
        <div class="card indigo text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                    erat a ante.</p>
            </div>
        </div>
        <!--/.Card Primary-->
        <br>
        <!--Card Danger-->
        <div class="card pink lighten-2 text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                    erat a ante.</p>
            </div>
        </div>
        <!--/.Card Danger-->
        <br>
        <!--Card Success-->
        <div class="card info-color text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                    erat a ante.</p>
            </div>
        </div>
        <!--/.Card Success-->

    </div>

    <div class="col-md-6">

        <!--Card Warning-->
        <div class="card red lighten-1 text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                    erat a ante.</p>
            </div>
        </div>
        <!--/.Card Warning-->
        <br>
        <!--Card Info-->
        <div class="card success-color text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                    erat a ante.</p>
            </div>
        </div>
        <!--/.Card Info-->
        <br>
        <!--Card Default-->
        <div class="card mdb-color lighten-2 text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                    erat a ante.</p>
            </div>
        </div>
        <!--/.Card Default-->

    </div>
</div>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Border

Use border utilities to change just the border-color of a panel. Note that you can put .text-{color} classes on the parent with .card or a subset of the panel’s contents as shown below.

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.

<!--Panel-->
<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
        <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>
<!--/.Panel-->

<!--Panel-->
<div class="card border-secondary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-secondary">
        <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>
<!--/.Panel-->

<!--Panel-->
<div class="card border-success mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-success">
        <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>
<!--/.Panel-->

<!--Panel-->
<div class="card border-danger mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-danger">
        <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>
<!--/.Panel-->

<!--Panel-->
<div class="card border-warning mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-warning">
        <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>


<!--Panel-->
<div class="card border-info mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-info">
        <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>
<!--/.Panel-->

<!--Panel-->
<div class="card border-light mb-3" style="max-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>
<!--/.Panel-->

<!--Panel-->
<div class="card border-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-dark">
        <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>
<!--/.Panel-->

Mixin utilities

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card border-success mb-3" style="max-width: 18rem;">
    <div class="card-header bg-transparent border-success">Header</div>
    <div class="card-body text-success">
        <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 class="card-footer bg-transparent border-success">Footer</div>
</div>

Layout

In addition to styling the content within panels, Bootstrap includes a few options for laying out series of panels. For the time being, these layout options are not yet responsive.

Groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Panel title

This is a wider panel 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.

Last updated 3 mins ago

<div class="card-group">
    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel 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>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel with supporting text below as a natural lead-in to additional content. This panel 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>
        </div>
    </div>
</div>
<!--/.Panel-->

When using card groups with footers, their content will automatically line up.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This card has supporting text below as a natural lead-in to additional content.

Card title

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.

<div class="card-group">
    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel with supporting text below as a natural lead-in to additional content. This panel 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>
        </div>
    </div>
    <!--/.Panel-->
</div>

Decks

Need a set of equal width and height panel that aren’t attached to one another? Use decks.

Panel title

This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck">
    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a longer panel 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>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel with supporting text below as a natural lead-in to additional content. This panel 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>
        </div>
    </div>
    <!--/.Panel-->
</div>

Just like with card groups, card footers in decks will automatically line up.

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Panel title

This panel has supporting text below as a natural lead-in to additional content.

Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.

<div class="card-deck">
    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel with supporting text below as a natural lead-in to additional content.
                                                            This panel 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>
        </div>
    </div>
    <!--/.Panel-->
</div>

Columns

Panels can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Panels are built with CSS column properties instead of flexbox for easier alignment. Panels are ordered from top to bottom and left to right.

Heads up! Your mileage with panel columns may vary. To prevent panels breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Panel title that wraps to a new line

This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Panel title

This panel has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Panel title

This is a wider panel with supporting text below as a natural lead-in to additional content. This panel has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-columns">
    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title that wraps to a new line</h5>
            <p class="card-text">This is a longer panel with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card p-3">
        <blockquote class="blockquote mb-0 card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card bg-primary text-white text-center p-3">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
            <footer class="blockquote-footer">
                <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card text-center">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This panel 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>
        </div>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card p-3 text-right">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <!--/.Panel-->

    <!--Panel-->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Panel title</h5>
            <p class="card-text">This is a wider panel with supporting text below as a natural lead-in to additional content. This panel 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>
        </div>
    </div>
    <!--/.Panel-->
</div>

Columns can also be extended and customized with some additional code. Shown below is an extension of the .card-columns class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

.card-columns {
    @include media-breakpoint-only(lg) {
        column-count: 4;
    }
    @include media-breakpoint-only(xl) {
        column-count: 5;
    }
}

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
<div class="jumbotron">
    <h1 class="h1-responsive">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
        to featured content or information.</p>
    <hr class="my-2">
    <p>It uses utility classes for typography and spacing to space content out within the larger
        container.
    </p>
    <a class="btn btn-primary btn-lg" role="button">Learn more</a>
</div>