Callout Component - sirthxalot/vue-foundation-components GitHub Wiki

Callouts combine panels and alerts from Foundation 5 into one generic container component.

In order to generate a callout use simply:

<callout>Your Message ...</callout>

This snippet will generate a default callout which can be used for regular messages.

• Info
• Message
• Warning
• Alert
• Success

You can choose between these types, which will render various formats of our callout component. Well there are two ways in order to choose which type will be used. First let me introduce the type="" attribute. Here you can define which type you would like to use:

<callout type="info">Your Info Message</callout>

But in order to simplify this a little bit, I also created their own components for them so you can use the type as a tag. These type tags has the same attributes as the callout component except for the type="" attribute:

<info>Your Simply Info Message</info>

Its up to you which one you will prefer. Both will result in an information message which could be used in order to inform your clients.

Info Message has No Styling

Foundation does not come with an info style out of box, by default it will use the primary class in order to do this. But I am not a fan, so I will add the .info class to the info boxes. I add manualy I stylesheet on top of examples/callout.html in order to give you a hint how your class could look like.

The Magic of the Type Attribute

May you have noticed that Foundation Sites offers another format of callouts by adding the .secondary class. Well why is this missing? This is just because in my oppinion there is no component needed called secondary, but I agree that you may will need something to tweak into the style. So here is the deal: You can use the type="" attribute, in order to add any class you would like to add and create your own styles. Since the .secondary class already exists you can try this out, using: <callout type="secondary">This is a secondary message.</callout>.

Callouts can be sized using the size="small" or size="large" attribute. These will affect the padding around content to be smaller and larger respectively.

<callout size="small">Your Small Message ...</callout>

or

<callout size="large">Your Large Message ...</callout>

Pair the callout with the close button component by using the closable="true" attribute to create a dismissable alert box:

<callout closable="true">I am closable ...</callout>