コンポーネント集

その他10 

<div class="other-10__wrapper">
    <div class="other-10"><img src="https://picsum.photos/id/1000/400/200" /></div><a class="other-10__news" href="#">
        <p class="other-10__news-date">2021.00.00</p>
        <div class="other-10__news-img"><img src="https://picsum.photos/id/1001/400/200" /></div>
        <p class="other-10__news-text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
    </a>
</div>
 
.other-10__wrapper
  .other-10
    img(src=img)
  a.other-10__news(href=link)
    p.other-10__news-date #{ date }
    .other-10__news-img
      img(src=thumb)
    p.other-10__news-text #{ text }
 
{
  "img": "https://picsum.photos/id/1000/400/200",
  "link": "#",
  "date": "2021.00.00",
  "thumb": "https://picsum.photos/id/1001/400/200",
  "text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
  • Content: 
    $BLOCK_NAME: '.other-10';

// 変数
$color_white: #fff;
$color_black: #000;
$shadow_default: 15px 13px 20px rgba(0, 0, 0, 0.1);
$transition_default: 0.5s;

#{ $BLOCK_NAME } {
  &__wrapper {
    position: relative;
    overflow: hidden;
  }

  height: 480px;
  padding: 48px 48px 96px;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  &__news {
    position: absolute;
    bottom: 48px;
    left: -40px;
    z-index: 1;
    display: flex;
    width: 100%;
    max-width: 470px;
    height: 110px;
    padding: 16px 16px 16px 84px;
    font-family: 'Noto Sans JP', sans-serif;
    background: $color_white;
    box-shadow: $shadow_default;
    transition: transform $transition_default;
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -74px;
      display: block;
      width: 74px;
      height: 1px;
      margin: auto;
      content: '';
      background: $color_black;
      transition: transform $transition_default;
    }
    &:hover {
      transform: translateX(20px);
      &::before {
        transform: translateX(74px);
      }
    }
  }

  &__news-date {
    flex-shrink: 0;
    width: 20px;
    height: 75px;
    font-size: 12px;
    text-align: center;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
  }

  &__news-img {
    flex-shrink: 0;
    width: 130px;
    height: 75px;
    margin-left: 16px;
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  &__news-text {
    flex-grow: 1;
    height: 75px;
    margin-left: 8px;
    overflow: hidden;
    font-size: 13px;
  }
}
  • URL: /components/raw/other10/other10.scss
  • Filesystem Path: src/components/others/1_20/other10/other10.scss
  • Size: 1.7 KB