Accordion Blocks
Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages. The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme. Features Adds a Gutenberg block for adding accordions to your site. Supports multiple accordions with individual settings for each accordion item. Fully responsive. Support for item IDs and direct links. Supports nesting accordions. Accessible (for users requiring tabbed keyboard navigation control). Optional Features Open individual accordion items by default. Disable auto closing of accordion items. Manually close items by clicking the title again. Scroll page to title when it’s clicked open (including setting a scroll offset position). Set the HTML heading tag for the title element (h1–h6, button). Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults. Supports adding custom block styles using wp.blocks.registerBlockStyle. Output The plugin will ultimately output following HTML (simplified for this example): Title with H2 tag Content Custom CSS You can use the following CSS classes to customize the look of the accordion. .c-accordion__item {} /* The accordion item container */ .c-accordion__item.is-open {} /* is-open is added to open accordion items */ .c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */ .c-accordion__title {} /* An accordion item title */ .c-accordion__title--button {} /* An accordion item title that is using a ` ` tag */ .c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */ .c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */ .c-accordion__content {} /* An accordion item content container */
Top keywords
- accordion16×5.84%
- item12×4.38%
- title11×4.01%
- accordion item8×2.92%
- c-accordion8×2.92%
- items6×2.19%
- accordion items5×1.82%
- accordion item title4×1.46%
- accordions4×1.46%
- item title4×1.46%
- adding3×1.09%
- block3×1.09%
Info Cards – present key information in elegant card layouts
Turn plain text into eye-catching info cards that make your content easier to scan, understand, and remember – no code required. Info Cards | Demos | Pricing Why Info Cards? Walls of text lose readers. Info Cards is a Gutenberg block that lets you present content as beautifully designed, informative cards – combining images, text, and links in layouts your audience can consume at a glance. Choose from built-in templates or create your own custom layout to fit your branding. Set columns, gaps, colors, and typography from the block sidebar – no code or additional software needed, even if you have limited technical knowledge. Every card layout is fully responsive, so your content looks great and functions perfectly across all devices and screen sizes. Whether you’re creating product cards, team member profiles, or informational sections, Info Cards helps your content stand out. Free Features Fully Customizable: Adjust every part of the card to match your site. Custom Colors: Use your brand’s colors throughout. Built-in Templates: Start from ready-made card designs. Layout Control: Set columns, column gap, and row gap. Image Support: Use an image in each card. Link Support: Make cards clickable with links. Typography: Control the text styling of your cards. Responsive Layout: Cards adapt to all devices and screen sizes. Easy to Use: Add and customize cards straight from the block editor. Pro Version Info Cards Pro unlocks more designs and deeper styling control: Universal Shortcodes: Compatible with all page builders. 12+ Ready-Made Themes: Professionally designed card styles. Advanced Templates & Layouts: More ways to arrange your cards. More Typography Controls: Font family, weight, and spacing. Hover & Animation Effects: Bring cards to life on interaction. Gradient & Advanced Color Options: Richer backgrounds and accents. Full Box Control: Border, padding, and margin settings. Card Shadows & Depth Effects: Add dimension to your layouts. 7+ New Built-in Blocks: Extra card blocks to build with. Priority Updates & Support. How to Use Install and activate the Info Cards plugin. Go to the page or post where you want to embed the cards. Click the + button in the Gutenberg editor and search for Info Cards. Select the Info Cards block. Create and customize your cards, then publish. Enjoy! Use Cases Product Highlights: Present features or products in scannable cards. Team Profiles: Introduce team members with photo, name, and link. Service Sections: Summarize what you offer in a clean grid. Informational Content: Break long content into digestible cards. Feedback Liked that plugin? Hate it? Want a new feature? Send me some feedback ⭐ Check out the Parent Plugin of this plugin- 🔥 bBlocks – Best gutenberg blocks collections for WordPress. ⭐ Check out our other WordPress Plugins- 🔥 Html5 Audio Player – Best audio player plugin for WordPress. 🔥 Html5 Video Player – Best video player plugin for WordPress. 🔥 PDF Poster – A fully-featured PDF Viewer Plugin for WordPress. 🔥 StreamCast – A fully-featured Radio Player Plugin for WordPress. 🔥 3D Viewer – Display interactive 3D models on the webs.
