<template>
    <section>
        <div class="box is-relative">
            <div class="ribbon is-radius">Default</div>
            Box content
        </div><br>
        <div class="card">
            <div class="card-image">
                <figure class="image">
                    <img src="/static/img/placeholder.jpeg" alt="Placeholder image">
                </figure>
                <div class="ribbon">Default</div>
            </div>
            <div class="card-content">
                <div class="media">
                    <div class="media-left">
                        <figure class="image is-48x48">
                            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
                        </figure>
                    </div>
                    <div class="media-content">
                        <p class="title is-4">John Smith</p>
                        <p class="subtitle is-6">@johnsmith</p>
                    </div>
                </div>

                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                    <a href="#">#css</a> <a href="#">#responsive</a>
                    <br>
                    <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
                </div>
            </div>
        </div>
    </section>
</template>

<template>
    <div class="boxer has-ribbon is-small">
        <div class="ribbon">Normal</div>
        <div class="ribbon is-left is-light">Light</div>
        <div class="ribbon is-bot is-dark">Dark</div>
        <div class="ribbon is-left is-bot is-primary">Primary</div>
        Box content
    </div>
</template>