rivendellweb pattern library

Postit List 

<ul class="postit-list">

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>

    <li class="postit">
        <a href="#">
            <h5>Title</h5>
            <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
        </a>
    </li>
</ul>
 
<ul class="postit-list">

  <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>

    <li class="postit">
    <a href="#">
      <h5>Title</h5>
      <p class="recursive-sans-casual-medium-italic">Text Content #2</p>
    </a>
  </li>
</ul>
 
/* No context defined. */
  • Content: 
    .postit-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem;


  & .postit:nth-child(2n){
    transform: rotate(20deg);
  }
  
  & .postit:nth-child(2n+1){
    background-color: var(--color-aqua);
    transform: rotate(-20deg);
  }
}
  • URL: /components/raw/postit-list/postit.css
  • Filesystem Path: src/components/99-pages/postit-list/postit.css
  • Size: 264 Bytes

No notes defined.