Check out 100+ beautiful news section layouts

function np_breaking_hero_with_side_bottom_shortcode($atts) {
    $atts = shortcode_atts(array(
        'category'          => '',
        'posts_per_page'    => 10,
        'offset'            => 0,
        'unique_group'      => 'breakinghero1',
        'title_color'       => '#ffffff',
        'accent_color'      => '#c8102e',
        'padding'           => '30',
        'side_posts'        => 4,           // Number of posts in right sidebar
        'bottom_columns'    => 4,           // Number of columns in bottom grid
        'hero_scrolling'    => 'no',        // 'yes' = auto scroll titles, 'no' = static
        'custom_class'      => ''
    ), $atts);

    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => intval($atts['posts_per_page']),
        'offset'         => intval($atts['offset']),
        'orderby'        => 'date',
        'order'          => 'DESC'
    );
    if (!empty($atts['category'])) {
        $args['category_name'] = sanitize_text_field($atts['category']);
    }

    $query = new WP_Query($args);
    $posts = $query->posts;

    if (empty($posts)) return '';

    $hero_post = $posts[0];
    $side_start = 1;
    $bottom_start = $side_start + intval($atts['side_posts']);

    ob_start(); ?>
    <style>
    .np-breaking-hero-section {padding:<?php echo esc_attr($atts['padding']); ?>px 0;}

    /* Main Hero */
    .np-hero-main {
        background: linear-gradient(rgba(0,0,0,0.65), rgba(200,16,46,0.85)), 
                    url('<?php echo esc_url(get_the_post_thumbnail_url($hero_post->ID, 'full')); ?>') center/cover no-repeat;
        height: 520px;
        border-radius: 12px;
        position: relative;
        display: flex;
        align-items: flex-end;
        padding: 50px 40px;
        color: <?php echo esc_attr($atts['title_color']); ?>;
        margin-bottom: 30px;
        overflow: hidden;
    }
    .np-hero-title {
        font-size: 2.4rem;
        line-height: 1.3;
        font-weight: 900;
        max-width: 90%;
    }

    /* Right Side List */
    .np-side-list {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }
    .np-side-item {
        display: flex;
        gap: 16px;
    }
    .np-side-item img {
        width: 110px;
        height: 82px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
    }
    .np-side-title {
        font-size: 1.08rem;
        line-height: 1.45;
        font-weight: 700;
        color: #111;
    }

    /* Bottom Grid */
    .np-bottom-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
    }
    .np-bottom-card {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }
    .np-bottom-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }
    .np-bottom-body {
        padding: 16px;
    }
    .np-bottom-title {
        font-size: 1.12rem;
        line-height: 1.4;
        font-weight: 700;
        color: #111;
    }

    /* Scrolling Effect */
    <?php if ($atts['hero_scrolling'] === 'yes') : ?>
    .np-hero-title {
        animation: titleScroll 25s linear infinite;
        white-space: nowrap;
    }
    @keyframes titleScroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    <?php endif; ?>
    </style>

    <div class="np-breaking-hero-section <?php echo esc_attr($atts['custom_class']); ?>">
        
        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 30px;">

            <!-- Big Hero Post -->
            <div class="np-hero-main">
                <h1 class="np-hero-title">
                    <a href="<?php echo esc_url(get_permalink($hero_post)); ?>" style="color:inherit;">
                        <?php echo esc_html(get_the_title($hero_post)); ?>
                    </a>
                </h1>
            </div>

            <!-- Right Side Posts -->
            <div class="np-side-list">
                <?php 
                for($i = $side_start; $i < $side_start + intval($atts['side_posts']) && isset($posts[$i]); $i++) : ?>
                <div class="np-side-item">
                    <a href="<?php echo esc_url(get_permalink($posts[$i])); ?>">
                        <?php echo get_the_post_thumbnail($posts[$i]->ID, 'thumbnail'); ?>
                    </a>
                    <h4 class="np-side-title">
                        <a href="<?php echo esc_url(get_permalink($posts[$i])); ?>" style="color:inherit;">
                            <?php echo esc_html(get_the_title($posts[$i])); ?>
                        </a>
                    </h4>
                </div>
                <?php endfor; ?>
            </div>
        </div>

        <!-- Bottom Grid -->
        <div class="np-bottom-grid" style="margin-top: 40px;">
            <?php 
            for($i = $bottom_start; $i < count($posts); $i++) : ?>
            <div class="np-bottom-card">
                <a href="<?php echo esc_url(get_permalink($posts[$i])); ?>">
                    <?php echo get_the_post_thumbnail($posts[$i]->ID, 'medium'); ?>
                </a>
                <div class="np-bottom-body">
                    <h3 class="np-bottom-title">
                        <a href="<?php echo esc_url(get_permalink($posts[$i])); ?>" style="color:inherit;">
                            <?php echo esc_html(get_the_title($posts[$i])); ?>
                        </a>
                    </h3>
                </div>
            </div>
            <?php endfor; ?>
        </div>
    </div>
    <?php
    wp_reset_postdata();
    return ob_get_clean();
}
add_shortcode('breaking_hero_with_side_bottom', 'np_breaking_hero_with_side_bottom_shortcode');