Book

<!-- Default -->
<div class="book u-animate-pulse">
    <p class="book_img">
        <img src="../../images/book-loading-1.gif" alt="">
    </p>
    <div class="book_title u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ████████████████████ ███████ ██████████ ██████ ███████ ██████████
    </div>
    <div class="book_subtitle u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ███ █████ ███████
    </div>
</div>

<!-- Book Placeholder 2 -->
<div class="book u-animate-pulse">
    <p class="book_img">
        <img src="../../images/book-loading-2.gif" alt="">
    </p>
    <div class="book_title u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        █████████ ████ ███████ ██████████ ██████ ███████ ██████████
    </div>
    <div class="book_subtitle u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ████████ ██
    </div>
</div>

<!-- Book Placeholder 3 -->
<div class="book u-animate-pulse">
    <p class="book_img">
        <img src="../../images/book-loading-5.gif" alt="">
    </p>
    <div class="book_title u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        █████████ ███████████ ███████ ██████████
    </div>
    <div class="book_subtitle u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ██████████ █████████████
    </div>
</div>

<!-- Book Placeholder 4 -->
<div class="book u-animate-pulse">
    <p class="book_img">
        <img src="../../images/book-loading-3.gif" alt="">
    </p>
    <div class="book_title u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ██████████████ █████████████
    </div>
    <div class="book_subtitle u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ████████ ███████
    </div>
</div>

<!-- Book Placeholder 5 -->
<div class="book u-animate-pulse">
    <p class="book_img">
        <img src="../../images/book-loading-2.gif" alt="">
    </p>
    <div class="book_title u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ████████████████████ █████████████ ██████████
    </div>
    <div class="book_subtitle u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
        ████ █████████████████████
    </div>
</div>

<div class="book u-animate-pulse">
  <p class="book_img">
    <img src="{{ path img }}" alt="">
  </p>
  <div class="book_title u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
    {{ characterOne }}
  </div>
  <div class="book_subtitle u-ff-mono u-c-fade" style="letter-spacing: -0.1rem">
    {{ characterTwo }}
  </div>
</div>
/* Default */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "img": "/images/book-loading-1.gif",
  "characterOne": "████████████████████ ███████ ██████████ ██████ ███████ ██████████",
  "characterTwo": "███ █████ ███████"
}

/* Book Placeholder 2 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "img": "/images/book-loading-2.gif",
  "characterOne": "█████████ ████ ███████ ██████████ ██████ ███████ ██████████",
  "characterTwo": "████████ ██"
}

/* Book Placeholder 3 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "img": "/images/book-loading-5.gif",
  "characterOne": "█████████ ███████████ ███████ ██████████",
  "characterTwo": "██████████ █████████████"
}

/* Book Placeholder 4 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "img": "/images/book-loading-3.gif",
  "characterOne": "██████████████ █████████████",
  "characterTwo": "████████ ███████"
}

/* Book Placeholder 5 */
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
  "img": "/images/book-loading-2.gif",
  "characterOne": "████████████████████ █████████████ ██████████",
  "characterTwo": "████ █████████████████████"
}

There are no notes for this item.