refining page-card

This commit is contained in:
Antoine M 2023-11-29 18:47:58 +01:00
parent d3caed9164
commit 4c1faf3acb
2 changed files with 17 additions and 15 deletions

View File

@ -1,10 +1,12 @@
.page-card { .page-card {
@apply p-6 shadowed my-4 bg-white rounded-2xl; @apply relative py-6 px-16 shadowed my-4 bg-white rounded-2xl grid gap-12 justify-center items-center;
grid-template-columns: 120px 1fr;
&__title { &__title {
@apply !text-2xl font-bold text-secondary; @apply !text-2xl font-bold text-secondary !my-0;
} }
&__cta { &__cta {
@apply hidden; }
&__page-cover-illustration {
@apply rounded-2xl;
} }
} }

View File

@ -1,18 +1,18 @@
<?php <?php
echo '<pre>';
print_r($args);
echo '</pre>';
?> ?>
<div class="page-card"> <div class="page-card">
<img class="page-card__page-cover-illustration" src="<?php echo $args['coverIllustration']['url'] ?>" alt="<?php echo $args['coverIllustration']['alt'] ?>">
<div class="page-card__inner">
<h2 class="page-card__title"><?php echo $args['title'] ?></h2> <h2 class="page-card__title"><?php echo $args['title'] ?></h2>
<p class="page-card__excerpt"><?php echo $args['excerpt'] ?></p> <p class="page-card__excerpt"><?php echo $args['excerpt'] ?></p>
<a href=" <?php echo $args['permalink'] ?>" class="page-card__cta cta cta--read-more cta--with-arrow-button cta--streched "> <a href=" <?php echo $args['permalink'] ?>" class="page-card__cta cta cta--read-more cta--with-arrow-button cta--streched ">
<!-- cta-read-more --> <!-- cta-read-more -->
<span><?php echo __("Lire l'article", 'homegrade-theme__texte-fonctionnel') ?></span> <span><?php echo __("En savoir plus", 'homegrade-theme__texte-fonctionnel') ?></span>
<span class="sr-only"><?php echo $args['title'] ?></span> <span class="sr-only"><?php echo $args['title'] ?></span>
<img class="cta_arrow_button" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''> <img class="cta_arrow_button" src='<?php echo get_template_directory_uri() ?>/resources/img/graphic-assets/arrow-right-circle.svg' alt=''>
</a> </a>
</div>
</div> </div>