ecardilly Design Components

Action Prompt 

<div class="container">
    <div class="row">
        <ul class="action_prompts d_grid-12">
            <li>
                <a href="#action" class="--no_style">
                    <div class="ap_icon">
                        <i class="ph ph-bold ph-cards"></i>
                    </div>

                    <div class="ap_desc">
                        <strong>eCard gestalten</strong>
                        <p class="font--medium">
                            Schnell &amp; liebevoll online erstellen.
                        </p>
                    </div>

                    <button type="button" class="btn btn--primary btn--tiny">
                        <i class="ph ph-bold ph-plus-circle"></i>
                        <span>eCard erstellen</span>
                    </button>
                </a>
            </li>
            <li>
                <a href="#action" class="--no_style">
                    <div class="ap_icon">
                        <i class="ph ph-bold ph-calendar-heart"></i>
                    </div>

                    <div class="ap_desc">
                        <strong>Event organisieren</strong>
                        <p class="font--medium">
                            Alles Wichtige für dein Fest an einem Ort.
                        </p>
                    </div>

                    <button type="button" class="btn btn--primary btn--tiny">
                        <i class="ph ph-bold ph-plus-circle"></i>
                        <span>Eventseite erstellen</span>
                    </button>
                </a>
            </li>
            <li>
                <a href="#action" class="--no_style">
                    <div class="ap_icon">
                        <i class="ph ph-bold ph-grid-nine"></i>
                    </div>

                    <div class="ap_desc">
                        <strong>Deine Fotowand</strong>
                        <p class="font--medium">
                            Halte eure schönsten Momente fest.
                        </p>
                    </div>

                    <button type="button" class="btn btn--primary btn--tiny">
                        <i class="ph ph-bold ph-plus-circle"></i>
                        <span>Fotowand erstellen</span>
                    </button>
                </a>
            </li>
        </ul>
    </div>
</div>
 
<div class="container">
	<div class="row">
		<ul class="action_prompts d_grid-12">
			{{#each actions}}
				<li>
					<a href="{{href}}" class="--no_style">
						<div class="ap_icon">
							<i class="ph ph-bold {{icon}}"></i>
						</div>

						<div class="ap_desc">
							<strong>{{title}}</strong>
							<p class="font--medium">
								{{description}}
							</p>
						</div>

						<button
							type="button"
							class="btn btn--primary btn--tiny"
						>
							<i class="ph ph-bold ph-plus-circle"></i>
							<span>{{button_text}}</span>
						</button>
					</a>
				</li>
			{{/each}}
		</ul>
	</div>
</div>
 
{
  "actions": [
    {
      "icon": "ph-cards",
      "title": "eCard gestalten",
      "description": "Schnell & liebevoll online erstellen.",
      "button_text": "eCard erstellen",
      "href": "#action"
    },
    {
      "icon": "ph-calendar-heart",
      "title": "Event organisieren",
      "description": "Alles Wichtige für dein Fest an einem Ort.",
      "button_text": "Eventseite erstellen",
      "href": "#action"
    },
    {
      "icon": "ph-grid-nine",
      "title": "Deine Fotowand",
      "description": "Halte eure schönsten Momente fest.",
      "button_text": "Fotowand erstellen",
      "href": "#action"
    }
  ]
}

No notes defined.