@sociallane/elements 1.0.0

package/packages/widgets/posts-grid/templates/wrapper.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Template: Grid Posts Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - posts (array of card data: title, url, date, date_iso, excerpt, image, show_*)
+ * - show_heading, heading, heading_tag
+ * - grid_class, classes, widget_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$posts = $view['posts'];
+$classes = $view['classes'] ?? [];
+?>
+
+<section
+	class="<?php echo esc_attr( $classes['section'] ?? '' ); ?> py-12 md:py-16 lg:py-20"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( ! empty( $view['show_heading'] ) && ! empty( $view['heading'] ) ) : ?>aria-labelledby="posts-grid-<?php echo esc_attr( $view['widget_id'] ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php if ( ! empty( $view['show_heading'] ) && ! empty( $view['heading'] ) ) : ?>
+			<<?php echo $view['heading_tag']; ?>
+				id="posts-grid-<?php echo esc_attr( $view['widget_id'] ); ?>"
+				class="<?php echo esc_attr( $classes['title'] ?? '' ); ?> text-2xl md:text-3xl font-bold font-heading mb-8 md:mb-10"
+				<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+			>
+				<?php echo $view['heading']; ?>
+			</<?php echo $view['heading_tag']; ?>>
+		<?php endif; ?>
+
+		<?php if ( empty( $posts ) ) : ?>
+			<p class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?>"><?php esc_html_e( 'No posts found.', 'sociallane-elements' ); ?></p>
+		<?php else : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<div class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-6 lg:gap-8" <?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $posts as $card ) : ?>
+					<?php include __DIR__ . '/partials/card.php'; ?>
+				<?php endforeach; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>

package/packages/widgets/posts-grid-overlay/data/view.php

@@ -0,0 +1,144 @@
+<?php
+/**
+ * Data Preparation: Grid Posts
+ *
+ * Runs WP_Query for post type "post" and builds template-ready card data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Grid Posts widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_posts_grid_overlay_view( array $settings, string $widget_id ): array {
+	$posts_per_page = max( 1, min( 24, (int) ( $settings['posts_per_page'] ?? 6 ) ) );
+	$orderby        = $settings['orderby'] ?? 'date';
+	$order          = ( $settings['order'] ?? 'DESC' ) === 'ASC' ? 'ASC' : 'DESC';
+	$offset         = max( 0, (int) ( $settings['offset'] ?? 0 ) );
+	$category_ids   = $settings['category_ids'] ?? [];
+
+	$args = [
+		'post_type'      => 'post',
+		'post_status'    => 'publish',
+		'posts_per_page' => $posts_per_page,
+		'orderby'        => $orderby,
+		'order'          => $order,
+		'offset'         => $offset,
+		'no_found_rows'  => true,
+	];
+
+	if ( ! empty( $category_ids ) && is_array( $category_ids ) ) {
+		$args['category__in'] = array_map( 'absint', $category_ids );
+	}
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Light/dark mode: dual classes so widget responds to Nav theme switcher
+	$theme_classes = [
+		'section' => 'bg-neutral-100 dark:bg-blue-chill-950',
+		'card'    => 'bg-blue-chill-950 border border-neutral-200 dark:bg-blue-chill-950 dark:border-blue-chill-300/10',
+		'title'   => 'text-blue-chill-950 dark:text-blue-chill-300',
+		'meta'    => 'text-blue-chill-300 dark:text-blue-100/50',
+		'excerpt' => 'text-blue-chill-950 dark:text-blue-100/50',
+		'overlay_text' => 'text-blue-chill-100 dark:text-blue-chill-300',
+		'overlay_meta' => 'text-white/80 dark:text-white/80',
+	];
+
+	if ( ! class_exists( 'WP_Query' ) ) {
+		$empty = sociallane_extract_fields( $settings, [ 'heading' => [ 'show_key' => 'show_heading', 'default_show' => 'no' ] ] );
+		return array_merge( $empty, [
+			'posts'      => [],
+			'heading_tag' => sociallane_validate_heading_tag( $settings, 'heading_tag', 'h2' ),
+			'grid_class' => 'grid-cols-1',
+			'classes'    => $theme_classes,
+			'widget_id'  => $widget_id,
+			'animation'  => $animation,
+		] );
+	}
+
+	$query = new \WP_Query( $args );
+
+	$show_image   = ( $settings['show_image'] ?? 'yes' ) === 'yes';
+	$show_date    = ( $settings['show_date'] ?? 'yes' ) === 'yes';
+	$show_excerpt = ( $settings['show_excerpt'] ?? 'yes' ) === 'yes';
+	$excerpt_len   = max( 5, min( 100, (int) ( $settings['excerpt_length'] ?? 20 ) ) );
+	$columns     = sociallane_validate_option( $settings['columns'] ?? '3', [ '2', '3', '4' ], '3' );
+	$grid_class  = sociallane_grid_cols( $columns, [
+		'2' => 'grid-cols-1 sm:grid-cols-2',
+		'3' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+		'4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+	] );
+	$heading_data = sociallane_extract_fields( $settings, [ 'heading' => [ 'show_key' => 'show_heading', 'default_show' => 'no' ] ] );
+	$heading_tag  = sociallane_validate_heading_tag( $settings, 'heading_tag', 'h2' );
+	$classes      = $theme_classes;
+
+	$card_layout = 'overlay';
+
+	$posts = [];
+	if ( $query->have_posts() ) {
+		while ( $query->have_posts() ) {
+			$query->the_post();
+			$post_id = get_the_ID();
+
+			$image = [
+				'src'     => '',
+				'alt'     => get_the_title(),
+				'srcset'  => '',
+				'sizes'   => '(max-width: 768px) 100vw, 33vw',
+				'width'   => '',
+				'height'  => '',
+				'loading' => 'lazy',
+			];
+
+			$thumb_id = get_post_thumbnail_id( $post_id );
+			if ( $thumb_id ) {
+				$image['src'] = esc_url( get_the_post_thumbnail_url( $post_id, 'large' ) ?: '' );
+				$image['alt'] = esc_attr( get_post_meta( $thumb_id, '_wp_attachment_image_alt', true ) ?: get_the_title() );
+				$image['srcset'] = wp_get_attachment_image_srcset( $thumb_id, 'large' ) ?: '';
+				$meta = wp_get_attachment_metadata( $thumb_id );
+				if ( $meta ) {
+					$image['width']  = $meta['width'] ?? '';
+					$image['height'] = $meta['height'] ?? '';
+				}
+			}
+
+			$excerpt_text = '';
+			if ( $show_excerpt ) {
+				$raw = has_excerpt( $post_id ) ? get_the_excerpt() : wp_trim_words( get_the_content(), $excerpt_len );
+				$excerpt_text = esc_html( $raw );
+			}
+
+			$posts[] = [
+				'id'           => $post_id,
+				'title'        => esc_html( get_the_title() ),
+				'url'          => esc_url( get_the_permalink() ),
+				'date'         => get_the_date( '', $post_id ),
+				'date_iso'     => get_the_date( 'c', $post_id ),
+				'excerpt'      => $excerpt_text,
+				'image'        => $image,
+				'show_image'   => $show_image,
+				'show_date'    => $show_date,
+				'show_excerpt' => $show_excerpt,
+			];
+		}
+		wp_reset_postdata();
+	}
+
+	return array_merge( $heading_data, [
+		'posts'       => $posts,
+		'heading_tag' => $heading_tag,
+		'grid_class'  => $grid_class,
+		'card_layout' => $card_layout,
+		'classes'     => $classes,
+		'widget_id'   => $widget_id,
+		'animation'   => $animation,
+	] );
+}

package/packages/widgets/posts-grid-overlay/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-posts-grid-overlay",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: posts-grid-overlay",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/posts-grid-overlay/posts-grid-overlay.php

@@ -0,0 +1,282 @@
+<?php
+/**
+ * Widget: Grid Posts
+ *
+ * A grid of post cards pulled from the post type "post". Supports query options,
+ * column count, and toggles for image, date, and excerpt per card.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Grid Posts Widget
+ */
+class Posts_Grid_Overlay extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'posts-grid-overlay';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Posts Grid (Overlay)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-posts-grid';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-cards' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'posts', 'grid', 'blog', 'cards', 'archive' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_query_section();
+		$this->register_display_section();
+		$this->register_layout_section();
+		$this->register_header_section();
+		$this->register_animation_controls( true, true );
+	}
+
+	private function register_query_section(): void {
+		$this->start_controls_section(
+			'section_query',
+			[
+				'label' => esc_html__( 'Query', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'posts_per_page',
+			[
+				'label'   => esc_html__( 'Number of Posts', 'sociallane-elements' ),
+				'type'    => Controls_Manager::NUMBER,
+				'default' => 6,
+				'min'     => 1,
+				'max'     => 24,
+			]
+		);
+
+		$this->add_control(
+			'orderby',
+			[
+				'label'   => esc_html__( 'Order By', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'date',
+				'options' => [
+					'date'          => esc_html__( 'Date', 'sociallane-elements' ),
+					'title'         => esc_html__( 'Title', 'sociallane-elements' ),
+					'rand'          => esc_html__( 'Random', 'sociallane-elements' ),
+					'comment_count' => esc_html__( 'Comment Count', 'sociallane-elements' ),
+					'menu_order'    => esc_html__( 'Menu Order', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'order',
+			[
+				'label'   => esc_html__( 'Order', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'DESC',
+				'options' => [
+					'ASC'  => esc_html__( 'Ascending', 'sociallane-elements' ),
+					'DESC' => esc_html__( 'Descending', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'category_ids',
+			[
+				'label'       => esc_html__( 'Categories', 'sociallane-elements' ),
+				'type'        => Controls_Manager::SELECT2,
+				'multiple'    => true,
+				'label_block' => true,
+				'options'     => $this->get_category_options(),
+				'default'     => [],
+			]
+		);
+
+		$this->add_control(
+			'offset',
+			[
+				'label'   => esc_html__( 'Offset', 'sociallane-elements' ),
+				'type'    => Controls_Manager::NUMBER,
+				'default' => 0,
+				'min'     => 0,
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_display_section(): void {
+		$this->start_controls_section(
+			'section_display',
+			[
+				'label' => esc_html__( 'Display', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_image',
+			[
+				'label'   => esc_html__( 'Show Featured Image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'show_date',
+			[
+				'label'   => esc_html__( 'Show Date', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'show_excerpt',
+			[
+				'label'   => esc_html__( 'Show Excerpt', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'excerpt_length',
+			[
+				'label'     => esc_html__( 'Excerpt Length', 'sociallane-elements' ),
+				'type'      => Controls_Manager::NUMBER,
+				'default'   => 20,
+				'min'       => 5,
+				'max'       => 100,
+				'condition' => [
+					'show_excerpt' => 'yes',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_layout_section(): void {
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'columns',
+			[
+				'label'   => esc_html__( 'Columns', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '3',
+				'options' => [
+					'2' => '2',
+					'3' => '3',
+					'4' => '4',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_header_section(): void {
+		$this->start_controls_section(
+			'section_header',
+			[
+				'label' => esc_html__( 'Section Header', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_heading',
+			[
+				'label'   => esc_html__( 'Show Heading', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => '',
+			]
+		);
+
+		$this->add_control(
+			'heading',
+			[
+				'label'       => esc_html__( 'Heading', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum dolor', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$this->add_control(
+			'heading_tag',
+			[
+				'label'   => esc_html__( 'Heading Tag', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'h2',
+				'options' => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	/**
+	 * Get categories for SELECT2 options
+	 *
+	 * @return array<string, string>
+	 */
+	private function get_category_options(): array {
+		if ( ! function_exists( 'get_categories' ) ) {
+			return [];
+		}
+		$categories = get_categories( [ 'hide_empty' => true ] );
+		$options    = [];
+		if ( ! is_array( $categories ) ) {
+			return $options;
+		}
+		foreach ( $categories as $cat ) {
+			if ( isset( $cat->term_id, $cat->name ) ) {
+				$options[ (string) $cat->term_id ] = $cat->name;
+			}
+		}
+		return $options;
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_posts_grid_overlay_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/posts-grid-overlay/templates/partials/card-overlay.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Template Partial: Grid Posts – single post card (image overlay layout)
+ *
+ * Full-bleed background image with dark gradient overlay; date, title, and
+ * excerpt overlaid at the bottom. Expects $card and $view['classes'] in scope.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) || empty( $card ) || empty( $view ) ) {
+	return;
+}
+
+$classes = $view['classes'] ?? [];
+$has_image = ! empty( $card['show_image'] ) && ! empty( $card['image']['src'] );
+?>
+
+<article class="rounded-xl overflow-hidden flex flex-col min-h-[18rem] md:min-h-[22rem] transition-shadow hover:shadow-xl">
+	<a
+		href="<?php echo esc_url( $card['url'] ); ?>"
+		class="group block relative w-full h-full min-h-[18rem] md:min-h-[22rem] focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none focus:ring-offset-white dark:focus:ring-offset-neutral-900 rounded-xl overflow-hidden"
+	>
+		<?php if ( $has_image ) : ?>
+			<img
+				src="<?php echo esc_url( $card['image']['src'] ); ?>"
+				alt="<?php echo esc_attr( $card['image']['alt'] ); ?>"
+				<?php if ( ! empty( $card['image']['srcset'] ) ) : ?>srcset="<?php echo esc_attr( $card['image']['srcset'] ); ?>"<?php endif; ?>
+				<?php if ( ! empty( $card['image']['sizes'] ) ) : ?>sizes="<?php echo esc_attr( $card['image']['sizes'] ); ?>"<?php endif; ?>
+				<?php if ( ! empty( $card['image']['width'] ) ) : ?>width="<?php echo esc_attr( $card['image']['width'] ); ?>"<?php endif; ?>
+				<?php if ( ! empty( $card['image']['height'] ) ) : ?>height="<?php echo esc_attr( $card['image']['height'] ); ?>"<?php endif; ?>
+				loading="lazy"
+				decoding="async"
+				class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+			/>
+		<?php else : ?>
+			<span class="absolute inset-0 bg-neutral-300 dark:bg-neutral-700" aria-hidden="true"></span>
+		<?php endif; ?>
+
+		<span class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/50 to-transparent" aria-hidden="true"></span>
+
+		<div class="relative z-10 flex flex-col justify-end p-5 md:p-6 min-h-[18rem] md:min-h-[22rem]">
+			<?php if ( ! empty( $card['show_date'] ) && ! empty( $card['date'] ) ) : ?>
+				<time datetime="<?php echo esc_attr( $card['date_iso'] ); ?>" class="<?php echo esc_attr( $classes['overlay_meta'] ?? 'text-white/80' ); ?> text-sm mb-2">
+					<?php echo esc_html( $card['date'] ); ?>
+				</time>
+			<?php endif; ?>
+			<h3 class="<?php echo esc_attr( $classes['overlay_text'] ?? 'text-white' ); ?> text-lg md:text-xl font-bold font-heading leading-tight mt-0 mb-2">
+				<span class="group-hover:underline"><?php echo $card['title']; ?></span>
+			</h3>
+			<?php if ( ! empty( $card['show_excerpt'] ) && ! empty( $card['excerpt'] ) ) : ?>
+				<p class="<?php echo esc_attr( $classes['overlay_meta'] ?? 'text-white/80' ); ?> text-sm md:text-base leading-relaxed line-clamp-3 mt-0 mb-0">
+					<?php echo $card['excerpt']; ?>
+				</p>
+			<?php endif; ?>
+		</div>
+	</a>
+</article>

package/packages/widgets/posts-grid-overlay/templates/partials/card.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Template Partial: Grid Posts – single post card
+ *
+ * Expects $card (single post data) and $view['classes'] in scope.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) || empty( $card ) || empty( $view ) ) {
+	return;
+}
+
+if ( ! defined( 'SOCIALLANE_ELEMENTS_PATH' ) ) {
+	return;
+}
+
+$classes       = $view['classes'] ?? [];
+$elements_path = SOCIALLANE_ELEMENTS_PATH . 'elements';
+?>
+
+<article class="<?php echo esc_attr( $classes['card'] ?? '' ); ?> rounded-xl overflow-hidden flex flex-col h-[30rem] max-h-[35rem] transition-shadow hover:shadow-lg">
+	<?php if ( ! empty( $card['show_image'] ) && ! empty( $card['image']['src'] ) ) : ?>
+		<a href="<?php echo esc_url( $card['url'] ); ?>" class="block focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none rounded-t-xl overflow-hidden">
+			<?php
+			$image         = $card['image'];
+			$image['class'] = 'w-full h-48 object-cover';
+			include $elements_path . '/image/templates/render.php';
+			?>
+		</a>
+	<?php endif; ?>
+	<div class="p-5 md:p-6 flex flex-col flex-1">
+		<?php if ( ! empty( $card['show_date'] ) && ! empty( $card['date'] ) ) : ?>
+			<time datetime="<?php echo esc_attr( $card['date_iso'] ); ?>" class="<?php echo esc_attr( $classes['meta'] ?? '' ); ?> text-blue-chill-300/50 dark:text-blue-chill-300/80 text-sm mb-2">
+				<?php echo esc_html( $card['date'] ); ?>
+			</time>
+		<?php endif; ?>
+		<h3 class="<?php echo esc_attr( $classes['title'] ?? '' ); ?> text-blue-chill-300 dark:text-blue-chill-300 text-lg md:text-xl font-normal font-heading leading-tight mt-0 mb-2">
+			<a href="<?php echo esc_url( $card['url'] ); ?>" class="text-inherit no-underline focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none rounded">
+				<?php echo $card['title']; ?>
+			</a>
+		</h3>
+		<?php if ( ! empty( $card['show_excerpt'] ) && ! empty( $card['excerpt'] ) ) : ?>
+			<div class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?> text-blue-chill-100/50 dark:text-blue-chill-100/50 text-[.85rem] leading-relaxed flex-1">
+				<?php echo $card['excerpt']; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</article>

package/packages/widgets/posts-grid-overlay/templates/wrapper.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Template: Grid Posts Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - posts (array of card data: title, url, date, date_iso, excerpt, image, show_*)
+ * - show_heading, heading, heading_tag
+ * - grid_class, classes, widget_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$posts = $view['posts'];
+$classes = $view['classes'] ?? [];
+?>
+
+<section
+	class="<?php echo esc_attr( $classes['section'] ?? '' ); ?> py-12 md:py-16 lg:py-20"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( ! empty( $view['show_heading'] ) && ! empty( $view['heading'] ) ) : ?>aria-labelledby="posts-grid-<?php echo esc_attr( $view['widget_id'] ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php if ( ! empty( $view['show_heading'] ) && ! empty( $view['heading'] ) ) : ?>
+			<<?php echo $view['heading_tag']; ?>
+				id="posts-grid-<?php echo esc_attr( $view['widget_id'] ); ?>"
+				class="<?php echo esc_attr( $classes['title'] ?? '' ); ?> text-2xl md:text-3xl font-bold font-heading mb-8 md:mb-10"
+				<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+			>
+				<?php echo $view['heading']; ?>
+			</<?php echo $view['heading_tag']; ?>>
+		<?php endif; ?>
+
+		<?php if ( empty( $posts ) ) : ?>
+			<p class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?>"><?php esc_html_e( 'No posts found.', 'sociallane-elements' ); ?></p>
+		<?php else : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<div class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-6 lg:gap-8" <?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $posts as $card ) : ?>
+					<?php include __DIR__ . '/partials/card-overlay.php'; ?>
+				<?php endforeach; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>