Cards are designed to help display important information in a clear, eye-catching way while keeping the page easy to explore.
Card components make it easy to organise and present content in a structured, visually appealing way while keeping the layout clean and user-friendly. You can use cards to highlight key information, include images or actions, and even group related content. Additionally, cards are flexible, allowing for customisation to suit different designs and use cases.
When to use this component
Cards are designed to neatly display information or content in a contained area, making it easy for users to scan and engage. They are perfect for organising related elements, such as text, images, and actions, into a visually appealing format. Additionally, cards can be customised to suit various layouts and use cases, helping to enhance user engagement and streamline navigation.
Examples in GOSS products
- Case Search template to display cases in a considerate and user-friendly way
- Self Service/User Requests template to show progress through the process
- Search template when configured to display results as cards
- Contact Directory template to show the previews of contacts
Accessibility considerations
Card HTML components are a great way to organise and display content in a neat, easy-to-scan format. They often combine text, images, and actions, making them perfect for showcasing related information like profiles, products, or articles.
To make cards accessible, use clear HTML structure, ensure good colour contrast, and keep interactive elements keyboard-friendly. Adding helpful labels can improve usability for screen readers. With these considerations, cards can be both user-friendly and inclusive for everyone.
Basic card
A card with no additional configuration options.
By default, the card displays HTML content within the content section.
<div class="card">
<h3 class="card__heading"></h3>
<div class="card__content">
Card contents
</div>
</div><comp:card>
Card contents
</comp:card>@{
var cardModel = new CardModel()
{
Id = "",
Label = "",
Modifiers = new string[] { },
Title = "",
Href = "",
};
using (Html.Card(cardModel))
{
<p>Card contents</p>
}
}Card with title
A card with the heading element.
<h3 class="card__heading">...</h3>
This allows you to style all your card headings the same using the card__heading class.
The element can be changed to be a heading element eg H2/H3 based on your structure.
Card title text
<div class="card">
<h3 class="card__heading">Card title text</h3>
<div class="card__content">
Card contents
</div>
</div><comp:card title="Card title text">
Card contents
</comp:card>@{
var cardModel = new CardModel()
{
Id = "",
Label = "",
Modifiers = new string[] { },
Title = "Card title text",
Href = "",
};
using (Html.Card(cardModel))
{
<p>Card contents</p>
}
}Card with label
A card with a label option.
<span id="..." class="card__labeltxt">...</span>
By setting the label HTML on the card, the user can provide context and clarity, improving usability and accessibility, especially for screen reader users.
Ensure the ID attribute is included, particularly for linked titles, to help screen readers identify and announce the category clearly.
Card title text
<div class="card">
<div class="card__label">
<span id="c_1842762901037900_labeltxt" class="card__labeltxt">Card label text</span>
</div>
<h3 class="card__heading">Card title text</h3>
<div class="card__content">
Card contents
</div>
</div><comp:card title="Card title text" label="Card label text">
Card contents
</comp:card>@{
var cardModel = new CardModel()
{
Id = "card__example",
Label = "Card label text",
Modifiers = new string[] { },
Title = "Card title text",
Href = "",
};
using (Html.Card(cardModel))
{
<p>Card contents</p>
}
}Card with linkaddress
A card with a link title option.
<a href="#" class="card__link card__link--heading" aria-labelledby="link-ID label-ID" id="link-ID">...</a>
By setting the title HTML on the card and making the title a link, the user can provide context and clarity while improving usability and accessibility, especially for screen reader users.
This ensures the title is easily identified and actionable.
Card title text
<div class="card">
<h3 class="card__heading"><a href="#" class="card__link card__link--heading">Card title text</a></h3>
<div class="card__content">
Card contents
</div>
</div><comp:card title="Card title text" linkaddress="#">
Card contents
</comp:card>@{
var cardModel = new CardModel()
{
Id = "card__example",
Label = "",
Modifiers = new string[] { },
Title = "Card title text",
Href = "#",
};
using (Html.Card(cardModel))
{
<p>Card contents</p>
}
}Card with image
A card with an image option.
<div class="card__imagecontainer">...</div>
By adding an image to a card component, you can enhance visual appeal and provide additional context, making the content more engaging and easier to understand. Images can help convey information quickly, especially when paired with text, and improve the overall user experience.
To add the image to the card component. use the responsive image component in order to serve the correct image size for the component space.
Card title text
<div class="card">
<h3 class="card__heading">Card title text</h3>
<div class="card__content">
<div class="card__imagecontainer">
<img alt="" src="https://dynamicdemo.gossinteractive.com/image/6449/Jellyfish/desktopPanelImage.jpeg" class="gi-responsiveimage__image gi-responsiveimage__image--search gi-responsiveimage__image--card">
</div>
Card content
</div>
</div><comp:card title="Card title text">
<div class="card__imagecontainer">
<!--@elvariable id="frontEndMocksAction" type="com.gossinteractive.creative.template.frontendmocks.template.FrontEndMocksAction"-->
<comp:responsiveImage
media="#{frontEndMocksAction.singleMediaImageMock}"
modifiers="search,card"
alt="#{frontEndMocksAction.singleMediaImageMock.description}" />
Card content
</div>
</comp:card>@{
var cardModel = new CardModel()
{
Id = "",
Label = "",
Modifiers = new string[] { },
Title = "Card change text",
Href = "",
};
using (Html.Card(cardModel))
{
<div class="card__imagecontainer">
@{
Html.ResponsiveImage(new ResponsiveImageModel()
{
Media = Model.Model.Image,
Modifiers = new string[] { "search", "card" },
ImgAltText = Model.Model.Image.Description
});
}
</div>
<p>Card contents</p>
}
}Card content options
A card with a summary and list sections
<p class="card__summary">...</p>
By adding a summary section to a card component allows users to quickly grasp the key points without needing to read through all the content. This helps streamline the experience by providing an overview, especially for users who are skimming or need to make quick decisions.
<ul class="card__list">
<li class="nvp">...</li>
</ul>
Adding a structured list section to a card component helps organise information in a clear, easy-to-follow format. This allows users to quickly identify key details, such as features, benefits, or steps, making the content more digestible.
To add the list to the card component. use the NVP component in order the data in a uniform way.
Card heading
Card summary
- Label Value
- Label Value
<div class="card">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
</div><comp:card title="Card heading">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</comp:card>@{
var cardModel = new CardModel()
{
Id = "",
Label = "",
Modifiers = new string[] { },
Title = "Card heading",
Href = "",
};
using (Html.Card(cardModel))
{
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
}Card with actions
A card with an actions section.
<div class="card__actions">
<a href="#" class="cta-link">...</a>
</div>
Adding an actions section to a card component provides users with clear, easy-to-access options for interacting with the content. This section helps streamline user interactions by offering relevant actions in a focused space, making it simple for users to take the next step.
You can use CTA link and Button components within the action sections depending on the use case.
<div class="card">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
Card content
</div>
<div class="card__actions">
<a href="#" class="cta-link cta-link--fullwidth cta-link--contrast">
CTA link with full width and contrast modifiers
</a>
</div>
</div><!-- This isn't a mistake, Java doesn't support actions outside of the content block -->
<div class="card">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
Card content
</div>
<div class="card__actions">
<a href="#" class="cta-link cta-link--fullwidth cta-link--contrast">
CTA link with full width and contrast modifiers
</a>
</div>
</div><!-- This isn't a mistake, .NET doesn't support additional modifiers for the actions block-->
<div class="card">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
Card content
</div>
<div class="card__actions">
<a href="#" class="cta-link cta-link--fullwidth cta-link--contrast">
CTA link with full width and contrast modifiers
</a>
</div>
</div>User request card examples
Cards with additional styles options applied for the User Requests template.
card--userquest card--inprogress
By setting the card--inprogress class on a card, you can visually indicate that the content or task is still in progress, helping users understand the current status at a glance.
card--userquest card--completed
By setting the card--complete class on a card, you can clearly indicate that the content or task has been completed.
Card heading
Card heading
<div class="card card--userquest card--inprogress">
<div class="card__label">
<span id="c_11780759406976_labeltxt" class="card__labeltxt">Card label (In Progress)</span>
</div>
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
Card content
</div>
</div>
<div class="card card--userquest card--complete">
<div class="card__label">
<span id="c_11780759406976_labeltxt" class="card__labeltxt">Card label (Complete)</span>
</div>
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
Card content
</div>
</div><comp:card title="Card heading" modifiers="userrequest,inprogress" label="Card label (In Progress)">
Card content
</comp:card>
<comp:card title="Card heading" modifiers="userrequest,complete" label="Card label (Complete)">
Card content
</comp:card>@{
using (Html.Card(new CardModel()
{
Id = "card__examples",
Label = "Card label (In Progress)",
Modifiers = new string[] { "userrequest", "inprogress" },
Title = "Card heading",
Href = "",
}))
{
<p>Card content</p>
}
using (Html.Card(new CardModel()
{
Id = "card__examples",
Label = "Card label (In Progress)",
Modifiers = new string[] { "userrequest", "complete" },
Title = "Card heading",
Href = "",
}))
{
<p>Card content</p>
}
}Form card examples
Cards with additional styles options applied for the Forms Service template.
card--forms card--selected
By setting the card--selected class on a card, you can visually highlight the card as being active or chosen, helping users easily identify their selection.
<div class="card card--forms">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
<div class="card__actions">
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--edit" href="#">Edit</a>
</div>
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--delete" href="#">Remove</a>
</div>
</div>
</div>
<div class="card card--forms card--selected">
<div class="card__label">
<span id="111" class="card__labeltxt">Selected</span>
</div>
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
<div class="card__actions">
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--edit" href="#">Edit</a>
</div>
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--delete" href="#">Remove</a>
</div>
</div>
</div><!-- This isn't a mistake, Java doesn't support actions outside of the content block -->
<div class="card card--forms">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
<div class="card__actions">
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--edit" href="#">Edit</a>
</div>
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--delete" href="#">Remove</a>
</div>
</div>
</div>
<div class="card card--forms card--selected">
<div class="card__label">
<span id="111" class="card__labeltxt">Selected</span>
</div>
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
<div class="card__actions">
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--edit" href="#">Edit</a>
</div>
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--delete" href="#">Remove</a>
</div>
</div>
</div><!-- This isn't a mistake, .NET doesn't support custom content within the actions block -->
<div class="card card--forms">
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
<div class="card__actions">
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--edit" href="#">Edit</a>
</div>
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--delete" href="#">Remove</a>
</div>
</div>
</div>
<div class="card card--forms card--selected">
<div class="card__label">
<span id="111" class="card__labeltxt">Selected</span>
</div>
<h3 class="card__heading">Card heading</h3>
<div class="card__content">
<p class="card__summary">Card summary</p>
<ul class="card__list">
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
<li class="nvp">
<span class="nvp__label">Label</span>
<span class="nvp__value">Value</span>
</li>
</ul>
</div>
<div class="card__actions">
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--edit" href="#">Edit</a>
</div>
<div class="icmlink-surround">
<a class="icmlink icmlink--summaryaction cta-link cta-link--link cta-link--delete" href="#">Remove</a>
</div>
</div>
</div>Share this page
