Checkerboard
How to use
Each checkerboard item is a separate piece of content. Adjacent checkerboard content items are wrapped together to create a group of checkerboards.
For the first checkerboard in a group:
- Add a Heading
For each checkerboard:
- Select a suitable image from the Media Library for the Image.
Recommend image is at least 860px x 860px. The image can be any size or aspect ratio, and will be cropped and resized to a square 860px x 860px image automatically by a service called PXL. Find out how PXL crop and resize works. - Optionally add an Image Caption
- Optionally paste in the full URL to a YouTube or Vimeo video for the Video URL e.g., for YouTube https://youtu.be/zTurtwfQ5yU or https://www.youtube.com/watch?v=zTurtwfQ5yU and for Vimeo https://vimeo.com/758783444
- Add a Title
- Optionally add a Description. This is a WSYIWYG area, see WYSIWYG Content options, but consider the space available.
- Optionally add a CTA Button. Add CTA - Title for the button text and either select a section or content item for the CTA - Internal Link (ignore the Use default link text checkbox), or paste the full URL for the CTA - External Link (do not enter both)
- Optionally add up to 3 Links. For each link add Link for the link text and either select a section or content item for the Internal Link (ignore the Use default link text checkbox), or paste the full URL for the External Link (do not enter both)
- To optionally add a Subcard add at least 1 of the following (see Subcard examples):
- Select a suitable image from the Media Library for the Subcard - Icon. Recommended image size is 140px x 140px.
- Or add a Subcard - Number e.g., >80%
- Add a Title
- Add a Description
Content Type Details
ID: 7272
Name: Checkerboard
Description: This flexible component features information focused on one subject per item; called a "checkerboard" due to the visual impression from two or more placed consecutively.
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Heading | Add a Heading, for example "Frequently asked questions" | 150 Characters | Plain Text | No |
| General Description | Plaintext introduction | 200 Characters | Plain Text | No |
| Optional Link Title | Title for the Optional Link | 50 Characters | Plain Text | No |
| Optional Link Internal Link | Internal Link for the Optional Link | N/A | Section/Content Link | No |
| Optional Link External Link | External Link for the Optional Link | 250 Characters | Plain Text | No |
| Image | Select a suitable image from the Media Library for the Image | N/A | Media | Yes |
| Image Caption | Add an Image Caption | 150 Characters | Plain Text | No |
| Video URL | Paste in a Video URL | 250 Characters | Plain Text | No |
| Title | Add a Title | 150 Characters | Plain Text | Yes |
| Description WYSIWYG | Add a Description | 1500 Characters | HTML | No |
| CTA - Title | Add text for the CTA | 50 Characters | Plain Text | No |
| CTA - Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| CTA - External Link | Enter URL for external link, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 1 | Add link text | 50 Characters | Plain Text | No |
| Internal Link 1 | Select a section/content for an internal link | N/A | Section/Content Link | No |
| External Link 1 | Enter URL for external link, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 2 | Add link text | 50 Characters | Plain Text | No |
| Internal Link 2 | Select a section/content for an internal link | N/A | Section/Content Link | No |
| External Link 2 | Enter URL for external link, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 3 | Add link text | 50 Characters | Plain Text | No |
| Internal Link 3 | Select a section/content for an internal link | N/A | Section/Content Link | No |
| External Link 3 | Enter URL for external link, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Subcard - Number | Add a Subcard Number | 5 Characters | Plain Text | No |
| Subcard - Icon | Select a suitable image from the Media Library for the Icon, only use if not adding a Subcard - Number | N/A | Media | No |
| Subcard - Title | Add a Subcard Title | 50 Characters | Plain Text | No |
| Subcard - Description | Add a Subcard Description | 150 Characters | Plain Text | No |
Examples
Mixed Examples
Checkerboard Section Heading
General Description Field. To add a link choose an internal or external link. The Link Text is required if you want a link.
/0x0:860x860/prod01/channel_34/media/seattle-university/site-assets/component-library/page-designs/49-860X860.jpg)
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
/0x0:860x860/prod01/channel_34/media/seattle-university/site-assets/component-library/page-designs/50-860X860.jpg)
Sed posuere consectetur est at lobortis
Plain text vestibulum id ligula porta felis euismod semper.
Plain text fact title
Plain text fact description
/0x0:860x860/prod01/channel_34/media/seattle-university/site-assets/component-library/page-designs/51-860X860.jpg)
Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam
Plain text vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.
/prod01/channel_34/media/seattle-university/site-assets/component-library/page-designs/trees-icon.png){kind=icon}
Plain text fact title
Plain text fact description
Recommended Minimum Text and Long Captions
Checkerboard Section Mimimums. Oh and long captions.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
With Buttons and Links
Checkerboard Section Button and Links
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading vestibulum id ligula porta felis euismod semper.
Plain text vestibulum id ligula porta felis euismod semper.
With Videos, Buttons and Links
Checkerboard Section Videos, Button and Links
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
With Subcards
Checkerboard Section with Stat Cards
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text fact title
Plain text fact description
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text fact title
Plain text fact description
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text fact title
Plain text fact description
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text checkerboard heading
Plain text vestibulum id ligula porta felis euismod semper.
Plain text fact description
Using WYSIWYG Description
Checkerboard Section using WYSIWYG options
Plain text checkerboard heading
Vestibulum id ligula porta felis euismod semper.
- Fusce dapibus
- Tellus ac cursus commodo
- Donec ullamcorper nulla
- Non metus auctor fringilla
Donec sed odio dui. Aenean eu leo quam.
Plain text checkerboard heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
Lorem2 ipsum dolorfootnote sit amet, consectetur reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Plain text checkerboard heading
Lorem ipsum dolor sit amet, consectetur reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Blockquote text. Blandit sit amet non magna.
Plain text checkerboard heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum felis et quam ornare lobortis. Duis id purus eu ex convallis mollis in ac dui. Donec pretium ipsum vitae commodo porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vestibulum mi non