Astra_Customizer::render_style_guide_markup()

		public function render_style_guide_markup() {
			$settings = apply_filters(
				'astra_quick_customizer_navigation_setup',
				array(
					'colors' => array(
						'color-0' => array(
							'title' => __( 'Brand', 'astra' ),
							'code'  => 'var(--ast-global-color-0)',
						),
						'color-1' => array(
							'title' => __( 'Alt Brand', 'astra' ),
							'code'  => 'var(--ast-global-color-1)',
						),
						'color-2' => array(
							'title' => __( 'Heading', 'astra' ),
							'code'  => 'var(--ast-global-color-2)',
						),
						'color-3' => array(
							'title' => __( 'Text', 'astra' ),
							'code'  => 'var(--ast-global-color-3)',
						),
						'color-4' => array(
							'title' => __( 'Primary', 'astra' ),
							'code'  => 'var(--ast-global-color-4)',
						),
						'color-5' => array(
							'title' => __( 'Secondary', 'astra' ),
							'code'  => 'var(--ast-global-color-5)',
						),
						'color-6' => array(
							'title' => __( 'Alt BG', 'astra' ),
							'code'  => 'var(--ast-global-color-6)',
						),
						'color-7' => array(
							'title' => __( 'Subtle BG', 'astra' ),
							'code'  => 'var(--ast-global-color-7)',
						),
						'color-8' => array(
							'title' => __( 'Extra', 'astra' ),
							'code'  => 'var(--ast-global-color-8)',
						),
					),
				)
			);

			ob_start();
			?>
				<button class="ast-close-tour" type="button">
					<span class="screen-reader-text"><?php esc_html_e( 'Close', 'astra' ); ?></span>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
				</button>
				<div class="ast-tour-inner-wrap">
					<div class="ast-quick-tour-body">
						<div class="ast-sg-2-col-grid">
							<div class="ast-styler-card">
								<p class="ast-sg-card-title"> <?php esc_html_e( 'Site Title & Logo', 'astra' ); ?>
								<div class="ast-sg-element-wrap ast-sg-logo-section <?php echo esc_attr( astra_get_option( 'logo-title-inline' ) ? 'ast-logo-title-inline' : '' ); ?>">
									<?php echo $this->get_style_guide_shortcut_trigger( 'section', 'title_tagline' ); ?>
									<?php do_action( 'astra_site_identity' ); ?>
								</div>
							</div>
							<div class="ast-sg-1-col-grid">
								<div class="ast-styler-card">
									<p class="ast-sg-card-title"> <?php esc_html_e( 'Site Icon', 'astra' ); ?>
									<div class="ast-sg-element-wrap">
										<?php echo $this->get_style_guide_shortcut_trigger( 'section', 'astra-site-identity' ); ?>
										<?php do_action( 'astra_style_guide_site_icon' ); ?>
									</div>
								</div>

								<div class="ast-styler-card">
									<p class="ast-sg-card-title"> <?php esc_html_e( 'Buttons', 'astra' ); ?>
									<div class="ast-sg-button-element-wrap">
										<div class="ast-sg-element-wrap">
											<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[button-preset-style]' ); ?>
											<button class="ast-button"> <?php esc_html_e( 'Primary', 'astra' ); ?> </button>
										</div>
										<div class="ast-sg-element-wrap">
											<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[secondary-button-preset-style]', 'design' ); ?>
											<button class="ast-outline-button"> <?php esc_html_e( 'Secondary', 'astra' ); ?> </button>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="ast-sg-colors-section ast-styler-card">
							<p class="ast-sg-card-title"> <?php esc_html_e( 'Colors', 'astra' ); ?>
							<div class="ast-sg-colors-section-wrap">
								<?php
								foreach ( $settings['colors'] as $key => $data_attrs ) {
									?>
									<div class="ast-sg-color-item-wrap">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', 'astra-color-palettes', 'general', 'data-reference="ast-' . esc_attr( $key ) . '"' ); ?>
										<span class="ast-sg-color-picker" style="background:<?php echo $data_attrs['code']; ?>"> </span>
										<span class="ast-sg-field-title"> <?php echo esc_html( $data_attrs['title'] ); ?>
									</div>
									<?php
								}
								?>
									</div>
								</div>

						<div class="ast-sg-content-section-wrap ast-styler-card">
							<p class="ast-sg-card-title"> <?php esc_html_e( 'Typography', 'astra' ); ?>
							<div class="ast-sg-content-inner-wrap">
								<div class="ast-sg-heading-section">
									<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-headings-font-settings]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
									<h1> <?php esc_html_e( 'Headings', 'astra' ); ?> </h1>
									<h2 class="sub-heading"> A a B b C c D d E e F f G g H h I i J j K k L l M m N n O o P p Q q R r S s T t U u V v W w X x Y y Z z </h2>
								</div>
								<div class="ast-sg-content-section">
									<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-body-font-settings]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
									<p> <?php esc_html_e( 'Here\'s how the body text will look like on your website. You can customize the typography to match your brand personality. Whether you aim for a modern and sleek appearance or a more traditional and elegant feel, the right typography sets the tone for your content.', 'astra' ); ?> </p>
								</div>
							</div>

							<div class="ast-sg-content-inner-wrap" id="ast-sg-content-more-wrapper">
								<div class="ast-sg-heading-more-section">
									<div class="ast-sg-heading-card">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-heading-h1-typo]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
										<?php echo $this->get_formatted_font_style( 'h1' ); ?>
										<h1 class="ast-sg-heading"> <?php esc_html_e( 'Heading 1', 'astra' ); ?> </h1>
									</div>

									<div class="ast-sg-heading-card">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-heading-h2-typo]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
										<?php echo $this->get_formatted_font_style( 'h2' ); ?>
										<h2 class="ast-sg-heading"> <?php esc_html_e( 'Heading 2', 'astra' ); ?> </h2>
									</div>

									<div class="ast-sg-heading-card">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-heading-h3-typo]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
										<?php echo $this->get_formatted_font_style( 'h3' ); ?>
										<h3 class="ast-sg-heading"> <?php esc_html_e( 'Heading 3', 'astra' ); ?> </h3>
									</div>

									<div class="ast-sg-heading-card">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-heading-h4-typo]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
										<?php echo $this->get_formatted_font_style( 'h4' ); ?>
										<h4 class="ast-sg-heading"> <?php esc_html_e( 'Heading 4', 'astra' ); ?> </h4>
									</div>

									<div class="ast-sg-heading-card">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-heading-h5-typo]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
										<?php echo $this->get_formatted_font_style( 'h5' ); ?>
										<h5 class="ast-sg-heading"> <?php esc_html_e( 'Heading 5', 'astra' ); ?> </h5>
									</div>

									<div class="ast-sg-heading-card">
										<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-heading-h6-typo]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
										<?php echo $this->get_formatted_font_style( 'h6' ); ?>
										<h6 class="ast-sg-heading"> <?php esc_html_e( 'Heading 6', 'astra' ); ?> </h6>
									</div>
								</div>

								<div class="ast-sg-content-section">
									<?php echo $this->get_style_guide_shortcut_trigger( 'control', ASTRA_THEME_SETTINGS . '[ast-body-font-settings]', 'general', 'data-reference="ast-toggle-desc-wrap"' ); ?>
									<p> <?php esc_html_e( 'Explore different font families, sizes, weights, and styles to find the perfect combination that encapsulates the essence of your brand. With each adjustment, see how your message transforms, becoming a powerful reflection of your identity and vision.', 'astra' ); ?> </p>

									<p class="ast-sg-card-title"> <?php esc_html_e( 'Quote', 'astra' ); ?>
									<blockquote>
										<p> <?php esc_html_e( 'The future will belongs to those who believe in the beauty of their dreams.', 'astra' ); ?> </p> <br/>
										<footer> Elanor Rosevelt </footer>
									</blockquote>

									<p class="ast-sg-content-divider"></p>

									<p class="ast-sg-card-title"> <?php esc_html_e( 'Unordered List', 'astra' ); ?>
									<ul>
										<li> <?php esc_html_e( 'List Item 1', 'astra' ); ?> </li>
										<li> <?php esc_html_e( 'List Item 2', 'astra' ); ?> </li>
										<li> <?php esc_html_e( 'List Item 3', 'astra' ); ?> </li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			<?php
			$navigation_markup = ob_get_clean();
			return $navigation_markup;
		}