Foehn Design System

Nowcard 

<div class="text-center vd-nowcard">
    <div class="container">
        <div class="row"><a href="#" class="col-12 col-sm-3 mt-3 text-black">
                <div class="item">
                    <img src="http://placehold.it/250x250" class="img-fluid" height="250" width="250" />
                    <p class="mb-2 mt-2">Title 1</p>
                    <i class="fa fa-arrow-right"></i>
                </div>
            </a><a href="#" class="col-12 col-sm-3 mt-3 text-black">
                <div class="item">
                    <img src="http://placehold.it/250x250" class="img-fluid" height="250" width="250" />
                    <p class="mb-2 mt-2">Title 2</p>
                    <i class="fa fa-arrow-right"></i>
                </div>
            </a></div>
    </div>
</div>
 
<div class="text-center vd-nowcard">
  <div class="container">
    <div class="row">
      {%- for image in images -%}
        <a href="{{ image.url }}" class="col-12 col-sm-3 mt-3 text-black">
          <div class="item">
            <img src="http://placehold.it/250x250" class="img-fluid" height="250" width="250" />
            <p class="mb-2 mt-2">{{ image.title }}</p>
            <i class="fa fa-arrow-right"></i>
          </div>
        </a>
      {%- endfor -%}
    </div>
  </div>
</div>
 
{
  "images": [
    {
      "url": "#",
      "title": "Title 1"
    },
    {
      "url": "#",
      "title": "Title 2"
    }
  ]
}
  • Content: 
    @charset 'UTF-8';

.vd-nowcard {
  .item {
    background: #fff;
    padding: 1em;
    border: 1px solid #e0e0e0;
  }

  a {
    text-decoration: none;
  }
}
  • URL: /components/raw/nowcard/_nowcard.scss
  • Filesystem Path: src/components/02-molecules/nowcard/_nowcard.scss
  • Size: 158 Bytes

No notes defined.