Icon Card 

<div class="icon-card">
    <svg class="m-b-sm" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg" id="Vectors-Anchor-Square-1--Streamline-Ultimate">
        <desc>Vectors Anchor Square 1 Streamline Icon: https://streamlinehq.com</desc>
        <path d="M0.75 3a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="M0.75 21a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="M18.75 3a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="M18.75 21a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="m8.25 2.25 7.5 0" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="m21.75 15.75 0 -7.5" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="m8.25 21.75 7.5 0" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="m2.25 8.25 0 7.5" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
    </svg>
    <h3 class="text-grid__heading">Domänenarchitektur</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
 
<div class="icon-card">
    <svg class="m-b-sm" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg" id="Vectors-Anchor-Square-1--Streamline-Ultimate">
        <desc>Vectors Anchor Square 1 Streamline Icon: https://streamlinehq.com</desc>
        <path d="M0.75 3a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="M0.75 21a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="M18.75 3a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="M18.75 21a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 1 0 -4.5 0Z" fill="none" stroke="#ff9c66"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
        <path d="m8.25 2.25 7.5 0" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round"
            stroke-width="1.5"></path>
        <path d="m21.75 15.75 0 -7.5" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round"
            stroke-width="1.5"></path>
        <path d="m8.25 21.75 7.5 0" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round"
            stroke-width="1.5"></path>
        <path d="m2.25 8.25 0 7.5" fill="none" stroke="#ff9c66" stroke-linecap="round" stroke-linejoin="round"
            stroke-width="1.5"></path>
    </svg>
    <h3 class="text-grid__heading">{{heading}}</h3>
    <p>{{text}}</p>
</div>
 
{
  "heading": "Domänenarchitektur",
  "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
}
  • Content: 
    .icon-card {
  margin: 0 $spacer-sm;
}

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .icon-card {
    margin: 0 $spacer-md;
  }
}
  • URL: /components/raw/icon-card/_icon-card.scss
  • Filesystem Path: components/04-molecules/icon-card/_icon-card.scss
  • Size: 143 Bytes

No notes defined.