footballrs.net

Copy: Caption 

<div class="typo caption">eius perferendis voluptatum rem voluptates rerum</div>
 
{% set className = className is not empty ? ' ' ~ className : '' %}
<div class="typo{{ className }}">{{ text|raw }}</div>
 
{
  "text": "eius perferendis voluptatum rem voluptates rerum",
  "className": "caption"
}
  • Content: 
    <?php

namespace App\Views\Atoms\copy;

use ACFToolkit\FieldClasses\Wysiwyg;
use ACFToolkit\Types\CustomAtom;
use ACFToolkit\Traits\SetConditionalLogic;
use ACFToolkit\Traits\SetWrapperWidth;

class Copy extends CustomAtom
{
    use SetWrapperWidth, SetConditionalLogic;

    public string $name = 'copy';
    public string $label = 'Copy';
    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, [
            (new Wysiwyg($this->getPrefixedName($this->name, 'text'), $title))
                ->setWrapperWidth($this->wrapperWidth)
        ]));
    }
}
  • URL: /components/raw/copy/Copy.php
  • Filesystem Path: resources/Views/Atoms/copy/Copy.php
  • Size: 775 Bytes
  • Content: 
    <?php

namespace App\Views\Atoms\copy;

use ACFToolkit\ViewModels\BaseViewModel;

class CopyViewModel extends BaseViewModel
{
    public function text()
    {
        return $this->getPrefixedData('text');
    }
}
  • URL: /components/raw/copy/CopyViewModel.php
  • Filesystem Path: resources/Views/Atoms/copy/CopyViewModel.php
  • Size: 214 Bytes
  • Content: 
    {
    "name": "cknott/copy",
    "type": "cknott-content-element-atom",
    "authors": [
        {
            "name": "cknott",
            "email": "ck@cknott.net"
        }
    ],
    "require": {}
}
  • URL: /components/raw/copy/composer.json
  • Filesystem Path: resources/Views/Atoms/copy/composer.json
  • Size: 203 Bytes
  • Content: 
    .typo {
  &--button-label {
    @apply tracking-wider text-button-label sm:text-button-label-md uppercase font-headline-md;
  }

  &--caption {
    @apply text-caption sm:text-caption-md;

    &-bold {
      @apply font-headline;
    }

    &-medium-bold {
      @apply font-headline-md;
    }
  }

  &--link {
    @apply underline;
  }

  &--caption-small {
    @apply text-caption-small sm:text-caption-small-md;

    &-bold {
      @apply font-headline;
    }

    &-medium-bold {
      @apply font-headline-md;
    }
  }

  &--caption-very-small {
    @apply text-caption-very-small sm:text-caption-very-small-md;

    &-bold {
      @apply font-headline;
    }
  }

  &--typo-clou {
    @apply text-typo-clou sm:text-typo-clou-md font-headline;
  }

  &--copy {
    @apply text-copy sm:text-copy-md;

    &-bold {
      @apply font-headline;
    }

    &-medium-bold {
      @apply font-headline-md;
    }
  }

  &--intro {
    @apply text-intro sm:text-intro-md;

    &-bold {
      @apply font-headline;
    }

    &-medium-bold {
      @apply font-headline-md;
    }

    &-condensed {
      @apply text-intro-condensed sm:text-intro-condensed-md;
    }
  }

  blockquote {
    @apply relative pl-1.25 my-2 font-headline;

    &:before {
      content: '';
      @apply absolute left-0 inline-block mr-2 w-0.5 h-full bg-petrol;

    }
  }

  strong {
    @apply font-headline;
  }
}

.gradient .typo {
  @apply text-white;
}
  • URL: /components/raw/copy/copy.scss
  • Filesystem Path: resources/Views/Atoms/copy/copy.scss
  • Size: 1.4 KB

No notes defined.