footballrs.net

Headline: h4 bold 

<h4 class="headline headline--m bold">quisquam reprehenderit incidunt quae quod hic</h4>
 
{#
    Headline
    --------
    Arguments:
        * type <String>[h1,h2,h3,h4,h5,h6]
        * class
        * headline <String>
#}
{% set typeClassMap = {
    h1: '',
    h2: 'headline--xl',
    h3: 'headline--l',
    h4: 'headline--m',
    h5: 'headline--s',
    h6: 'headline--s',
} %}
{% set type = type ?? 'h1' %}
{% set className = className != '' ? ' ' ~ className : '' %}
{% set headlineText = headline ?? 'Headline' %}
{% set headlineType = ignoreTypeMap == true ?
    ' ' ~ headline_style :
    (typeClassMap[type] != '' ?
        ' ' ~ typeClassMap[type] :
    '')
%}
{% if headlineText != '' %}
{% set headlineTag = '<' ~ type  ~ ' class="headline' ~ headlineType ~ className ~ '">' ~ headlineText ~ '</' ~ type ~ '>' %}
    {{ headlineTag|raw }}
{% endif %}
 
{
  "headline": "quisquam reprehenderit incidunt quae quod hic",
  "type": "h4",
  "className": "bold"
}
  • Content: 
    <?php

namespace Theme\Views\Atoms\headline;

use ACFToolkit\FieldClasses\Select;
use ACFToolkit\FieldClasses\Text;
use ACFToolkit\Traits\SetConditionalLogic;
use ACFToolkit\Traits\SetMessage;
use ACFToolkit\Traits\SetWrapperWidth;
use ACFToolkit\Types\CustomAtom;

class Headline extends CustomAtom
{
    use SetConditionalLogic, SetWrapperWidth, SetMessage;

    public string $label = 'Headline';
    public int $needsJs = 0;
    public int $needsVue = 0;
    public int $needsVueInitialisation = 0;

    public function __construct($name = '', $title = '', $children = [])
    {
        parent::__construct($name, $title);
        $this->addChildren(array_merge($children, [
            (Text::getInstance( 'headline', $title)),
            (Select::getInstance( 'headline_type', 'Headline tag'))
                ->setWrapperWidth(50)
                ->addChoices([
                    'h1' => 'H1 (48px)',
                    'h2' => 'H2 (32px)',
                    'h3' => 'H3 (24px)',
                    'h4' => 'H4 (18px)',
                    'h5' => 'H5 (16px)',
                    'h6' => 'H6 (16px)',
                ]),
            (Select::getInstance('headline_style', 'Headline style'))
                ->setWrapperWidth(50)
                ->addChoices([
                    '' => 'Use tag dependent style',
                    ' ' => 'H1 (48px)',
                    'headline--xl' => 'H2 (32px)',
                    'headline--l' => 'H3 (24px)',
                    'headline--m' => 'H4 (18px)',
                    'headline--s' => 'H5 (16px)',
                    'headline--s h6' => 'H6 (16px)',
                ]),
        ]));
    }
}
  • URL: /components/raw/headline/Headline.php
  • Filesystem Path: resources/Views/Atoms/headline/Headline.php
  • Size: 1.7 KB
  • Content: 
    <?php

namespace Theme\Views\Atoms\headline;

use ACFToolkit\ViewModels\BaseViewModel;

class HeadlineViewModel extends BaseViewModel
{
    public function headline()
    {
        return $this->getData('headline');
    }

    public function type()
    {
        return $this->getData('headline_type');
    }

    public function headline_style()
    {
        return $this->getData('headline_style');
    }

    public function ignoreTypeMap()
    {
        $headlineStyle = $this->getData('headline_style');
        return isset($headlineStyle) && !empty($headlineStyle);
    }
}
  • URL: /components/raw/headline/HeadlineViewModel.php
  • Filesystem Path: resources/Views/Atoms/headline/HeadlineViewModel.php
  • Size: 583 Bytes
  • Content: 
    .headline {
  @apply font-teko-semibold text-primary;

  font-size: 48px;

  &.bold {
    @apply font-teko-bold;
  }

  &--xl {
    font-size: 32px;

    @screen md{
    }

    @screen lg{
    }
  }

  &--l {
    font-size: 24px;

    @screen md{
    }

    @screen lg{
    }
  }

  &--m {
    font-size: 18px;

    @screen md{
    }

    @screen lg{
    }
  }

  &--s {
    font-size: 16px;

    @screen md{
    }

    @screen lg{
    }
  }
}
  • URL: /components/raw/headline/headline.scss
  • Filesystem Path: resources/Views/Atoms/headline/headline.scss
  • Size: 444 Bytes
  • Content: 
    <template>
  <Component
    :is="type"
    :class="'headline' + getTypeClassMap + (className !== '' ? ' ' + className : '')"
    v-html="headline"
  />
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'h1'
    },
    headline: {
      type: String,
    },
    className: {
      type: String,
      default: ''
    },
    ignoreTypeMap: {
      type: Boolean,
      default: false
    }
  },
  data: () => {
    return {
      typeClassMap: {
        h1: '',
        h2: ' headline--xl',
        h3: ' headline--l',
        h4: ' headline--m',
        h5: ' headline--s',
        h6: ' headline--s',
      }
    }
  },
  computed: {
    getTypeClassMap(){
      return this.ignoreTypeMap === false ?
        this.typeClassMap[this.type] :
        ''
    }
  }
}
</script>
  • URL: /components/raw/headline/headline.vue
  • Filesystem Path: resources/Views/Atoms/headline/headline.vue
  • Size: 819 Bytes

Headline

{% include '@atoms/headline/headline.twig' with {
    headline: 'headline text',
    type: 'h1',
    className: 'additional css classes',
    ignoreTypeMap: false
} only %}

ACF