Toggle menu
  1. Community Area
  2. Release Notes
  3. Video Guides
  4. Example Content
  5. MyGOSS

Item

Item components are designed to display key information in a clear, concise manner while maintaining an easy-to-navigate page layout.

item component icon

Item components make it easy to organise and present individual pieces of content in a structured and user-friendly way. They are ideal for highlighting specific details, actions, or media within a list or collection. Additionally, item components are versatile, offering customisation options to fit various designs and use cases while maintaining a clean and consistent layout.

When to use this component

Item components are designed to display specific pieces of information or content in a clear and organised way, making it easy for users to engage with individual elements. They are ideal for presenting text, media, or actions within a list or structured layout. Additionally, item components can be customised to fit different designs and use cases, enhancing usability and keeping the overall experience consistent and streamlined.

Examples in GOSS products

  • Preview of articles in the List template
  • List items on panels for the Panel template

 

Accessibility considerations

Item components are a great way to present individual pieces of content in an organised, easy-to-scan format. They often combine text, media, and actions, making them ideal for listing details like contacts, products, or tasks.

To make item components accessible, use a clear HTML structure, ensure sufficient colour contrast, and make interactive elements keyboard-friendly. Providing meaningful labels or descriptive text can enhance usability for screen readers. By following these guidelines, item components can be both user-friendly and inclusive for all users.

Basic item

A item with no additional configuration options.

By default, the item displays HTML content within the content section.

Item content
HTML .NET 
<div class="item">
	<div class="item__content">
		Item content
	</div>
</div>
@{
	
	var basicItem = (IListable)Model.Model.BasicItem;
}
@{
	Html.Item(basicItem, 2, null);
}

Item with title

A item with the title element.

<h3 class="item__title">...</h3>

This allow you to style all your item titles the same using the item__title class.

The element can be changed to be a heading element e.g. H2/H3 based on your structural needs.

Item title

HTML 
<div class="item">
	<div class="item__content">
		<h3 class="item__title">
			Item title
		</h3>
	</div>
</div>

Item with link title

A item with a link title option.

<a href="#"   class="card__link card__link--heading" aria-labelledby="link-ID label-ID"  id="link-ID">...</a>

By making the title a link, users are provided with a clear, intuitive way to access more detailed information related to that title.

This enhances navigation, improves accessibility for screen readers, and helps organise content effectively.

Item title with link

HTML .NET 
<div class="item">
	<div class="item__content">
		<h3 class="item__title">
			<a href="#" class="item__link">
				Item title with link
			</a>
		</h3>
	</div>
</div>
@{
	var itemWithLinkTitle = (IListable)Model.Model.ItemWithLinkTitle;
	
}
@{
	Html.Item(itemWithLinkTitle, 2, null);
}

Item with image

An item with an image option.

<div class="card__imagecontainer">...</div>

By adding an image to an item 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 item component. use the responsive image component in order to serve the correct image size for the component space.

Item title with image

HTML .NET 
<div class="item">
	<div class="item__imagecontainer">
		<img alt="" src="https://dynamicdemo.gossinteractive.com/image/6449/Jellyfish/desktopPanelImage.jpeg"
			class="gi-responsiveimage__image gi-responsiveimage--item">
	</div>
	<div class="item__content">
		<h3 class="item__title">
				Item title with image
		</h3>
	</div>
</div>
@{
	var itemWithImage = (IListable)Model.Model.ItemWithImage;

}
@{
	Html.Item(itemWithImage, 2, null);
}

Item content options

An item with a body and list sections

<div class="item__body">...</div>

By adding a body section to an item 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.

<ol class="item__sublinks">
     <li>
         <a href="" class="item__sublink item__sublink--list">...</a>
     <li>
</ol>

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.

Item title

Item body text
  1. Child article link
  2. Child article link
  3. Child article link
HTML .NET 
<div class="item">
	<div class="item__content">
		<h3 class="item__title">
			Item title
		</h3>
		<div class="item__body">
			Item body text
		</div>
		<ol class="item__sublinks">
			<li>
				<a href="#" class="item__sublink item__sublink--list">Child article link</a>
			</li>
			<li>
				<a href="#" class="item__sublink item__sublink--list">Child article link</a>
			</li>
			<li>
				<a href="#" class="item__sublink item__sublink--list">Child article link</a>
			</li>
		</ol>
	</div>
</div>
@{
	var items = Model.Model.ListItems;

}


@{
	<div class="item">
		<div class="item__content">
			<h3 class="item__title">
				Item title
			</h3>
			<div class="item__body">
				Item body text
			</div>
			<ol class="item__sublinks">
				@foreach (IListable item in items)
				{
					var article = ((ListableArticle)item).Article;
					using (Html.ArticleLink(article, null, "item__sublink item__sublink--list"))
					{
						@Html.ArticleLinkText(article)
					}

				}
			</ol>
		</div>
	</div>
}

Media item

An item displaying media type preview options

item item--media

To add the media links to the item component. use the media link component in order to serve the same mark up for all media links.

Media item title (Media type)

Media item descripton
  1. pdf ( PDF, 1 MB) (opens new window)
HTML .NET 
<div class="item item--media">
	<div class="item__imagecontainer">
		<img src="/images/icons/pdf.png" width="150" height="150" class="item__image" alt="">
	</div>
	<div class="item__content">
		<h3 class="item__title">
			Media item title (Media type)
		</h3>
		<div class="item__body">
			Media item descripton
		</div>
		<ol class="item__sublinks">
			<li>
				<a href="#" class="media-link media-link--pdf" target="_blank">
					<span class="media-link__text">pdf</span>
					<span class="media-link__bracket"> (</span>
					<span class="media-link__type">PDF, </span>
					<span class="media-link__filesize">1 MB</span><span class="media-link__bracket">)</span>
					<span class="media-link__newwindow"> (opens new window)</span></a>
			</li>
		</ol>
	</div>
</div>
@{
	var item = Model.Model.MediaItem;

}


@{
	Html.Item(item, 2, null);
}