Topics Columns

AKA – Topic Columns 3 Up

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

https://styleguide.asce.org/section-components.html#asgref-components-topics-columns