# Components

Discover Hinode's more than 30 ready-to-use components.

## Components

Hinode provides more than 30 components out of the box, powered by [Bootstrap](https://getbootstrap.com) and other libraries. Simply embed these components in your content pages using  [Hugo shortcodes](https://gohugo.io/shortcodes/). Click on an item for more details about a component.


- [Abbr](/docs/components/abbr/index.md): Use the abbr shortcode to show the long form of an abbreviation.
- [Accordion](/docs/components/accordion/index.md): Use the accordion shortcode to show a group of vertically collapsing and expanding items.
- [Alert](/docs/components/alert/index.md): Use the alert shortcode to display a contextual feedback message.
- [Animation](/docs/components/animation/index.md): Use the animation shortcode to show an After Effects animation.
- [Args](/docs/components/args/index.md): Use the args shortcode to generates a table of structured arguments.
- [Badge](/docs/components/badge/index.md): Use the badge shortcode to enrich headings.
- [Breadcrumb](/docs/components/breadcrumb/index.md): Use the breadcrumb shortcode to display the current page’s location within the site's navigational hierarchy.
- [Button Group](/docs/components/button-group/index.md): Use the button-group shortcode to display a group of buttons.
- [Button](/docs/components/button/index.md): Use the button shortcode to display a button with a hyperlink.
- [Card Group](/docs/components/card-group/index.md): Use the card-group shortcode to display a group of cards.
- [Card](/docs/components/card/index.md): Use the card shortcode to display a card that links to a content page.
- [Carousel](/docs/components/carousel/index.md): Use the carousel shortcode to display a carousel of several images.
- [Collapse](/docs/components/collapse/index.md): Use the collapse shortcode to reveal or hide a panel.
- [Command](/docs/components/command/index.md): The command shortcode generates terminal output for either Bash, PowerShell, or SQL shell languages.
- [Docs](/docs/components/docs/index.md): The docs shortcode captures a code snippet from a supported input file.
- [Example](/docs/components/example/index.md): The example shortcode displays a code example and renders a preview of the same input.
- [File](/docs/components/file/index.md): The file shortcode prints the full content of any given file with syntax highlighting.
- [Icon](/docs/components/icon/index.md): Use the icon shortcode to add a Font Awesome or custom icon with ease.
- [Image](/docs/components/image/index.md): Use the image shortcode to display a responsive image with an optional aspect ratio.
- [Ins](/docs/components/ins/index.md): Use the ins shortcode to underline text.
- [Kbd](/docs/components/kbd/index.md): Use the kbd shortcode to show a keyboard input element.
- [Link](/docs/components/link/index.md): Use the link shortcode to add a managed link to your page content.
- [Map](/docs/components/map/index.md): Use the map shortcode to show an interactive map.
- [Mark](/docs/components/mark/index.md): Use the mark shortcode to highlight text.
- [Mermaid](/docs/components/mermaid/index.md): Use the mermaid shortcode to add diagrams and charts powered by Mermaid.
- [Navbar](/docs/components/navbar/index.md): Use the navbar shortcode to display a navigation header with a toggler.
- [Navs and tabs](/docs/components/navs-and-tabs/index.md): Use the nav shortcode to show a group of multiple tab panes.
- [Persona](/docs/components/persona/index.md): Use the persona shortcode to display a custom card.
- [Release](/docs/components/release/index.md): Use the release shortcode to indicate the availability of a specific feature in a tagged release.
- [Spinner](/docs/components/spinner/index.md): Use the spinner shortcode to indicate the loading state of a component or page.
- [Sub](/docs/components/sub/index.md): Use the sub shortcode to display text in subscript.
- [Sup](/docs/components/sup/index.md): Use the sup shortcode to display text in superscript.
- [Table](/docs/components/table/index.md): Use the table shortcode to make your Markdown table responsive.
- [Testimonial](/docs/components/testimonial/index.md): Use the testimonial shortcode to display a quote with attribution.
- [Timeline](/docs/components/timeline/index.md): Use the timeline shortcode to show items ordered on a vertical timeline.
- [Toast](/docs/components/toast/index.md): Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
- [Tooltip](/docs/components/tooltip/index.md): Use the tooltip shortcode to display a tooltip for a hyperlink.
- [Video](/docs/components/video/index.md): Use the video shortcode to embed a responsive video on your site.