1. Design System
  2. Components
  3. Cards

Cards

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

Three cards

An example of a three card component.

<div class="columns">
    <div class="column">
        <div class="card card-default">
            <a class="card-link" href="#" title="Ethical AI">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/design-system/assets/img/ethical-ai.jpg" alt="" title=""></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="#" title="Environment and Sustainability">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/design-system/assets/img/enviro.jpg" alt="" title=""></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="#" title="Migration and Refugees">
                <div class="card-image">
                    <figure class="image is-16by9"><img src="/design-system/assets/img/migration.jpg" alt="" title=""></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>

The card component comprises several elements that you can mix and match:

  • card: the main container
    • card-header: a horizontal bar with a shadow
      • card-header-title: a left-aligned bold text
      • card-header-icon: a placeholder for an icon
    • card-image: a fullwidth container for a responsive image
    • card-content: a multi-purpose container for any other element
    • card-footer: a horizontal list of controls
      • card-footer-item: a repeatable list item

Four cards

An example of a four card component.

<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="/design-system/assets/img/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="/design-system/assets/img/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="/design-system/assets/img/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="/design-system/assets/img/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>

The card component comprises several elements that you can mix and match:

  • card: the main container
    • card-header: a horizontal bar with a shadow
      • card-header-title: a left-aligned bold text
      • card-header-icon: a placeholder for an icon
    • card-image: a fullwidth container for a responsive image
    • card-content: a multi-purpose container for any other element
    • card-footer: a horizontal list of controls
      • card-footer-item: a repeatable list item

Cards with no image

Example of the card component without images.

<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>

The card component comprises several elements that you can mix and match:

  • card: the main container
    • card-header: a horizontal bar with a shadow
      • card-header-title: a left-aligned bold text
      • card-header-icon: a placeholder for an icon
    • card-image: a fullwidth container for a responsive image
    • card-content: a multi-purpose container for any other element
    • card-footer: a horizontal list of controls
      • card-footer-item: a repeatable list item

Accessibility