acf field grounp display in page code example

Example 1: acf group

// LOOP

<?php if( have_rows('hero') ): ?>
    <?php while( have_rows('hero') ): the_row(); 

        // Get sub field values.
        $image = get_sub_field('image');
        $link = get_sub_field('link');

        ?>
        <div id="hero">
            <img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
            <div class="content">
                <?php the_sub_field('caption'); ?>
                <a href="<?php echo esc_url( $link['url'] ); ?>"><?php echo esc_attr( $link['title'] ); ?></a>
            </div>
        </div>
        <style type="text/css">
            #hero {
                background-color: <?php the_sub_field('color'); ?>;
            }
        </style>
    <?php endwhile; ?>
<?php endif; ?>

Example 2: acf group

<?php

// BASIC GROUP

$hero = get_field('hero');
if( $hero ): ?>
    <div id="hero">
        <img src="<?php echo esc_url( $hero['image']['url'] ); ?>" alt="<?php echo esc_attr( $hero['image']['alt'] ); ?>" />
        <div class="content">
            <?php echo $hero['caption']; ?>
            <a href="<?php echo esc_url( $hero['link']['url'] ); ?>"><?php echo esc_html( $hero['link']['title'] ); ?></a>
        </div>
    </div>
    <style type="text/css">
        #hero {
            background-color: <?php echo esc_attr( $hero['color'] ); ?>;
        }
    </style>
<?php endif; ?>