Resource Thumbnail

Description

The resource thumbnail component renders a sample of blog posts or collection pages, based on a tag which is used as a filter. The thumbnail can be rendered with an optional 'view all' link to redirect the user to more content.

Default Resource Thumbnail

Rendered


CircleCI Accessibility Conformance Report

Read how CircleCI meets accessibility requirements. Contact us to get a copy of the report.

Code.org's Approach to Testing

Learn how Code.org approaches testing throughout the product development cycle with CircleCI and Sauce Labs. (1:00:25 min)


Resource Thumbnail w/ Header and View All

Rendered


This is a Header

CircleCI Accessibility Conformance Report

Read how CircleCI meets accessibility requirements. Contact us to get a copy of the report.

Code.org's Approach to Testing

Learn how Code.org approaches testing throughout the product development cycle with CircleCI and Sauce Labs. (1:00:25 min)


Options

classes : string

header : string

anchor : string
An optional anchor, to be used for jump links within a page.

container : fluid | null
An optional input that sets a fluid wrapper around the component, causing it expand and contract continuously, instead of at break points.

center_header : true | null
If set, this input centers the header text. Requires header input. Requires header.

view_all : string
An optional input that sets a link path and triggers the display of a link to more content. The display name of the link defaults to `view [header]` if not set by link_title (see below). Requires header.

link_title : string
An optional value that sets the display name of the view_all link.

items : array
This is a required field, which passes data from a jekyll collection to generate the component's content.


Default Resource Thumbnail

Code


{% assign items = site.data.en.resources | where: "tags", "government" %} {% include components/resource-thumbnail.html classes="margin-medium-vertical" items=items %}

Rendered


CircleCI Accessibility Conformance Report

Read how CircleCI meets accessibility requirements. Contact us to get a copy of the report.

Code.org's Approach to Testing

Learn how Code.org approaches testing throughout the product development cycle with CircleCI and Sauce Labs. (1:00:25 min)


Resource Thumbnail w/ Header and View All

Code


{% assign items = site.data.en.resources | where: "tags", "government" %} {% include components/resource-thumbnail.html classes="margin-medium-vertical" header="This is a Header" view_all="/link-to-more/" link_title="all" items=items %}

Rendered


This is a Header

CircleCI Accessibility Conformance Report

Read how CircleCI meets accessibility requirements. Contact us to get a copy of the report.

Code.org's Approach to Testing

Learn how Code.org approaches testing throughout the product development cycle with CircleCI and Sauce Labs. (1:00:25 min)