DOTD Component Library

Latest Posts 

<div class="c-latest-posts js-gsap-trigger">
      <h2 class="o-heading o-heading--sm c-latest-posts__heading">
          Latest News & Updates
      </h2>
      <div class="c-post-card c-post-card--sm js-gsap-fade-in">
          <a class="o-link c-post-card__link-overlay" href="/" target="_self" aria-label="New traffic signals installed on Swan Lake Road at I-220 in Bossier Parish">
          </a>
          <div class="c-post-card__content">

              <div class="o-meta">
                  <span class="o-icon o-icon--md o-meta__icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12.75 7.5C12.75 7.08579 12.4142 6.75 12 6.75C11.5858 6.75 11.25 7.08579 11.25 7.5V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V7.5Z" />
                      </svg>
                  </span>
                  <div class="o-meta__text">
                      <span class="o-meta__date">Dec 10, 2024</span>
                      <span class="o-meta__divider">•</span>
                      <a hre="#" class="o-meta__category u-text-decoration--underline">Newsletter</a>
                  </div>
              </div>
              <h3 class="o-heading o-heading--xxs c-post-card__heading">
                  New traffic signals installed on Swan Lake Road at I-220 in Bossier Parish
              </h3>
          </div>
          <a class="o-link o-link--secondary c-post-card__link" href="/" target="_self" tabindex="-1">
              <span class="o-link__label">
                  More Details
              </span>
              <span class="o-icon o-icon--md">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                  </svg>
              </span>
          </a>
      </div>
      <div class="c-post-card c-post-card--sm js-gsap-fade-in">
          <a class="o-link c-post-card__link-overlay" href="/" target="_self" aria-label="Updated: Belle Chasse Bridge & Tunnel Project: Lane Closure Notice">
          </a>
          <div class="c-post-card__content">

              <div class="o-meta">
                  <span class="o-icon o-icon--md o-meta__icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12.75 7.5C12.75 7.08579 12.4142 6.75 12 6.75C11.5858 6.75 11.25 7.08579 11.25 7.5V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V7.5Z" />
                      </svg>
                  </span>
                  <div class="o-meta__text">
                      <span class="o-meta__date">Dec 9, 2024</span>
                      <span class="o-meta__divider">•</span>
                      <a hre="#" class="o-meta__category u-text-decoration--underline">Update</a>
                  </div>
              </div>
              <h3 class="o-heading o-heading--xxs c-post-card__heading">
                  Updated: Belle Chasse Bridge & Tunnel Project: Lane Closure Notice
              </h3>
          </div>
          <a class="o-link o-link--secondary c-post-card__link" href="/" target="_self" tabindex="-1">
              <span class="o-link__label">
                  More Details
              </span>
              <span class="o-icon o-icon--md">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                  </svg>
              </span>
          </a>
      </div>
      <div class="c-post-card c-post-card--sm js-gsap-fade-in">
          <a class="o-link c-post-card__link-overlay" href="/" target="_self" aria-label="DOTD to Accept Applications for Electric Vehicle Charging Infrastructure">
          </a>
          <div class="c-post-card__content">

              <div class="o-meta">
                  <span class="o-icon o-icon--md o-meta__icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12.75 7.5C12.75 7.08579 12.4142 6.75 12 6.75C11.5858 6.75 11.25 7.08579 11.25 7.5V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V7.5Z" />
                      </svg>
                  </span>
                  <div class="o-meta__text">
                      <span class="o-meta__date">Dec 9, 2024</span>
                      <span class="o-meta__divider">•</span>
                      <a hre="#" class="o-meta__category u-text-decoration--underline">Newsletter</a>
                  </div>
              </div>
              <h3 class="o-heading o-heading--xxs c-post-card__heading">
                  DOTD to Accept Applications for Electric Vehicle Charging Infrastructure
              </h3>
          </div>
          <a class="o-link o-link--secondary c-post-card__link" href="/" target="_self" tabindex="-1">
              <span class="o-link__label">
                  More Details
              </span>
              <span class="o-icon o-icon--md">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                  </svg>
              </span>
          </a>
      </div>
      <div class="c-post-card c-post-card--sm js-gsap-fade-in">
          <a class="o-link c-post-card__link-overlay" href="/" target="_self" aria-label="NIGHTTIME INTERSTATE CLOSURE: I-20 eastbound at Old Minden Rd., Bossier Parish (I-20 rehab project)">
          </a>
          <div class="c-post-card__content">

              <div class="o-meta">
                  <span class="o-icon o-icon--md o-meta__icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 12C4.5 7.85786 7.85786 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM12.75 7.5C12.75 7.08579 12.4142 6.75 12 6.75C11.5858 6.75 11.25 7.08579 11.25 7.5V12C11.25 12.4142 11.5858 12.75 12 12.75H16.5C16.9142 12.75 17.25 12.4142 17.25 12C17.25 11.5858 16.9142 11.25 16.5 11.25H12.75V7.5Z" />
                      </svg>
                  </span>
                  <div class="o-meta__text">
                      <span class="o-meta__date">Dec 5, 2024</span>
                      <span class="o-meta__divider">•</span>
                      <a hre="#" class="o-meta__category u-text-decoration--underline">Update</a>
                  </div>
              </div>
              <h3 class="o-heading o-heading--xxs c-post-card__heading">
                  NIGHTTIME INTERSTATE CLOSURE: I-20 eastbound at Old Minden Rd., Bossier Parish (I-20 rehab project)
              </h3>
          </div>
          <a class="o-link o-link--secondary c-post-card__link" href="/" target="_self" tabindex="-1">
              <span class="o-link__label">
                  More Details
              </span>
              <span class="o-icon o-icon--md">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
                  </svg>
              </span>
          </a>
      </div>
  </div>
 
{% set base_class = latest_posts.base_class|default('c-latest-posts') %}
{% if latest_posts.items %}
  <div class="{{ bem(base_class, latest_posts.element, latest_posts.modifiers, latest_posts.extra) }} js-gsap-trigger">
    {% include "@heading" with {
      "heading": {
        "level": "2",
        "size": "sm",
        "text": latest_posts.heading,
        "extra": bem(base_class, 'heading')
      }
    } %}
    {% for item in latest_posts.items %}
      {% include "@post-card" with item %}
    {% endfor %}
  </div>
{% endif %}
 
{
  "latest_posts": {
    "heading": "Latest News & Updates",
    "items": [
      {
        "post_card": {
          "meta": {
            "date": "12/10/2024",
            "category": {
              "name": "Newsletter",
              "link": "#"
            }
          },
          "heading": "New traffic signals installed on Swan Lake Road at I-220 in Bossier Parish",
          "link": {
            "url": "/"
          },
          "modifiers": "sm"
        }
      },
      {
        "post_card": {
          "meta": {
            "date": "12/09/2024",
            "category": {
              "name": "Update",
              "link": "#"
            }
          },
          "heading": "Updated: Belle Chasse Bridge & Tunnel Project: Lane Closure Notice",
          "link": {
            "url": "/"
          },
          "modifiers": "sm"
        }
      },
      {
        "post_card": {
          "meta": {
            "date": "12/09/2024",
            "category": {
              "name": "Newsletter",
              "link": "#"
            }
          },
          "heading": "DOTD to Accept Applications for Electric Vehicle Charging Infrastructure",
          "link": {
            "url": "/"
          },
          "modifiers": "sm"
        }
      },
      {
        "post_card": {
          "meta": {
            "date": "12/05/2024",
            "category": {
              "name": "Update",
              "link": "#"
            }
          },
          "heading": "NIGHTTIME INTERSTATE CLOSURE: I-20 eastbound at Old Minden Rd., Bossier Parish (I-20 rehab project)",
          "link": {
            "url": "/"
          },
          "modifiers": "sm"
        }
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $LATEST-POSTS
\*------------------------------------ */

.c-latest-posts {
  display: flex;
  flex-direction: column;
  gap: var(--dotd-space);
}
  • URL: /components/raw/latest-posts/_latest-posts.scss
  • Filesystem Path: components/02-molecules/latest-posts/_latest-posts.scss
  • Size: 189 Bytes

No notes defined.