San Francisco Design System

Event 

<a class="sfgov-event-card" href="https://sf.gov">
    <div class="event-image" style="background-image:url(/images/event-image.png)"></div>
    <div class="event-info">
        <h5 class="title">Event title</h5>
        <p class="description">
            Event card description describes this event card. Use a descriptive description.
        </p>
    </div>
</a>
<br/>
<a class="sfgov-event-card image" href="https://sf.gov">
    <div class="event-image">
        <img src="/images/event-image.jpg" alt="this is the alt text for the event image" />
    </div>
    <div class="event-info">
        <h5 class="title">Event title</h5>
        <p class="description">
            Event card description describes this event card. Use a descriptive description.
        </p>
    </div>
</a>
<br/>
<a class="sfgov-event-card date" href="https://sf.gov">
    <div class="event-date">
        <div class="month">February</div>
        <div class="date">2</div>
    </div>
    <div class="event-info">
        <h5 class="title">Event title</h5>
        <p class="description">
            Event card description describes this event card. Use a descriptive description.
        </p>
    </div>
</a>
 
<a class="sfgov-event-card" href="{{ url }}">
  <div class="event-image" style="background-image:url(/images/event-image.png)"></div>
  <div class="event-info">
    <h5 class="title">{{ title }}</h5>
    <p class="description">
      {{ description }}
    </p>
  </div>
</a>
<br/>
<a class="sfgov-event-card image" href="{{ url }}">
  <div class="event-image">
    <img src="{{ image.src }}" alt="{{ image.alt }}"/>
  </div>
  <div class="event-info">
    <h5 class="title">{{ title }}</h5>
    <p class="description">
      {{ description }}
    </p>
  </div>
</a>
<br/>
<a class="sfgov-event-card date" href="{{ url }}">
  <div class="event-date">
    <div class="month">{{ date.month }}</div>
    <div class="date">{{ date.date }}</div>
  </div>
  <div class="event-info">
    <h5 class="title">{{ title }}</h5>
    <p class="description">
      {{ description }}
    </p>
  </div>
</a>
 
{
  "url": "https://sf.gov",
  "image": {
    "src": "/images/event-image.jpg",
    "alt": "this is the alt text for the event image"
  },
  "title": "Event title",
  "date": {
    "month": "February",
    "date": "2"
  },
  "description": "Event card description describes this event card.  Use a descriptive description."
}
  • Content: 
    .sfgov-event-card {
  @include rubik;

  background: $green-3;
  border: 0;
  border-radius: 8px;
  color: $white;
  display: block;
  padding: $rhythm * 2;
  text-decoration: none;

  .title {
    @include h5;

    color: $white;
    margin: 0 0 $rhythm 0;
  }

  .description {
    @include body-short;

    color: $white;
    margin: 0;
  }

  &.image,
  &.date {
    padding: 0;
    position: relative;

    .event-image,
    .event-date {
      border-radius: $radius $radius 0 0;
      height: 160px;
      padding-top: 26px;
      text-align: center;
    }

    .event-image {
      padding-top: 0;
      overflow: hidden;

      img {
        border-radius: $radius $radius 0 0;
        width: 100%;
      }
    }

    .event-date {
      color: $slate;
      background: $green-2;
      opacity: 0.65;
      display: none;

      @media screen and (min-width: $mq-narrow) {
        display: block;
        padding-top: px-to-rem(26);
      }

      .month {
        font-size: px-to-rem(32);
        line-height: px-to-rem(38);
      }

      .date {
        font-size: px-to-rem(64);
        line-height: px-to-rem(76);
      }
    }

    .event-info {
      padding: $rhythm * 2;
    }
  }

  &:hover {
    background: $green-4;
  }
}
  • URL: /components/raw/event/_event.scss
  • Filesystem Path: src/components/02-cards/event/_event.scss
  • Size: 1.2 KB

There are no notes for this item.