Foehn Design System

Card 

<div class="vd-card mb-3">
    <div class="container">
        <div class="row">
            <div class="col-4 col-sm-3 col-lg-2 mt-3">
                <img class="rounded-circle img-fluid" src="/assets/img/avatar.jpg" alt="Alternative text">

            </div>
            <div class="col-8 col-sm-9 col-lg-10">
                <div class="card-block vd-card-block">
                    <strong class="h5 card-title vd-card-title">Jean Villard</strong>
                    <p class="card-text vd-card-text">Poète, chansonnier, comédien, écrivain et compositeur</p>
                    <ul class="vd-list-links">
                        <li>
                            <a href="#">Biographie</a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="vd-card mb-3">
  <div class="container">
    <div class="row">
      <div class="col-4 col-sm-3 col-lg-2 mt-3">
        {% render '@image--rounded', image, true %}
      </div>
      <div class="col-8 col-sm-9 col-lg-10">
        <div class="card-block vd-card-block">
          <strong class="h5 card-title vd-card-title">{{ name }}</strong>
          <p class="card-text vd-card-text">{{ position }}</p>
          {% render '@list-links', links %}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "name": "Jean Villard",
  "position": "Poète, chansonnier, comédien, écrivain et compositeur",
  "links": {
    "listLinks": [
      {
        "item": "Biographie",
        "url": "#"
      }
    ]
  },
  "image": {
    "src": "/assets/img/avatar.jpg",
    "alt": "Alternative text",
    "styleModifier": "img-fluid"
  }
}
  • Content: 
    @charset 'UTF-8';

.vd-card .vd-card-title {
  margin: 0 0 0.25em;
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src/components/02-molecules/card/_card.scss
  • Size: 69 Bytes

No notes defined.