Featured Content - Templates - NWP Prototype Kit

This block component is used to list relevant / related content at the bottom of a page, usually in the "Featured" region.

Example

Open this example in new window

Macro


  {{ featuredContent({
    title: "Phasellus sagittis",
    summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices dui lacus, sit amet mattis ipsum accumsan a. Aliquam eget quam eget arcu rhoncus ullamcorper. ",
    items: [
      {
        title: "Publication item #1",
        href: "#",
        details: [
        {
          label: "Publication type:",
          value: "Briefing"
        },
        {
          label: "Publish date:",
          value: "07 September 2022"
        }
      ],
        summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
      },
      {
        title: "Publication item #2",
        href: "#",
        details: [
        {
          label: "Publication type:",
          value: "Briefing"
        },
        {
          label: "Publish date:",
          value: "07 September 2022"
        }
      ],
        summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
      },
      {
        title: "Publication item #3",
        href: "#",
        details: [
        {
          label: "Publication type:",
          value: "Briefing"
        },
        {
          label: "Publish date:",
          value: "07 September 2022"
        }
      ],
        summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
      },
      {
        title: "Publication item #1",
        href: "#",
        details: [
        {
          label: "Publication type:",
          value: "Briefing"
        },
        {
          label: "Publish date:",
          value: "07 September 2022"
        }
      ],
        summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
      },
      {
        title: "Publication item #2",
        href: "#",
        details: [
        {
          label: "Publication type:",
          value: "Briefing"
        },
        {
          label: "Publish date:",
          value: "07 September 2022"
        }
      ],
        summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
      },
      {
        title: "Publication item #3",
        href: "#",
        details: [
        {
          label: "Publication type:",
          value: "Briefing"
        },
        {
          label: "Publish date:",
          value: "07 September 2022"
        }
      ],
        summary: "Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec."
      }
    ]
  }) }}

HTML


<div class="hee-featured-content">
    <h2>Phasellus sagittis</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultrices dui lacus, sit amet mattis ipsum accumsan a. Aliquam eget quam eget arcu rhoncus ullamcorper. </p>
    <div class="hee-featured-content-wrapper">
      <div class="hee-featured-content__item">
        <div class="hee-listing-item">
          <h3><a href="#">Publication item #1</a></h3>
          <div class="hee-listing-item__details">
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publication type:</span>
              <span>Briefing</span>
            </div>
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publish date:</span>
              <span>07 September 2022</span>
            </div>
          </div>
          <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
        </div>
      </div>
      <div class="hee-featured-content__item">
        <div class="hee-listing-item">
          <h3><a href="#">Publication item #2</a></h3>
          <div class="hee-listing-item__details">
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publication type:</span>
              <span>Briefing</span>
            </div>
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publish date:</span>
              <span>07 September 2022</span>
            </div>
          </div>
          <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
        </div>
      </div>
      <div class="hee-featured-content__item">
        <div class="hee-listing-item">
          <h3><a href="#">Publication item #3</a></h3>
          <div class="hee-listing-item__details">
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publication type:</span>
              <span>Briefing</span>
            </div>
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publish date:</span>
              <span>07 September 2022</span>
            </div>
          </div>
          <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
        </div>
      </div>
      <div class="hee-featured-content__item">
        <div class="hee-listing-item">
          <h3><a href="#">Publication item #1</a></h3>
          <div class="hee-listing-item__details">
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publication type:</span>
              <span>Briefing</span>
            </div>
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publish date:</span>
              <span>07 September 2022</span>
            </div>
          </div>
          <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
        </div>
      </div>
      <div class="hee-featured-content__item">
        <div class="hee-listing-item">
          <h3><a href="#">Publication item #2</a></h3>
          <div class="hee-listing-item__details">
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publication type:</span>
              <span>Briefing</span>
            </div>
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publish date:</span>
              <span>07 September 2022</span>
            </div>
          </div>
          <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
        </div>
      </div>
      <div class="hee-featured-content__item">
        <div class="hee-listing-item">
          <h3><a href="#">Publication item #3</a></h3>
          <div class="hee-listing-item__details">
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publication type:</span>
              <span>Briefing</span>
            </div>
            <div class="hee-listing-item__details__row">
              <span class="hee-listing-item__details__label">Publish date:</span>
              <span>07 September 2022</span>
            </div>
          </div>
          <div class="hee-listing-item__summary"> Porttitor nulla pellentesque sit consequat, euismod sociis tempor, malesuada. Non senectus a placerat urna, nibh sed aliquam natoque. Diam gravida sit ullamcorper cras eu et mattis donec. </div>
        </div>
      </div>
    </div>
</div>