• Accordion
• Breadcrumb
• Buttons
• Content card
• File Download
• Form elements
• Hub header
• Inset text
• Links
• Loader
• Page header
• Phase indicator
• Warning text

Content card

About

Content cards contain components and text. Against the page background, they help to draw the users attention to important information and help users to navigate content.

The cards have many common use cases and applications, all of which can be found on the content cards pattern page.

Content card

What is it?

• A container with a white background and purple underline.
• Any components and text can be used within a card.

When not to use it?

• When it is used in a set of cards for navigation purposes. Instead, use a Navigation card.

Regular Card

<div class="wmre-content-card    ">
    
    
    
    <div class="wmre-p-sm">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
</div>

With Image

Component example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Markup

<div class="wmre-content-card    ">
    
        <img 
        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&amp;mode=crop&amp;width=896&amp;height=334&amp;rnd=132122595620000000" alt="content image">
    
    
    
    <div class="wmre-p-sm">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
</div>

Without Image

<div class="wmre-content-card    ">
    
    
    
    <div class="wmre-p-sm">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
</div>

Navigation card

What is it?

• A variation of the Content card where the whole card area is clickable.

When to use it?

• When it is part of a set of cards used for navigation.
• When the whole card needs to be clickable.

When not to use it?

• When multiple interactive components within the card are used. Instead, use a Content card.

Navigation Card

<a href="#" target="_self" class="wmre-content-card    ">
    
    
    
    <div class="wmre-p-sm">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
</a>

With Image

Component example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Markup

<a href="#" target="_self" class="wmre-content-card    ">
    
        <img 
        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&amp;mode=crop&amp;width=896&amp;height=334&amp;rnd=132122595620000000" alt="content image">
    
    
    
    <div class="wmre-p-sm">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
</a>

Call To Action Card

<a href="#" target="_self" class="wmre-content-card--blue    ">
    
    
        <div class="wmre-p-sm">
            <svg>
                <use xlink:href="#wmre-general-toolkit" href="#wmre-general-toolkit"></use>
            </svg>
            <h2>Lorem ipsum dolor sit amet</h2>
        </div>
    
</a>

Event Card

<a href="#" target="_self" class="wmre-content-card wmre-content-card--event   ">
    
    
    
        <div class="wmre-p-sm">
            <h3>Event</h3>
            <p>24 January 2021</p>
            <p>A short sentence explaining what this is, it can be 2 lines.</p>
        </div>
    
</a>

News Card

Component example

24 January 2021

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML Markup

<div class="wmre-content-card  wmre-content-card--news  ">
    
        <img 
        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg" alt="content image">
    
    
    
    
        <p>24 January 2021</p>
        <h3><a href="#">Lorem ipsum dolor sit amet</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    
</div>