<section class="news no-hero bm-animate bm-fade-in pb-5">
    <div class="container-xxl pt-md-5 pb-3">
        <div class="row">
            <div class="col-xxl-10 offset-xxl-1">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="text-white pb-4 pb-md-0">Latest news</h2>
                    </div>
                    <div class="col-lg-6">
                        <nav class="filters">
                            <button class="filter-btn active" data-filter="*">All</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>
            </div>
        </div>
    </div>
    <div class="container-xxl pt-md-5 pb-5">
        <div class="row pt-5 pb-5">
            <div class="col-xxl-10 offset-xxl-1 pt-3">
                <div class="row pb-5">
                    <div class="col-lg-6 mb-4">
                        <div class="news-card featured radius-15">
                            <div class="media">
                                <img alt="T.Capital adds n8n to growing AI investment portfolio" src="/images/bitmap/card-4.jpg" />
                                <div class="tint"></div>
                            </div>
                            <div class="info h-100">
                                <div class="categories pb-5">
                                    <div class="small">Category</div>
                                    <div class="small">Type</div>
                                </div>
                                <p class="small">January 5, 2025</p>
                                <h3 class="h2 m-0 pb-4">T.Capital adds n8n to growing AI investment portfolio</h3>
                                <p class="medium">Deutsche Telekom’s corporate venturing arm backs $180m Series-C round for AI workflow automation scaleup, continuing a streak of investments in AI-focused startups…</p>
                                <a class="btn btn-primary  mt-5" href="">READ MORE</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div class="news-card featured radius-15">
                            <div class="media">
                                <img alt="T.Capital adds n8n to growing AI investment portfolio" src="/images/bitmap/card-4.jpg" />
                                <div class="tint"></div>
                            </div>
                            <div class="info h-100">
                                <div class="categories pb-5">
                                    <div class="small">Category</div>
                                    <div class="small">Type</div>
                                </div>
                                <p class="small">January 5, 2025</p>
                                <h3 class="h2 m-0 pb-4">T.Capital adds n8n to growing AI investment portfolio</h3>
                                <p class="medium">Deutsche Telekom’s corporate venturing arm backs $180m Series-C round for AI workflow automation scaleup, continuing a streak of investments in AI-focused startups…</p>
                                <a class="btn btn-primary  mt-5" href="">READ MORE</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="news-card  radius-15">
                            <div class="media">
                                <img alt="DT’s T.Capital taps in-house investor veteran for Managing Partner role" src="/images/bitmap/thumb-2.jpg" />
                                <div class="tint"></div>
                            </div>
                            <div class="info h-100">
                                <div class="categories pb-5">
                                    <div class="small">Category</div>
                                    <div class="small">Type</div>
                                </div>
                                <p class="small">January 5, 2025</p>
                                <h3 class="h5 m-0 pb-4">DT’s T.Capital taps in-house investor veteran for Managing Partner role</h3>
                                <p class="medium">Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy over the last decade, becomes Managing Partner at T.Capital.</p>
                                <a class="btn btn-primary external mt-5" href="">READ MORE</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="news-card  radius-15">
                            <div class="media">
                                <img alt="DT’s T.Capital taps in-house investor veteran for Managing Partner role" src="/images/bitmap/thumb-2.jpg" />
                                <div class="tint"></div>
                            </div>
                            <div class="info h-100">
                                <div class="categories pb-5">
                                    <div class="small">Category</div>
                                    <div class="small">Type</div>
                                </div>
                                <p class="small">January 5, 2025</p>
                                <h3 class="h5 m-0 pb-4">DT’s T.Capital taps in-house investor veteran for Managing Partner role</h3>
                                <p class="medium">Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy over the last decade, becomes Managing Partner at T.Capital.</p>
                                <a class="btn btn-primary external mt-5" href="">READ MORE</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="news-card  radius-15">
                            <div class="media">
                                <img alt="DT’s T.Capital taps in-house investor veteran for Managing Partner role" src="/images/bitmap/thumb-2.jpg" />
                                <div class="tint"></div>
                            </div>
                            <div class="info h-100">
                                <div class="categories pb-5">
                                    <div class="small">Category</div>
                                    <div class="small">Type</div>
                                </div>
                                <p class="small">January 5, 2025</p>
                                <h3 class="h5 m-0 pb-4">DT’s T.Capital taps in-house investor veteran for Managing Partner role</h3>
                                <p class="medium">Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy over the last decade, becomes Managing Partner at T.Capital.</p>
                                <a class="btn btn-primary external mt-5" href="">READ MORE</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-4">
                        <div class="news-card  radius-15">
                            <div class="media">
                                <img alt="DT’s T.Capital taps in-house investor veteran for Managing Partner role" src="/images/bitmap/thumb-2.jpg" />
                                <div class="tint"></div>
                            </div>
                            <div class="info h-100">
                                <div class="categories pb-5">
                                    <div class="small">Category</div>
                                    <div class="small">Type</div>
                                </div>
                                <p class="small">January 5, 2025</p>
                                <h3 class="h5 m-0 pb-4">DT’s T.Capital taps in-house investor veteran for Managing Partner role</h3>
                                <p class="medium">Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy.</p>
                                <a class="btn btn-primary external mt-5" href="">READ MORE</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-center pt-5">
                    <nav class="pagination">
                        <a class="arrows previous" href=""></a>
                        <a class="pages" href="">1</a>
                        <a class="pages" href="">2</a>
                        <a class="pages" href="">3</a>
                        <a class="pages space" href="">...</a>
                        <a class="pages" href="">13</a>
                        <a class="pages" href="">14</a>
                        <a class="arrows next" href=""></a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="news no-hero bm-animate bm-fade-in pb-5">
    <div class="container-xxl pt-md-5 pb-3">
        <div class="row">
            <div class="col-xxl-10 offset-xxl-1">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="text-white pb-4 pb-md-0">{{{ heading }}}</h2>
                    </div>
                    <div class="col-lg-6">
                        <nav class="filters">
                            <button class="filter-btn active" data-filter="*">All</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>
            </div>
        </div>
    </div>
    {{#if cards}}
        <div class="container-xxl pt-md-5 pb-5">
            <div class="row pt-5 pb-5">
                <div class="col-xxl-10 offset-xxl-1 pt-3">
                    <div class="row pb-5">
                        {{#each cards}}
                            <div class="{{ column }} mb-4">
                                <div class="news-card {{ type }} radius-15">
                                    {{#if image}}
                                        <div class="media">
                                            <img alt="{{ heading }}" src="{{ image }}"/>
                                            <div class="tint"></div>
                                        </div>
                                    {{/if}}
                                    <div class="info h-100">
                                        {{#if categories}}
                                            <div class="categories pb-5">
                                                {{#each categories}}
                                                    <div class="small">{{ category }}</div>
                                                {{/each}}
                                            </div>
                                        {{/if}}
                                        <p class="small">{{ date }}</p>
                                        <h3 class="{{ heading-class }} m-0 pb-4">{{{ heading }}}</h3>
                                        <p class="medium">{{{ text }}}</p>
                                        <a class="btn btn-primary {{ cta-class }} mt-5" href="">READ MORE</a>
                                    </div>
                                </div> 
                            </div> 
                        {{/each}}
                    </div>
                    <div class="d-flex justify-content-center pt-5">
                        <nav class="pagination">
                            <a class="arrows previous" href=""></a>
                            <a class="pages" href="">1</a>
                            <a class="pages" href="">2</a>
                            <a class="pages" href="">3</a>
                            <a class="pages space" href="">...</a>
                            <a class="pages" href="">13</a>
                            <a class="pages" href="">14</a>
                            <a class="arrows next" href=""></a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    {{/if}}
</section>
{
  "heading": "Latest news",
  "cards": [
    {
      "type": "featured",
      "column": "col-lg-6",
      "image": "/images/bitmap/card-4.jpg",
      "categories": [
        {
          "category": "Category"
        },
        {
          "category": "Type"
        }
      ],
      "date": "January 5, 2025",
      "heading-class": "h2",
      "heading": "T.Capital adds n8n to growing AI investment portfolio",
      "text": "Deutsche Telekom’s corporate venturing arm backs $180m Series-C round for AI workflow automation scaleup, continuing a streak of investments in AI-focused startups…",
      "cta-class": "",
      "url": "/"
    },
    {
      "type": "featured",
      "column": "col-lg-6",
      "image": "/images/bitmap/card-4.jpg",
      "categories": [
        {
          "category": "Category"
        },
        {
          "category": "Type"
        }
      ],
      "date": "January 5, 2025",
      "heading-class": "h2",
      "heading": "T.Capital adds n8n to growing AI investment portfolio",
      "text": "Deutsche Telekom’s corporate venturing arm backs $180m Series-C round for AI workflow automation scaleup, continuing a streak of investments in AI-focused startups…",
      "cta-class": "",
      "url": "/"
    },
    {
      "type": "",
      "column": "col-xl-3 col-md-6",
      "image": "/images/bitmap/thumb-2.jpg",
      "categories": [
        {
          "category": "Category"
        },
        {
          "category": "Type"
        }
      ],
      "date": "January 5, 2025",
      "heading-class": "h5",
      "heading": "DT’s T.Capital taps in-house investor veteran for Managing Partner role",
      "text": "Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy over the last decade, becomes Managing Partner at T.Capital.",
      "cta-class": "external",
      "url": "/"
    },
    {
      "type": "",
      "column": "col-xl-3 col-md-6",
      "image": "/images/bitmap/thumb-2.jpg",
      "categories": [
        {
          "category": "Category"
        },
        {
          "category": "Type"
        }
      ],
      "date": "January 5, 2025",
      "heading-class": "h5",
      "heading": "DT’s T.Capital taps in-house investor veteran for Managing Partner role",
      "text": "Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy over the last decade, becomes Managing Partner at T.Capital.",
      "cta-class": "external",
      "url": "/"
    },
    {
      "type": "",
      "column": "col-xl-3 col-md-6",
      "image": "/images/bitmap/thumb-2.jpg",
      "categories": [
        {
          "category": "Category"
        },
        {
          "category": "Type"
        }
      ],
      "date": "January 5, 2025",
      "heading-class": "h5",
      "heading": "DT’s T.Capital taps in-house investor veteran for Managing Partner role",
      "text": "Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy over the last decade, becomes Managing Partner at T.Capital.",
      "cta-class": "external",
      "url": "/"
    },
    {
      "type": "",
      "column": "col-xl-3 col-md-6",
      "image": "/images/bitmap/thumb-2.jpg",
      "categories": [
        {
          "category": "Category"
        },
        {
          "category": "Type"
        }
      ],
      "date": "January 5, 2025",
      "heading-class": "h5",
      "heading": "DT’s T.Capital taps in-house investor veteran for Managing Partner role",
      "text": "Oliver Schmäschke, a key figure in Deutsche Telekom’s corporate venturing strategy.",
      "cta-class": "external",
      "url": "/"
    }
  ]
}
  • Content:
    //  news card
    
    .news-card{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: $cardgrey;
        border: 1px solid $black;
        transition: all 0.4s;
        &:hover{
            border: 1px solid $bordergrey;
            box-shadow: 0 0 50px 0 rgba(255, 255, 255, 0.25);
            .overlay{
                opacity: 0;
            }
        }
        .media{
            width: 100%;
            aspect-ratio: 1/1;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
            .tint{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background: linear-gradient(214deg, rgba(0, 0, 0, 0.00) 20.27%, #000 107.2%);
            }
        }
        .info{
            padding: 3rem 2rem 11rem 2rem;
        }
        .btn{
            position: absolute;
            left: 2rem;
            bottom: 2rem;
        }
        .categories{
            display: flex;
            div{
                background-color: transparent;
                border: 1px solid $pink;
                border-radius: 6px;
                padding: 0.5rem 1.8rem;
                margin: 0 1rem 0 0;
                color: $white;
            }
        }
        h3{
            color: $white;
        }
        &.featured{
            color: $black;
            background-color: $white;
            h3{
                color: $black;
            }
            .media{
                aspect-ratio: 21/9;
            }
            .info{
                padding: 3rem 3rem 11rem 3rem;
            }
            .btn{
                left: 3rem;
            }
            .categories{
                display: flex;
                div{
                    border: 1px solid $darkblue;
                    background-color: $darkblue;
                }
            }
        }
    }
  • URL: /components/raw/news-filter/news-filter.scss
  • Filesystem Path: src/components/02-components/news-filter/news-filter.scss
  • Size: 1.8 KB

News filter

The filters and pagination on this page are non functoning as we assume their functionality will be baked into the CMS.