Ribbon

Flags a card. The ribbon is absolutely positioned, so place it inside a positioned parent such as a Card.

<twig:Tabler:Card>
    <twig:Tabler:Ribbon variant="success">New</twig:Tabler:Ribbon>
    <twig:Tabler:Card:Body>
        <twig:Tabler:Card:Title>Pro plan</twig:Tabler:Card:Title>
        <p class="text-secondary mb-0">Unlimited projects and deployments.</p>
    </twig:Tabler:Card:Body>
</twig:Tabler:Card>

<div class="card">
    <div class="ribbon bg-success">New</div>
    <div class="card-body">
        <h3 class="card-title">Pro plan</h3>
        <p class="text-secondary mb-0">Unlimited projects and deployments.</p>
    </div>
</div>

Positions

position is end (the default, the top-right corner), start, top, top-start, bottom or bottom-start:

<div class="row row-cards">
    {% for position in ['end', 'start', 'top', 'top-start', 'bottom', 'bottom-start'] %}
        <div class="col-sm-4">
            <twig:Tabler:Card>
                <twig:Tabler:Ribbon variant="primary" position="{{ position }}"><twig:Tabler:Icon name="star" /></twig:Tabler:Ribbon>
                <twig:Tabler:Card:Body class="py-5 text-center">{{ position }}</twig:Tabler:Card:Body>
            </twig:Tabler:Card>
        </div>
    {% endfor %}
</div>

<div class="row row-cards">
    <div class="col-sm-4">
        <div class="card">
            <div class="ribbon bg-primary"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">end</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="ribbon bg-primary ribbon-start"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">start</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="ribbon bg-primary ribbon-top"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">top</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="ribbon bg-primary ribbon-top ribbon-start"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">top-start</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="ribbon bg-primary ribbon-bottom"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">bottom</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card">
            <div class="ribbon bg-primary ribbon-bottom ribbon-start"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">bottom-start</div>
        </div>
    </div>
</div>

Bookmark

bookmark turns the ribbon into a bookmark with a notched end:

<div class="row row-cards">
    <div class="col-sm-6">
        <twig:Tabler:Card>
            <twig:Tabler:Ribbon variant="warning" bookmark="{{ true }}"><twig:Tabler:Icon name="star" /></twig:Tabler:Ribbon>
            <twig:Tabler:Card:Body class="py-5 text-center">Bookmark, end</twig:Tabler:Card:Body>
        </twig:Tabler:Card>
    </div>
    <div class="col-sm-6">
        <twig:Tabler:Card>
            <twig:Tabler:Ribbon variant="danger" position="top-start" bookmark="{{ true }}"><twig:Tabler:Icon name="flame" /></twig:Tabler:Ribbon>
            <twig:Tabler:Card:Body class="py-5 text-center">Bookmark, top start</twig:Tabler:Card:Body>
        </twig:Tabler:Card>
    </div>
</div>

<div class="row row-cards">
    <div class="col-sm-6">
        <div class="card">
            <div class="ribbon bg-warning ribbon-bookmark"><i class="ti ti-star"></i></div>
            <div class="card-body py-5 text-center">Bookmark, end</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="ribbon bg-danger ribbon-top ribbon-start ribbon-bookmark"><i class="ti ti-flame"></i></div>
            <div class="card-body py-5 text-center">Bookmark, top start</div>
        </div>
    </div>
</div>

Variants

Without variant, the ribbon uses Tabler’s default color, the primary one.

<div class="row row-cards">
    {% for variant in ['primary', 'success', 'danger', 'dark'] %}
        <div class="col-6 col-sm-3">
            <twig:Tabler:Card>
                <twig:Tabler:Ribbon variant="{{ variant }}">{{ variant|slice(0, 3)|upper }}</twig:Tabler:Ribbon>
                <twig:Tabler:Card:Body class="py-5 text-center">{{ variant }}</twig:Tabler:Card:Body>
            </twig:Tabler:Card>
        </div>
    {% endfor %}
</div>

<div class="row row-cards">
    <div class="col-6 col-sm-3">
        <div class="card">
            <div class="ribbon bg-primary">PRI</div>
            <div class="card-body py-5 text-center">primary</div>
        </div>
    </div>
    <div class="col-6 col-sm-3">
        <div class="card">
            <div class="ribbon bg-success">SUC</div>
            <div class="card-body py-5 text-center">success</div>
        </div>
    </div>
    <div class="col-6 col-sm-3">
        <div class="card">
            <div class="ribbon bg-danger">DAN</div>
            <div class="card-body py-5 text-center">danger</div>
        </div>
    </div>
    <div class="col-6 col-sm-3">
        <div class="card">
            <div class="ribbon bg-dark">DAR</div>
            <div class="card-body py-5 text-center">dark</div>
        </div>
    </div>
</div>

Props

Prop	Type	Default	Description
`variant`	string?	`null`	Background: `primary` `secondary` `success` `danger` `warning` `info` `dark` `light`
`position`	string	`'end'`	`end` `start` `top` `top-start` `bottom` `bottom-start`
`bookmark`	bool	`false`	Bookmark style (`ribbon-bookmark`)

Other attributes go to the root <div class="ribbon">. Any other variant value renders no color class.

Blocks

Block	Default
`content`	Empty: the children, a short label or an icon