Close

Cards

Cards provide a set of content which act as an entry point to more detailed information.

Three cards

An example of a three card component.

Ethical AI

Our world-class researchers are invaluable to us all.

Environment and Sustainability

Our world-class researchers are invaluable to us all.

Migration and Refugees

Our world-class researchers are invaluable to us all.

 
<div class="columns">
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/1e4ec6bf-2e93-44c8-aa1e-61e130632fa5/ethical-ai.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Ethical AI</h3>
                        <p>Our world-class reseachers are invaluable to us all.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/4d571c06-6696-479e-ac86-b1d26ef9deab/enviro.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Environment and Sustainability</h3>
                        <p>Our world-class reseachers are invaluable to us all.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/350020de-d410-4eb1-872c-51a0c7d53243/migration.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Migration and Refugees</h3>
                        <p>Our world-class reseachers are invaluable to us all.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Four cards

An example of a four card component.

Migration and hospitality

Disciplinary lenses and perspectives from diverse regions of the world on issues, such as: invisibility and stigma and the policies shaping migrant vulnerability.

Mobility, Migration and Wellbeing

Empirical, conceptual and methodological papers and case studies on different themes of mobility and migration.

Culture, Identities and Divisions

This is an interdisciplinary group which focuses on the empirical and theoretical investigations into multiple facets of cultures, identities and divisions.

Migration and Refugees

Histories, Memoirs and Narratives.

 
<div class="columns">
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#" title="Migration and hospitality">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/a141fa5d-be40-49b5-bf90-90dbb0777aec/research-group1.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Migration and hospitality</h3>
                        <p>Disciplinary lenses and perspectives from diverse regions of the world on issues, such as: invisibility and stigma and the policies shaping migrant vulnerability.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#" title="Mobility, Migration and Wellbeing">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/66a53541-3f61-49f1-ae3d-cf95ef298141/research-group2.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Mobility, Migration and Wellbeing</h3>
                        <p>Empirical, conceptual and methodological papers and case studies on different themes of mobility and migration.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#" title="Culture, Identities and Divisions">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/2d9088b9-cfb5-43c5-b591-b2d2c87621a6/research-group3.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Culture, Identities and Divisions</h3>
                        <p>This is an interdisciplinary group which focuses on the empirical and theoretical investigations into multiple facets of cultures, identities and divisions.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#" title="Migration and Refugees">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/getmedia/ae6bfba4-67be-415b-a272-7315080caa87/research-group4.jpg" alt=""></figure>
                </div>
                <div class="card-content card-default-content">
                    <div class="content">
                        <h3 class="is-size-4">Migration and Refugees</h3>
                        <p>Histories, Memoirs and Narratives.</p>
                        <div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Cards with no image

Example of the card component without images.

PsycInfo

The key database for psychology

Brookes APA referencing guide

How to reference using APA style

Web of Science

Another important database covering psychology resources

More databases

Improve your marks by searching these too

 
<div class="columns">
	<div class="column">
		<div class="card card-default card-single">
			<a class="card-link" href="#" title="">
				<div class="card-content">
					<div class="content">
						<h3 class="is-size-4">PsycInfo</h3>
						<p>The key database for psychology</p>
						<div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
					</div>
				</div>
			</a>
		</div>
	</div>
	<div class="column">
		<div class="card card-default card-single">
			<a class="card-link" href="#" title="">
				<div class="card-content">
					<div class="content">
						<h3 class="is-size-4">Brookes APA referencing guide</h3>
						<p>How to reference using APA style</p>
						<div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
					</div>
				</div>
			</a>
		</div>
	</div>
	<div class="column">
		<div class="card card-default card-single">
			<a class="card-link" href="#" title="">
				<div class="card-content">
					<div class="content">
						<h3 class="is-size-4">Web of Science</h3>
						<p>Another important database covering psychology resources</p>
						<div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
					</div>
				</div>
			</a>
		</div>
	</div>
	<div class="column">
		<div class="card card-default card-single">
			<a class="card-link" href="#" title="">
				<div class="card-content">
					<div class="content">
						<h3 class="is-size-4">More databases</h3>
						<p>Improve your marks by searching these too</p>
						<div class="card-default-arrow"><span class="card-default-icon fas fa-chevron-right" aria-hidden="true"></span></div>
					</div>
				</div>
			</a>
		</div>
	</div>
</div>

Accessibility

Don’t use generic link text. Vague text like “click here” and “read more” is confusing and repetitive, especially to screen readers. Link text should describe the destination and explain where users will go if they follow the link.

Avoid opening links in a new tab or window. This can be disorienting for people with low vision or who are navigating via screen reader, especially when there is no warning.