Lehigh Clutch Style Guide

Tag List 

<div class="tag-list">
    <h2>Skills</h2>
    <ul>
        <li><a href="#">Data Analysis</a></li>
        <li><a href="#">Machine Learning</a></li>
        <li><a href="#">Communication</a></li>
    </ul>
</div>
 
<div class="tag-list">
  <h2>{{ heading }}</h2>
  <ul>
    {% for item in items %}
      <li><a href="{{ item.url }}">{{ item.label }}</a></li>
    {% endfor %}
  </ul>
</div>
 
{
  "heading": "Skills",
  "items": [
    {
      "label": "Data Analysis",
      "url": "#"
    },
    {
      "label": "Machine Learning",
      "url": "#"
    },
    {
      "label": "Communication",
      "url": "#"
    }
  ]
}
  • Content: 
    .tag-list {
  margin-block: 2rem;

  h2 {
    font-size: 1.25rem;
    font-weight: bold;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
    color: $base_font;
    color: var(--base_font, $base_font);
    background-color: $grey_lightest;
    background-color: var(--grey_lightest, $grey_lightest);
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 0;

    &:hover {
      background-color: $grey_light;
      background-color: var(--grey_light, $grey_light);
      color: $base_font;
      color: var(--base_font, $base_font);
      text-decoration: underline;
    }
  }
}
  • URL: /components/raw/tag_list/tag_list.scss
  • Filesystem Path: bits/04-components/tag_list/tag_list.scss
  • Size: 738 Bytes

No notes defined.