Cards

Flexible and expandable containers for content, offering various styles and options.

Examples

There are a variety of the card components. Here are a few examples:

Usage

Card components are versatile elements used to present concise and visually engaging information. Use them to organise content, enhance visual hierarchy, and promote a cohesive user experience by displaying related information in a compact and visually appealing format.

Do:

employ cards to establish a visual hierarchy within a page, using different card sizes, colours, or styles, you can draw attention to important content and guide users through the interface
use cards to group related content or items
use cards to chunk information into one digestible unit
use cards to create prominent call-to-action sections, each card can represent a specific action, such as signing up for a newsletter, making a purchase, or exploring more content
use grids for card-based layouts to ensure uniformity in card size, shape, and design
keep card headings concise
use whitespace effectively within and around cards to enhance readability, reduce clutter, and improve overall design aesthetics
use high quality images

Avoid:

overusing cards, don’t turn every element into a card, as it can lead to visual clutter and overwhelm the user
aligning cards haphazardly, it is important to maintain a clean and organised layout
placing different topics within one card
overcrowding cards with too much information or options, keep the content concise and easy to digest
using ambiguous or unclear calls-to-action within cards, make sure users understand what action or outcome is expected when interacting with a card

References

Neilson Norman Group
Cards: UI-Component Definition

Card with heading link and text

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card with icon, heading and text

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Cards with heading, text and multiple call-to-action buttons

Looking for inspiration?

Line manager: Colin Sanders
Reviewer: Colin Sanders
Sub department: Digital Group (Sub-Dept)
Health board: NHS Education for Scotland

Current Appraisal Previous Appraisal

Card with heading link and text

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Copy


    <div class="row g-4">
        <turas-card card-heading="Card title" card-link="/">
            <turas-lorem />
        </turas-card>

        <turas-card card-heading="Card title" card-link="/">
            <turas-lorem />
        </turas-card>

        <turas-card card-heading="Card title" card-link="/">
            <turas-lorem />
        </turas-card>
    </div>

Copy


    <div class="row g-4">
        <div class="col-md-6 col-lg-4  "><a href="/">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></a></div>

        <div class="col-md-6 col-lg-4  "><a href="/">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></a></div>

        <div class="col-md-6 col-lg-4  "><a href="/">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></a></div>
    </div>

Card with icon, heading and text

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Copy


    <div class="row g-4">
        <turas-card card-link="/" card-heading="Card title" card-icon-image="/img/dashboard_icons/design.png">
            <turas-lorem />
        </turas-card>

        <turas-card card-link="/" card-heading="Card title" card-icon-image="/img/dashboard_icons/design.png">
            <turas-lorem />
        </turas-card>

        <turas-card card-link="/" card-heading="Card title" card-icon-image="/img/dashboard_icons/design.png">
            <turas-lorem />
        </turas-card>
    </div>

Copy


    <div class="row g-4">
        <div class="col-md-6 col-lg-4  "><a href="/">
            <div class="card landingBlock h-100 withIcon ">
                <img src="/img/dashboard_icons/design.png" alt="">
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></a></div>

        <div class="col-md-6 col-lg-4  "><a href="/">
            <div class="card landingBlock h-100 withIcon ">
                <img src="/img/dashboard_icons/design.png" alt="">
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></a></div>

        <div class="col-md-6 col-lg-4  "><a href="/">
            <div class="card landingBlock h-100 withIcon ">
                <img src="/img/dashboard_icons/design.png" alt="">
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></a></div>
    </div>

Cards with heading, text and single call-to-action button

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Call to action

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Call to action

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Call to action

Copy


    <div class="row">
        <turas-card card-heading="Card title">
            <turas-lorem></turas-lorem>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="btn-block">Call to action</turas-button>
            </turas-card-actions>
        </turas-card>

        <turas-card card-heading="Card title">
            <turas-lorem></turas-lorem>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="btn-block">Call to action</turas-button>
            </turas-card-actions>
        </turas-card>

        <turas-card card-heading="Card title">
            <turas-lorem></turas-lorem>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="btn-block">Call to action</turas-button>
            </turas-card-actions>
        </turas-card>
    </div> <!-- /.row -->

Copy


    <div class="row">
        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
            <div class="card-actions ">
                <a href="" class="btn btn-primary btn-block">Call to action</a>
            </div>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
            <div class="card-actions ">
                <a href="" class="btn btn-primary btn-block">Call to action</a>
            </div>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
            <div class="card-actions ">
                <a href="" class="btn btn-primary btn-block">Call to action</a>
            </div>
        
                </div>
            </div></div>
    </div> <!-- /.row -->

Cards with heading, text and multiple call-to-action buttons

Looking for inspiration?

Line manager: Colin Sanders
Reviewer: Colin Sanders
Sub department: Digital Group (Sub-Dept)
Health board: NHS Education for Scotland

Current Appraisal Previous Appraisal

Looking for inspiration?

Line manager: Colin Sanders
Reviewer: Colin Sanders
Sub department: Digital Group (Sub-Dept)
Health board: NHS Education for Scotland

Current Appraisal Previous Appraisal

Copy


    <div class="row g-4">

        <turas-card card-heading="Looking for inspiration?" column-classes="col-md-6 col-sm-12">
            <ul class="list-unstyled">
                <li><strong>Line manager:</strong> Colin Sanders</li>
                <li><strong>Reviewer:</strong> Colin Sanders</li>
                <li><strong>Sub department:</strong> Digital Group (Sub-Dept)</li>
                <li><strong>Health board:</strong> NHS Education for Scotland</li>
            </ul>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="">Current Appraisal</turas-button>
                <turas-button button-style="Default" button-type="Hyperlink" href="" additional-classes="">Previous Appraisal</turas-button>
            </turas-card-actions>
        </turas-card>

        <turas-card card-heading="Looking for inspiration?" column-classes="col-md-6 col-sm-12">
            <ul class="list-unstyled">
                <li><strong>Line manager:</strong> Colin Sanders</li>
                <li><strong>Reviewer:</strong> Colin Sanders</li>
                <li><strong>Sub department:</strong> Digital Group (Sub-Dept)</li>
                <li><strong>Health board:</strong> NHS Education for Scotland</li>
            </ul>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="">Current Appraisal</turas-button>
                <turas-button button-style="Default" button-type="Hyperlink" href="" additional-classes="">Previous Appraisal</turas-button>
            </turas-card-actions>
        </turas-card>
    </div> <!-- /.row -->

Copy


    <div class="row g-4">

        <div class="col-md-6 col-sm-12  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Looking for inspiration?</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <ul class="list-unstyled">
                <li><strong>Line manager:</strong> Colin Sanders</li>
                <li><strong>Reviewer:</strong> Colin Sanders</li>
                <li><strong>Sub department:</strong> Digital Group (Sub-Dept)</li>
                <li><strong>Health board:</strong> NHS Education for Scotland</li>
            </ul>
            <div class="card-actions ">
                <a href="" class="btn btn-primary ">Current Appraisal</a>
                <a href="" class="btn btn-default ">Previous Appraisal</a>
            </div>
        
                </div>
            </div></div>

        <div class="col-md-6 col-sm-12  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Looking for inspiration?</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <ul class="list-unstyled">
                <li><strong>Line manager:</strong> Colin Sanders</li>
                <li><strong>Reviewer:</strong> Colin Sanders</li>
                <li><strong>Sub department:</strong> Digital Group (Sub-Dept)</li>
                <li><strong>Health board:</strong> NHS Education for Scotland</li>
            </ul>
            <div class="card-actions ">
                <a href="" class="btn btn-primary ">Current Appraisal</a>
                <a href="" class="btn btn-default ">Previous Appraisal</a>
            </div>
        
                </div>
            </div></div>
    </div> <!-- /.row -->

Cards with heading, link list and single call-to-action button

Complete client transfer

All clients transfering in

Complete client transfer

All clients transfering in

Complete client transfer

All clients transfering in

Copy


    <div class="row">
        <turas-card card-heading="Complete client transfer">
            <ul class="cardList list-unstyled">
                <li><a href="" title="">Transfer in Kate Client (123354548)</a></li>
                <li><a href="" title="">Transfer in Kenny Client (4354324324)</a></li>
            </ul>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="btn-block">All clients transfering in</turas-button>
            </turas-card-actions>
        </turas-card>

        <turas-card card-heading="Complete client transfer">
            <ul class="cardList list-unstyled">
                <li><a href="" title="">Transfer in Kate Client (123354548)</a></li>
                <li><a href="" title="">Transfer in Kenny Client (4354324324)</a></li>
            </ul>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="btn-block">All clients transfering in</turas-button>
            </turas-card-actions>
        </turas-card>

        <turas-card card-heading="Complete client transfer">
            <ul class="cardList list-unstyled">
                <li><a href="" title="">Transfer in Kate Client (123354548)</a></li>
                <li><a href="" title="">Transfer in Kenny Client (4354324324)</a></li>
            </ul>
            <turas-card-actions>
                <turas-button button-style="Primary" button-type="Hyperlink" href="" additional-classes="btn-block">All clients transfering in</turas-button>
            </turas-card-actions>
        </turas-card>
    </div> <!-- /.row -->

Copy


    <div class="row">
        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Complete client transfer</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <ul class="cardList list-unstyled">
                <li><a href="" title="">Transfer in Kate Client (123354548)</a></li>
                <li><a href="" title="">Transfer in Kenny Client (4354324324)</a></li>
            </ul>
            <div class="card-actions ">
                <a href="" class="btn btn-primary btn-block">All clients transfering in</a>
            </div>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Complete client transfer</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <ul class="cardList list-unstyled">
                <li><a href="" title="">Transfer in Kate Client (123354548)</a></li>
                <li><a href="" title="">Transfer in Kenny Client (4354324324)</a></li>
            </ul>
            <div class="card-actions ">
                <a href="" class="btn btn-primary btn-block">All clients transfering in</a>
            </div>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Complete client transfer</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <ul class="cardList list-unstyled">
                <li><a href="" title="">Transfer in Kate Client (123354548)</a></li>
                <li><a href="" title="">Transfer in Kenny Client (4354324324)</a></li>
            </ul>
            <div class="card-actions ">
                <a href="" class="btn btn-primary btn-block">All clients transfering in</a>
            </div>
        
                </div>
            </div></div>
    </div> <!-- /.row -->

Cards with active status

Card title

Description: Administrator

You are currently signed in as administrator

You are currently signed in as Administrator

Card title

Description: Administrator

You are currently signed in as administrator

You are currently signed in as Administrator

Card title

Description: Administrator

You are currently signed in as administrator

You are currently signed in as Administrator

Copy


    <div class="row g-4">
        <turas-card card-heading="Card title" is-active="True">

            <p><strong>Description: </strong>Administrator</p>
            <p>You are currently signed in as administrator</p>
            <p>You are currently signed in as Administrator</p>
        </turas-card>

        <turas-card card-heading="Card title" is-active="True">

            <p><strong>Description: </strong>Administrator</p>
            <p>You are currently signed in as administrator</p>
            <p>You are currently signed in as Administrator</p>
        </turas-card>

        <turas-card card-heading="Card title" is-active="True">

            <p><strong>Description: </strong>Administrator</p>
            <p>You are currently signed in as administrator</p>
            <p>You are currently signed in as Administrator</p>
        </turas-card>
    </div>

Copy


    <div class="row g-4">
        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  active">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    

            <p><strong>Description: </strong>Administrator</p>
            <p>You are currently signed in as administrator</p>
            <p>You are currently signed in as Administrator</p>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  active">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    

            <p><strong>Description: </strong>Administrator</p>
            <p>You are currently signed in as administrator</p>
            <p>You are currently signed in as Administrator</p>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  active">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    

            <p><strong>Description: </strong>Administrator</p>
            <p>You are currently signed in as administrator</p>
            <p>You are currently signed in as Administrator</p>
        
                </div>
            </div></div>
    </div>

Cards without link

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Copy


    <div class="row g-4">
        <turas-card card-heading="Card title">
            <turas-lorem />
        </turas-card>

        <turas-card card-heading="Card title">
            <turas-lorem />
        </turas-card>

        <turas-card card-heading="Card title">
            <turas-lorem />
        </turas-card>
    </div>

Copy


    <div class="row g-4">
        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></div>

        <div class="col-md-6 col-lg-4  ">
            <div class="card landingBlock h-100  ">
                
                <div class="card-heading">
                            <h3 class="card-title">Card title</h3>
                        </div> 
                <div class="card-body d-flex flex-column">
                    
            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
        
                </div>
            </div></div>
    </div>

Optional parameters

card-heading - the card heading or title
card-heading-level - change the default h3 card heading level for symanticaly correct html, for example h2, h4
card-link - the card hyperlink
card-icon-image - the card image icon source
column-classes - change the default col-md-6 col-lg-4 widths of the cards using bootstrap classes
is-active - setting is-active="true" inserts a tick icon before the card title
additional-classes - additional CSS classes
id - the HTML ID attribute

Accessibility status

This component is fully compliant with the WCAG 2.2 standard.

Testing

check keyboard navigation to ensure the card is in an expected tab order and doesn't cause a keyboard trap
if the card is interactive check that you can activate it with the enter or return key
if there are any additional elements within the card such as buttons make sure that they are also accessible with a keyboard
make sure focus is visible
test card component with screen readers to make sure all content is read out and check that content within each card is grouped together and announced as a cohesive unit
for example, the title, image, description, and any buttons or links should be read as part of the same card

Developer considerations

ensure that each card has a clear, descriptive heading, which is often the first element announced by the screen reader (such as <h2>, <h3> etc)
if the cards are expandable you must tell users their current states so make sure ARIA expanded = "false" is used for closed states and expanded = "true" is used for open states
if the content within a card changes dynamically (such as updated content based on user interaction) use ARIA live region aria-live="polite" or aria-live="assertive" to notify screen reader users of these updates
ensure that focus is correctly managed when content changes
for example, if a card expands to reveal more content the focus should move to the newly visible content

Buttons

Footer

Cards

Examples

Usage

References

Card with heading link and text

Card title

Card title

Card title

Card with icon, heading and text

Card title

Card title

Cards with heading, text and multiple call-to-action buttons

Looking for inspiration?

Card with heading link and text

Card title

Card title

Card title

Card with icon, heading and text

Card title

Card title

Card title

Cards with heading, text and single call-to-action button

Card title

Card title

Card title

Cards with heading, text and multiple call-to-action buttons

Looking for inspiration?

Looking for inspiration?

Cards with heading, link list and single call-to-action button

Complete client transfer

Complete client transfer

Complete client transfer

Cards with active status

Card title

Card title

Card title

Cards without link

Card title

Card title

Card title

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Form components

Was this page helpful?