T Capital

Filters 

<div class="p-5">
    <nav class="filters">
        <button class="filter-btn active" data-filter="*">All</button>
        <button class="filter-btn" data-filter="tech-fund">Tech Fund</button>
        <button class="filter-btn" data-filter="ventures">Ventures</button>
        <select name="categories" id="categories">
            <option value="*">Category</option>
            <option value="ai-and-cloud-infrastructure">AI and Cloud Infrastructure</option>
            <option value="ai-and-cloud-infrastructure-consumer">AI and Cloud Infrastructure, Consumer</option>
            <option value="climate">Climate</option>
            <option value="connectivity">Connectivity</option>
            <option value="consumer">Consumer</option>
            <option value="private-equity-mbo-other">Private equity MBO, other</option>
            <option value="security">Security</option>
            <option value="other">Other</option>
        </select>
    </nav>
</div>
 
<div class="p-5">
    <nav class="filters">
        <button class="filter-btn active" data-filter="*">All</button>
        <button class="filter-btn" data-filter="tech-fund">Tech Fund</button>
        <button class="filter-btn" data-filter="ventures">Ventures</button>
        <select name="categories" id="categories">
            <option value="*">Category</option>
            <option value="ai-and-cloud-infrastructure">AI and Cloud Infrastructure</option>
            <option value="ai-and-cloud-infrastructure-consumer">AI and Cloud Infrastructure, Consumer</option>
            <option value="climate">Climate</option>                           
            <option value="connectivity">Connectivity</option>
            <option value="consumer">Consumer</option>
            <option value="private-equity-mbo-other">Private equity MBO, other</option>
            <option value="security">Security</option>
            <option value="other">Other</option>
        </select>
    </nav>
</div>
 
{
  "buttons": [
    {
      "name": "Primary",
      "text": "Primary button",
      "class": "btn btn-primary",
      "url": "/"
    },
    {
      "name": "Secondary",
      "text": "Secondary button",
      "class": "btn btn-secondary",
      "url": "/"
    },
    {
      "name": "Tertiary",
      "text": "Tertiary button",
      "class": "btn btn-tertiary",
      "url": "/"
    }
  ]
}
  • Content: 
    //  filters

.filters{
    @include media-breakpoint-up(md){
        display: flex;
        justify-content: flex-end;
    }
    button, select{
        outline: none;
        border: none;
        background-color: transparent;
        color: $white;
        text-align: left;
        border-bottom: 1px solid $pink;
        font-size: 1.5rem;
        padding: 1rem 0;
        margin: 0;
        border-radius: none;
        width: 100%;
        @include media-breakpoint-up(md){
            padding: 0;
            width: calc(25% - 1rem);
            margin-left: 1rem;
        }
        &.active{
            border-bottom: 1px solid $white;
        }
    }
}
  • URL: /components/raw/filters/filters.scss
  • Filesystem Path: src/components/01-global/filters/filters.scss
  • Size: 663 Bytes

No notes defined.