Aeroporto di Bologna - Design System

Car Rental Card 

<div class="c-car-rental-card">

    <div class="c-car-rental-card__images">
        <img src="https://placehold.co/50x50" alt="Nome società autonoleggio">
        <img src="https://placehold.co/50x50" alt="Nome società autonoleggio">
        <img src="https://placehold.co/50x50" alt="Nome società autonoleggio">
        <img src="https://placehold.co/50x50" alt="Nome società autonoleggio">
    </div>

    <p class="c-car-rental-card__title">Locauto Rent, Enterprise, National, Alamo</p>

    <p class="c-car-rental-card__meta"><a href="#">+39 051 6472452</a></p>

</div>
 
<div class="c-car-rental-card{{#if modifier}} {{modifier}}{{/if}}">

  <div class="c-car-rental-card__images">
    {{#each images}}
      <img src="{{this.src}}" alt="{{this.alt}}">
    {{/each}}
  </div>

  <p class="c-car-rental-card__title">{{{ title }}}</p>

  <p class="c-car-rental-card__meta">{{{ meta }}}</p>

</div>
 
{
  "images": [
    {
      "src": "https://placehold.co/50x50",
      "alt": "Nome società autonoleggio"
    },
    {
      "src": "https://placehold.co/50x50",
      "alt": "Nome società autonoleggio"
    },
    {
      "src": "https://placehold.co/50x50",
      "alt": "Nome società autonoleggio"
    },
    {
      "src": "https://placehold.co/50x50",
      "alt": "Nome società autonoleggio"
    }
  ],
  "title": "Locauto Rent, Enterprise, National, Alamo",
  "meta": "<a href=\"#\">+39 051 6472452</a>"
}
  • Content: 
    .c-car-rental-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: remify(16px);
  background-color: secondary(soft, 100);
  padding: remify(24px);
  border: remify(1px) solid primary(night, 10);
  border-radius: remify(16px);
  color: primary(night, 100);
}

.c-car-rental-card__images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: remify(12px);
}

.c-car-rental-card__images img {
  width: remify(50px);
  height: remify(50px);
  object-fit: contain;
  flex-shrink: 0;
}

.c-car-rental-card__title {
  @include font-scale(level-3, bold);
  text-align: center;
  color: currentColor;
}

.c-car-rental-card__meta {
  @include font-scale(level-2);
  color: currentColor;
}
  • URL: /components/raw/car-rental-card/_car-rental-card.scss
  • Filesystem Path: src/views/02-molecules/car-rental-card/_car-rental-card.scss
  • Size: 724 Bytes

No notes defined.