San Francisco Design System

Topic 

<a class="sfgov-topic-card" href="https://sf.gov">
    <h5 class="title">Topic card title</h5>
    <p class="description">
        Topic card description describes this topic card. Use a descriptive description.
    </p>
</a>
 
<a class="sfgov-topic-card" href="{{ url }}">
  <h5 class="title">{{ title }}</h5>
  <p class="description">
    {{ description }}
  </p>
</a>
 
{
  "url": "https://sf.gov",
  "title": "Topic card title",
  "description": "Topic card description describes this topic card.  Use a descriptive description."
}
  • Content: 
    .sfgov-topic-card {
  @include rubik;

  background: $grey-1;
  border: 0;
  border-radius: $radius;
  color: $slate;
  display: block;
  text-decoration: none;
  padding: $rhythm * 2;

  @media screen and (min-width: $mq-narrow) {
    padding: $rhythm * 4;
  }

  .title {
    @include h3;

    color: $bright-blue;
    margin: 0 0 $rhythm 0;
  }

  .description {
    @include body-short;

    color: $slate;
    margin: 0;
    opacity: 0.6;
  }

  &:hover {
    background: $grey-2;

    .description {
      opacity: 1;
    }
  }
}
  • URL: /components/raw/topic/_topic.scss
  • Filesystem Path: src/components/02-cards/topic/_topic.scss
  • Size: 536 Bytes

There are no notes for this item.