Article Display

<!-- Announcement -->
<div class="article-display">
    <div class="article-display__header">
        <div class="article-display__pretitle">
            In
            <a href="#">Category</a>
        </div>
        <h1 class="article-display__title">Announcement Article Title</h1>
        <div class="article-display__posttitle">
            <div class="article-display__group">
                [Author name], MMM DD YYYY<br />
                Last modified on MMM DD YYYY
            </div>
            <div class="article-display__group">
                <div class="social-controls">
                    <div class="social-controls__item">
                        <i class="fa fa-eye social-controls__icon"></i>
                        <span class="social-controls__label">1.5k</span>
                    </div>
                    <div class="social-controls__item">
                        <a href="#" class="social-controls__link">
                            <i class="fa fa-heart social-controls__icon"></i>
                        </a>
                        <span class="social-controls__label">123</span>
                    </div>
                    <div class="social-controls__item">
                        <a href="#" class="social-controls__link js-copy-url">
                            <i class="fa fa-share-alt social-controls__icon"></i>
                        </a>
                        <span class="social-controls__label">77</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="article-display__body">Authored Rich Text - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo doloremque, quo alias ipsa ipsum, ullam velit deserunt repudiandae cupiditate molestias eius laudantium nostrum, optio ducimus! At, ducimus! Repudiandae soluta corporis possimus, nostrum ullam doloribus earum. Culpa, nostrum nobis minima perspiciatis rerum earum? Dicta, accusamus nulla. Nemo, dolores. Porro officia unde non, quam quae vero provident praesentium, rerum iste culpa sint reprehenderit? Hic porro atque quo eligendi repellendus quod voluptatem, nam itaque totam placeat animi! Unde cumque, doloremque neque ad sapiente tempore dignissimos mollitia cum aliquam rerum, ullam nisi? Quibusdam tempore laudantium nisi cum dolorem tempora porro saepe nihil natus. Consequuntur.</div>
</div>

<!-- News -->
<div class="article-display article-display--light">
    <div class="article-display__header">
        <div class="article-display__pretitle">
            In
            <a href="#">Category</a>
        </div>
        <h1 class="article-display__title">News Article Title</h1>
        <div class="article-display__posttitle">
            <div class="article-display__group">
                [Author name], MMM DD YYYY<br />
                Last modified on MMM DD YYYY by [name]
            </div>
            <div class="article-display__group">
                <div class="social-controls">
                    <div class="social-controls__item">
                        <i class="fa fa-eye social-controls__icon"></i>
                        <span class="social-controls__label">1.5k</span>
                    </div>
                    <div class="social-controls__item">
                        <a href="#" class="social-controls__link">
                            <i class="fa fa-heart social-controls__icon"></i>
                        </a>
                        <span class="social-controls__label">123</span>
                    </div>
                    <div class="social-controls__item">
                        <a href="#" class="social-controls__link js-copy-url">
                            <i class="fa fa-share-alt social-controls__icon"></i>
                        </a>
                        <span class="social-controls__label">77</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="article-display__body">Authored Rich Text - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo doloremque, quo alias ipsa ipsum, ullam velit deserunt repudiandae cupiditate molestias eius laudantium nostrum, optio ducimus! At, ducimus! Repudiandae soluta corporis possimus, nostrum ullam doloribus earum. Culpa, nostrum nobis minima perspiciatis rerum earum? Dicta, accusamus nulla. Nemo, dolores. Porro officia unde non, quam quae vero provident praesentium, rerum iste culpa sint reprehenderit? Hic porro atque quo eligendi repellendus quod voluptatem, nam itaque totam placeat animi! Unde cumque, doloremque neque ad sapiente tempore dignissimos mollitia cum aliquam rerum, ullam nisi? Quibusdam tempore laudantium nisi cum dolorem tempora porro saepe nihil natus. Consequuntur.</div>
</div>

<!-- Event -->
<div class="article-display article-display--dark">
    <div class="article-display__header">
        <div class="article-display__pretitle">
            In
            <a href="#">Category</a>
        </div>
        <h1 class="article-display__title">Event Article Title</h1>
        <div class="article-display__posttitle">
            <div class="article-display__group">
                <p>
                    Monday, MMM DD YYYY, 00:00 AM - 00:00 AM EST<br />
                    Location: Location Text<br />
                    Part of
                    <a href="#">Theme Title</a><br />
                    Streaming link:
                    <a href="#">https://meetinglink</a><br />
                </p>
                <p>
                    <a role="button" class="btn btn-default" data-toggle="popover" data-placement="auto" title="Add to Calendar" data-trigger="focus" tabindex="0" data-content="<a href='#' target='_blank'><img src='/images/icon-outlook.svg' alt='Outlook'></a> <a href='#' target='_blank'><img src='/images/icon-google-calendar.svg' alt='Google Calendar'></a>" data-html="true">Add to calendar</a>
                    <a href="#" class="btn btn-primary">Register</a>
                </p>
                <p class="small">*Limited seating. Registration required for in-person attendance</p>
            </div>
            <div class="article-display__group">
                <div class="social-controls">
                    <div class="social-controls__item">
                        <i class="fa fa-eye social-controls__icon"></i>
                        <span class="social-controls__label">1.5k</span>
                    </div>
                    <div class="social-controls__item">
                        <a href="#" class="social-controls__link">
                            <i class="fa fa-heart social-controls__icon"></i>
                        </a>
                        <span class="social-controls__label">123</span>
                    </div>
                    <div class="social-controls__item">
                        <a href="#" class="social-controls__link js-copy-url">
                            <i class="fa fa-share-alt social-controls__icon"></i>
                        </a>
                        <span class="social-controls__label">77</span>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <p>Posted by Name, MMM DD YYYY</p>
    </div>
    <div class="article-display__body">Authored Rich Text - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo doloremque, quo alias ipsa ipsum, ullam velit deserunt repudiandae cupiditate molestias eius laudantium nostrum, optio ducimus! At, ducimus! Repudiandae soluta corporis possimus, nostrum ullam doloribus earum. Culpa, nostrum nobis minima perspiciatis rerum earum? Dicta, accusamus nulla. Nemo, dolores. Porro officia unde non, quam quae vero provident praesentium, rerum iste culpa sint reprehenderit? Hic porro atque quo eligendi repellendus quod voluptatem, nam itaque totam placeat animi! Unde cumque, doloremque neque ad sapiente tempore dignissimos mollitia cum aliquam rerum, ullam nisi? Quibusdam tempore laudantium nisi cum dolorem tempora porro saepe nihil natus. Consequuntur.</div>
</div>

.article-display {
  position: relative;
  margin-bottom: 4rem;

  @media (min-width: $breakpoint-desktop) {
    border-left: 3.2rem solid rgba($color-blue-medium, 0.6);
    padding-left: 3.2rem;
    margin-left: 3.2rem;

    &::before {
      position: absolute;
      top: 0;
      left: -6.4rem;
      content: "";
      border-left: 3.2rem solid rgba($color-blue-medium, 0.3);
      height: 100%;
    }
  }

  &.article-display--light {
    border-color: rgba($color-blue-light, 0.6);

    &::before {
      border-color: rgba($color-blue-light, 0.3);
    }
  }

  &.article-display--dark {
    border-color: rgba($color-blue-dark, 0.6);

    &::before {
      border-color: rgba($color-blue-dark, 0.3);
    }
  }
}

.article-display__header {
  margin-bottom: 2.4rem;
}

.article-display__title {
  @include typeDisplay(true);
  margin-bottom: 2.4rem;
}

.article-display__pretitle {
  margin-bottom: 0.4rem;
}

.article-display__posttitle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @media (min-width: $breakpoint-desktop) {
    flex-direction: row;
  }
}

.article-display__group {
  margin-bottom: 1.2rem;
}

.article-display__body {
  @include typeSubheader;
}

// Consider adding globally
$('[data-toggle="popover"]').popover();