Foehn Design System

Authorities News 

<div class="container">
    <section class="mb-5">
        <h2 class="mb-4">Authorités</h2>
        <div class="d-flex flex-md-row flex-column mb-4"><a href="" class="col-12 col-md-4 border-1 border text-decoration-none text-black d-flex justify-content-between align-items-center p-2 mb-4 mb-md-0 me-md-4">
                <span class="fw-bold"></span>
                <span class="fas fa-chevron-right"></span>
            </a><a href="" class="col-12 col-md-4 border-1 border text-decoration-none text-black d-flex justify-content-between align-items-center p-2 mb-4 mb-md-0 me-md-4">
                <span class="fw-bold"></span>
                <span class="fas fa-chevron-right"></span>
            </a><a href="" class="col-12 col-md-4 border-1 border text-decoration-none text-black d-flex justify-content-between align-items-center p-2 mb-4 mb-md-0 me-md-4">
                <span class="fw-bold"></span>
                <span class="fas fa-chevron-right"></span>
            </a></div>
        <a href="">Toutes les autorités<span class="fas fa-arrow-right text-primary ms-2"></span></a>
        <div class="mt-5 position-relative">
            <div class="vd-sticker-title position-absolute">
                <h3 class="text-white bg-primary p-2">Actus</h3>
            </div>
        </div>
        <div class="vd-reel mt-5"><a href="#" class="card text-decoration-none">
                <img alt="{files.0.alternative}" class="img-fluid" loading="lazy" height="240" src="http://placehold.it/240x400" width="400" title="Title" />
                <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a><a href="#" class="card text-decoration-none">
                <img alt="{files.0.alternative}" class="img-fluid" loading="lazy" height="240" src="http://placehold.it/240x400" width="400" title="Title" />
                <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet 2</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a><a href="#" class="card text-decoration-none">
                <img alt="{files.0.alternative}" class="img-fluid" loading="lazy" height="240" src="http://placehold.it/240x400" width="400" title="Title" />
                <div class="card-body">
                    <h5 class="card-title">Lorem ipsum dolor sit amet 3</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </a></div>
        <a href="">Toutes les actualités<span class="fas fa-arrow-right text-primary ms-2"></span></a>
        <div class="d-flex flex-column flex-md-row mt-5 justify-content-between">
            <div class="col-12 col-md-5 border border-1 p-4 mb-4 mb-md-0">
                <h3 class="mb-4">Derniers communiqués de presse</h3>
                <div class="d-flex flex-column mb-4"><a href="#" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
                        {news.title}
                        <span class="fas fa-chevron-right"></span>
                    </a><a href="#" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
                        {news.title}
                        <span class="fas fa-chevron-right"></span>
                    </a><a href="#" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
                        {news.title}
                        <span class="fas fa-chevron-right"></span>
                    </a></div>
                <div class="d-flex flex-row text-center">
                    <a href="" class="col-12">Toutes les communiqués de presse<span class="fas fa-arrow-right text-primary ms-2"></span></a>
                </div>
            </div>
            <div class="col-12 col-md-5 border border-1 p-4 mb-4 mb-md-0">
                <h3 class="mb-4">Dernières décisions du conseil d'état</h3>
                <div class="d-flex flex-column mb-4"><a href="{news.url}" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
                        {news.title}
                        <span class="fas fa-chevron-right"></span>
                    </a><a href="{news.url}" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
                        {news.title}
                        <span class="fas fa-chevron-right"></span>
                    </a><a href="{news.url}" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
                        {news.title}
                        <span class="fas fa-chevron-right"></span>
                    </a></div>
                <div class="d-flex flex-row text-center">
                    <a href="" class="col-12">Toutes les décisions du conseil d'état<span class="fas fa-arrow-right text-primary ms-2"></span></a>
                </div>
            </div>
        </div>
    </section>
</div>
 
<div class="container">
  <section class="mb-5">
    <h2 class="mb-4">{{ title }}</h2>
    <div class="d-flex flex-md-row flex-column mb-4">
      {%- for link in autoritiesLinks -%}
        <a href="{{ link.src }}" class="col-12 col-md-4 border-1 border text-decoration-none text-black d-flex justify-content-between align-items-center p-2 mb-4 mb-md-0 me-md-4">
          <span class="fw-bold">{{ link.label }}</span>
          <span class="fas fa-chevron-right"></span>
        </a>
      {%- endfor -%}
    </div>
    <a href="{{ allAuthorities.url }}">Toutes les autorités<span class="fas fa-arrow-right text-primary ms-2"></span></a>
    <div class="mt-5 position-relative">
      <div class="vd-sticker-title position-absolute">
        <h3 class="text-white bg-primary p-2">Actus</h3>
      </div>
    </div>
    <div class="vd-reel mt-5">
      {%- for news in newsList -%}
        <a href="{{ news.url }}" class="card text-decoration-none">
          <img alt="{files.0.alternative}" class="img-fluid" loading="lazy" height="240" src="http://placehold.it/240x400" width="400" title="Title" />
          <div class="card-body">
            <h5 class="card-title">{{ news.title }}</h5>
            <p class="card-text">{{ news.text }}</p>
          </div>
        </a>
      {%- endfor -%}
    </div>
    <a href="{{ allNews.url }}">Toutes les actualités<span class="fas fa-arrow-right text-primary ms-2"></span></a>
    <div class="d-flex flex-column flex-md-row mt-5 justify-content-between">
      <div class="col-12 col-md-5 border border-1 p-4 mb-4 mb-md-0">
        <h3 class="mb-4">Derniers communiqués de presse</h3>
        <div class="d-flex flex-column mb-4">
          {%- for news in communiqueList -%}
            <a href="{{ news.url }}" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
              {news.title}
              <span class="fas fa-chevron-right"></span>
            </a>
          {%- endfor -%}
        </div>
        <div class="d-flex flex-row text-center">
          <a href="{{ allNews.url }}" class="col-12">Toutes les communiqués de presse<span class="fas fa-arrow-right text-primary ms-2"></span></a>
        </div>
      </div>
      <div class="col-12 col-md-5 border border-1 p-4 mb-4 mb-md-0">
        <h3 class="mb-4">Dernières décisions du conseil d'état</h3>
        <div class="d-flex flex-column mb-4">
          {%- for news in decisionList -%}
            <a href="{news.url}" class="col-12 border-bottom border-1 text-decoration-none text-black d-flex justify-content-between pb-3 align-items-center mb-4">
              {news.title}
              <span class="fas fa-chevron-right"></span>
            </a>
          {%- endfor -%}
        </div>
        <div class="d-flex flex-row text-center">
          <a href="{{ allDecision.url }}" class="col-12">Toutes les décisions du conseil d'état<span class="fas fa-arrow-right text-primary ms-2"></span></a>
        </div>
      </div>
    </div>
  </section>
</div>
 
{
  "title": "Authorités",
  "autoritiesLinks": [
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet"
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 2"
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 3"
    }
  ],
  "newsList": [
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet",
      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 2",
      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 3",
      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    }
  ],
  "communiqueList": [
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet"
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 2"
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 3"
    }
  ],
  "decisionList": [
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet"
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 2"
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet 3"
    }
  ],
  "allAuthorities": {
    "src": "#"
  },
  "allNews": {
    "src": "#"
  },
  "allCommunique": {
    "src": "#"
  },
  "allDecision": {
    "src": "#"
  }
}
  • Content: 
    @charset 'UTF-8';

.vd-reel {
  display: flex;
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: $vd-primary-dark transparent;
}

.vd-reel::-webkit-scrollbar {
  block-size: 1rem;
}

.vd-reel::-webkit-scrollbar-track {
  background-color: transparent;
}

.vd-reel::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-image: linear-gradient(
    $vd-primary-dark 0,
    $vd-primary-dark 0.25rem,
    $vd-primary-dark 0.25rem,
    $vd-primary-dark 0.75rem,
    $vd-primary-dark 0.75rem
  );
}

.vd-reel > * {
  flex: 0 0 auto;
  width: 400px;
}

.vd-reel > img {
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

.vd-reel > * + * {
  margin-inline-start: 1rem;
}

.vd-reel.overflowing {
  padding-block-end: 1rem;
}

.vd-sticker-title {
  z-index: 55;
  top: -50px;
  left: -10px;
  transform: rotate(-5deg);
}
  • URL: /components/raw/authorities-news/_authorities-news.scss
  • Filesystem Path: src/components/02-molecules/authorities-news/_authorities-news.scss
  • Size: 868 Bytes
  • Handle: @authorities-news
  • Preview:
  • Filesystem Path: src/components/02-molecules/authorities-news/authorities-news.html

No notes defined.