Cards

Card collection

A card collection is a list of cards contextually related to one another.

Card collections are always used in pairs and never alone.For a single instance of a card, refer to an single card component instead.

  • Cards in a card collection are always an even height. It will take the height of the heighest card as a baseline.

    Learn more
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil doloremque consectetur illum.

    Learn more
  • Lorem ipsum dolor sit amet.

    Learn more

HTML code snippet

<ul class="cards">
    

<li class="card  " >
    
<div class="card__top">
</div>

    
    
    
    <div class="card__content">
        <p><strong>Cards in a card collection are always an even height. It will take the height of the heighest card as a baseline.</strong></p>
    </div>
    
<a class="card__button button" href="" >Learn more</a>


</li>

    

<li class="card  " >
    
<div class="card__top">
</div>

    
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil doloremque consectetur illum.</strong></p>
    </div>
    
<a class="card__button button" href="" >Learn more</a>


</li>

    

<li class="card  " >
    
<div class="card__top">
</div>

    
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet.</strong></p>
    </div>
    
<a class="card__button button" href="" >Learn more</a>


</li>

</ul>

Card collection options

Cards have a few options such as the title, bodycopy and a button.

  • A title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Learn more
  • Another title

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Learn more

HTML code snippet

<ul class="cards">
    

<li class="card  " >
    
<div class="card__top">
</div>

    
    <h3 class="card__title">A title</h3>
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong></p>
    </div>
    
<a class="card__button button" href="/" >Learn more</a>


</li>

    

<li class="card  " >
    
<div class="card__top">
</div>

    
    <h3 class="card__title">Another title</h3>
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong></p>
    </div>
    
<a class="card__button button" href="/" >Learn more</a>


</li>

</ul>

Card collection theme variations

The cards also are available in different themes to communicatie the product section they belong to.

  • Default theme

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Learn more
  • Weaviate theme

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Learn more
  • Weaviate OSS theme

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Learn more
  • Weaviate Enterprise theme

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Learn more

HTML code snippet

<ul class="cards">
    

<li class="card  " >
    
<div class="card__top">
    <div class="card__icon ">
        <img class="test12" src="/img/logo-icon-semi-consulting.svg" alt="" />
    </div>
</div>

    
    <h3 class="card__title">Default theme</h3>
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong></p>
    </div>
    
<a class="card__button button" href="/" >Learn more</a>


</li>


    

<li class="card card--theme-weaviate " >
    
<div class="card__top">
    <div class="card__icon ">
        <img class="test12" src="/img/logo-icon-weaviate.svg" alt="" />
    </div>
</div>

    
    <h3 class="card__title">Weaviate theme</h3>
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong></p>
    </div>
    
<a class="card__button button" href="/" >Learn more</a>


</li>

</ul>
<ul class="cards">
    

<li class="card card--theme-weaviate-oss " >
    
<div class="card__top">
    <div class="card__icon ">
        <img class="test12" src="/img/logo-icon-weaviate-oss.svg" alt="" />
    </div>
</div>

    
    <h3 class="card__title">Weaviate OSS theme</h3>
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong></p>
    </div>
    
<a class="card__button button" href="/" >Learn more</a>


</li>

    

<li class="card card--theme-weaviate-enterprise " >
    
<div class="card__top">
    <div class="card__icon ">
        <img class="test12" src="/img/logo-icon-weaviate-enterprise.svg" alt="" />
    </div>
</div>

    
    <h3 class="card__title">Weaviate Enterprise theme</h3>
    
    
    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong></p>
    </div>
    
<a class="card__button button" href="/" >Learn more</a>


</li>

</ul>

Single card

A single card is a section of which there are no contextually related other items on this same level in content hierarchy.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque omnis aliquam velit cupiditate aspernatur accusamus in, facere dolorem blanditiis pariatur. Velit labore fugit libero quidem cumque atque quam consectetur fuga.

Learn more

HTML code snippet

<section class="card ">
<div class="card__top">
</div>

    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque omnis aliquam velit cupiditate aspernatur accusamus in, facere dolorem blanditiis pariatur. Velit labore fugit libero quidem cumque atque quam consectetur fuga.</strong></p>
    </div>
<a class="card__button button" href="" >Learn more</a>

</section>

Single card with nested media molecule

Cards can be combined with several other molecules. For example a nested media molecule.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque omnis aliquam velit cupiditate aspernatur accusamus in, facere dolorem blanditiis pariatur. Velit labore fugit libero quidem cumque atque quam consectetur fuga.

Graph outlining SeMI’s combined centroid network

SeMI centroid network combined.

Learn more

HTML code snippet

<section class="card ">
<div class="card__top">
</div>

    <div class="card__content">
        <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque omnis aliquam velit cupiditate aspernatur accusamus in, facere dolorem blanditiis pariatur. Velit labore fugit libero quidem cumque atque quam consectetur fuga.</strong></p>
            
                <figure>
                    <img src="/img/SeMI-centroid-network-combined.jpg"
                         alt="Graph outlining SeMI’s combined centroid network" />
                    <figcaption>
                        <p>SeMI centroid network combined.</p>
                    </figcaption>
                </figure>
                
    </div>
<a class="card__button button" href="" >Learn more</a>

</section>

Card pilars

Card pilars are a larger version of cards. Typically used for displaying and comparing different products.

  • Weaviate OSS logo

    Weaviate OSS

    • Open source version of Weaviate.
    • Organize and structure your data into a knowledge graph.
    • Query your knowledge graph in real time for valuable insights.
    • Stay in control of your datasets and privacy.
    Get started with Weaviate OSS on GitHub
  • Weaviate enterprise logo

    Weaviate Enterprise

    • Enterprise version of Weaviate
    • Organize and structure your data into a knowledge graph.
    • Query your knowledge graph in real time for valuable insights
    • Stay in control of your datasets and privacy.
    • Enrich your insights by connecting to a peer to peer network of other participants.
    • Use third party metadata to enhance the value of your insights.
    • Full scale implementations for multiple cloud vendors.
    • Full scale on premise implementation.
    • Support from SeMI's knowledge graph consultants.
    Contact us to get started with Enterprise

HTML code snippet

<ul class="cards">
                
                

<li class="card card--pilar card--theme-weaviate-oss " >
    
<div class="card__top">
    <div class="card__icon ">
        <img class="test12" src="/img/logo-icon-weaviate-oss.svg" alt="Weaviate OSS logo" />
    </div>
</div>

    
    <h3 class="card__title">Weaviate OSS</h3>
    
    
    <div class="card__content">
            
                <ul class="list-benefits">
                    <li>Open source version of Weaviate.</li>
                    <li>Organize and structure your data into a knowledge graph.</li>
                    <li>Query your knowledge graph in real time for valuable insights.</li>
                    <li>Stay in control of your datasets and privacy.</li>
                </ul>
                
    </div>
    
<a class="card__button button" href="https://github.com/creativesoftwarefdn/weaviate"  target="_blank">Get started with Weaviate OSS on GitHub</a>


</li>

                
                

<li class="card card--pilar card--theme-weaviate-enterprise " >
    
<div class="card__top">
    <div class="card__icon ">
        <img class="test12" src="/img/logo-icon-weaviate-enterprise.svg" alt="Weaviate enterprise logo" />
    </div>
</div>

    
    <h3 class="card__title">Weaviate Enterprise</h3>
    
    
    <div class="card__content">
            
                <ul class="list-benefits">
                    <li>Enterprise version of Weaviate</li>
                    <li>Organize and structure your data into a knowledge graph.</li>
                    <li>Query your knowledge graph in real time for valuable insights</li>
                    <li>Stay in control of your datasets and privacy.</li>
                    <li>Enrich your insights by connecting to a peer to peer network of other participants.</li>
                    <li>Use third party metadata to enhance the value of your insights.</li>
                    <li>Full scale implementations for multiple cloud vendors.</li>
                    <li>Full scale on premise implementation.</li>
                    <li>Support from SeMI's knowledge graph consultants.</li>
                </ul>
                
    </div>
    
<a class="card__button button" href="javascript:void(Tawk_API.toggle())"  target="_blank">Contact us to get started with Enterprise</a>


</li>

            </ul>