{# @description A picture or a card with a caption kept out of sight until it is pointed at or focused. On a touch screen the caption is always there. #} {# @prop effect:select['slide', 'cover'] | default:"slide" | description:"How the caption arrives. slide brings a strip up from the bottom edge, cover fades a panel in over the whole thing." #} {# @prop zoom:number | default:"1.05" | description:"How far the picture grows while the caption shows, as a multiple of its size. 1 holds it still." #} {# @prop label:text | description:"A name for the whole thing, read out when it takes focus" #} {# @prop class:text | description:"Extra classes on the frame. Rounded corners and the aspect ratio go here." #} {# @slot What is always showing — A picture, usually. #} {# @slot:caption — What is revealed. A title and a line, a link, a button. #} {% comment %} The frame takes keyboard focus so a caption with no link in it can be reached without a mouse, and the caption always shows where the device has no hover (docs/adr/0006-reveals-follow-the-scroll-position.md). {% endcomment %}
{{ slot }}
{% if effect == 'cover' %}
{{ caption }}
{% else %}
{{ caption }}
{% endif %}