Topics Columns
AKA – Topic Columns 3 Up
Contents
Description
3 column layout
Column 1 – [feature]
Column 2 – [references_3]
Column 3 – [references_2]
Images optional for items in columns 2 and 3
Sponsored content available for items in columns 1 and 2
Gated content available for items in column 2
Description text does not render for items in column 2
Requirements
Component is available on Source landing pages only.
Component will be manually curated.
The eyebrow of each item in the component will be the first topic of the specified detail page. For example, if an admin selects Modeling storm sewer networks and urban flooding, the component will display "flooding" as the eyebrow.
If a Source detail page includes a sponsor, the text will be pulled in and displayed above the topic. This will only be done for the first and third columns, due to space considerations. There will be no linking.
Component is laid out into three columns, each with a fixed width:
Column 1: reserved for main featured item. Referenced Fields:
Page featured image
Page title
Page teaser text
Topic - renders as eyebrow
Comments (universally if there are no comments, comment bubble doesn't appear (no "0" in comment bubble)
Column 2: narrow column reserved for 3 referenced pages. Referenced Fields:
Page featured Image
Page title
Comments
Topic - renders as eyebrow
Column 3: reserved for two referenced pages. Referenced Fields:
Page featured image ONLY FOR FIRST ITEM
Page title
Page teaser text
Topic - renders as eyebrow
Comments
On mobile, columns 3 and 2 flip.
The title of each item in the component will include a hover state to indicate clickable content. Clicking will take a user to the corresponding page. Topic eyebrows are NOT clickable links.
CMS Fields
Field Label | Field Type | Required? | Notes | |
---|---|---|---|---|
1 | Title | single-line text | no |
|
2 | Column 1 Link | treelist | yes | one link |
3 | Column 2 Links | treelist | yes | three links |
4 | Column 3 Links | treelist | yes | two links |