テンプレート:Card

Description

Card component from Bootstrap 4.1

See also http://getbootstrap.com/docs/4.1/components/card/

Parameters

• {{{body}}} or {{{1}}}
• {{{list}}}
• {{{header}}}
• {{{footer}}}
• {{{image top}}}
• {{{image bottom}}}
• {{{class}}} - HTML class. e.g. ml-3 d-none d-md-block
• {{{style}}} - HTML style. e.g. width: 300px; max-width: 100%;

Examples

Simple card

Code:

{{Card|This is a card}}

Result:

This is a card

Header and footer

Code:

{{Card
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

Result:

This is a card header

This is a card body

This is a card footer

List

Code:

{{Card
|header=This is a card header
|list=
* This is a list
* This is a list
* This is a list
}}

Result:

This is a card header

• This is a list
• This is a list
• This is a list

Image

Code:

{{Card
|image top=[[File:Firefox-logo.png|link=|300px]]
|style=width: 300px; max-width: 100%;
|list=
* This is a list
* This is a list
* This is a list
}}

Result:

• This is a list
• This is a list
• This is a list

Theme class

{{Card
|class=text-white bg-primary
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=text-white bg-secondary
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=text-white bg-success
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=text-white bg-danger
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=text-white bg-warning
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=text-white bg-info
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=bg-light
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

{{Card
|class=text-white bg-dark
|header=This is a card header
|body=This is a card body
|footer=This is a card footer
}}

This is a card header

This is a card body

This is a card footer

Bootstrap provides a lot of useful utility classes for layout and styling. Check the document.

See also

• Bootstrap templates
• Template:AppCard
• Template:Button[[cs:{{{1}}}]]

[[de:{{{1}}}]]

[[el:{{{1}}}]]

[[en:{{{1}}}]]

[[es:{{{1}}}]]

[[fr:{{{1}}}]]

[[is:{{{1}}}]]

[[it:{{{1}}}]]

[[hu:{{{1}}}]]

[[nl:{{{1}}}]]

[[pl:{{{1}}}]]

[[pt:{{{1}}}]]

[[ru:{{{1}}}]]

[[fi:{{{1}}}]]

[[sv:{{{1}}}]]

[[tr:{{{1}}}]]

[[vi:{{{1}}}]]