5c6925385e
Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.
This allows for stuff like:
{{% callout info %}}
##### I'm an info callout!
```css
.foo {
color: #fff;
}
```
{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}
2.7 KiB
| layout | title | description | group | toc |
|---|---|---|---|---|
| docs | File browser | Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript. | forms | true |
{{% callout info %}} The recommended plugin to animate custom file inputs is bs-custom-file-input; it's what we use here in our docs. {{% /callout %}}
Default
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional Choose file... and selected file name text.
{{< example >}}
Add the disabled attribute to the <input> and the custom markup will be updated to appear disabled.
{{< example >}}
Longer placeholder text is truncated and an ellipsis is added when there's not enough space.
{{< example >}}
We hide the default file <input> via opacity and instead style the <label>, and declare a width and height on the <input> for proper spacing for surrounding content.
Sizing
You may also choose from small and large file inputs to match our similarly sized text inputs.
{{< example >}}